Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

survey-creator-knockout

Package Overview
Dependencies
Maintainers
5
Versions
207
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

survey-creator-knockout

Use SurveyJS Creator to create or edit JSON for SurveyJS Library.

  • 1.9.21
  • Source
  • npm
  • Socket score

Version published
Maintainers
5
Created
Source

Survey Creator V2 for Knockout

Build Status NPM Version

Survey Creator V2 for Knockout is a visual survey designer / form builder for the Knockout version of SurveyJS.

Although it is powered by Knockout, this library can also be used with Angular, Vue, and jQuery. For React, we ship an individual version: survey-creator-react.

NOTE: This package contains Survey Creator V2. If you are looking for information on V1, refer to the survey-creator directory. Differences between these two versions are described in the following help topic: SurveyJS Creator V2: What's new. For information on how to migrate to V2, refer to the Migration Guide for SurveyJS Creator - from V1 to V2 article.

Use with Knockout, jQuery, or Vanilla JS

<head>
  <!-- ... -->
  <script src="https://unpkg.com/knockout@3.5.1/build/output/knockout-latest.js"></script>
  
  <link  href="https://unpkg.com/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet">
  <script src="https://unpkg.com/survey-core/survey.core.min.js"></script>
  <script src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
  
  <link  href="https://unpkg.com/survey-creator-core/survey-creator-core.min.css" type="text/css" rel="stylesheet">
  <script src="https://unpkg.com/survey-creator-core/survey-creator-core.min.js"></script>
  <script src="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.js"></script>
  <!-- ... -->
</head>
<body>
  <!-- ... -->
  <div id="surveyContainer">
    <div id="creatorElement" style="height: 100vh;"></div>
  </div>
  <!-- ... -->
</body>
// Instantiate Survey Creator
const creator = new SurveyCreator.SurveyCreator({ showLogicTab: true });
// Enable auto save
creator.isAutoSave = true;
// Save the survey definition JSON to your web service
creator.saveSurveyFunc = (saveNo, callback) => {
  // Call a function on your web service to store the survey definition JSON
  // As an alternative to creator.JSON, you can use the creator.text string property
  // saveSurveyJSON(this.id, creator.JSON, () => {
  //   callback(saveNo, true);
  // });
};
// Load a survey definition JSON from you web service
// ...
// Assign the survey definition to Survey Creator
// creator.JSON = yourJSON;

creator.render("creatorElement");

Use with Angular

Install the package:

npm install survey-creator-knockout --save

Open the angular.json file and reference CSS files for SurveyJS (survey-core) and Survey Creator:

{
  ...
  "projects": {
    "project-name": {
      ...
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "styles": [
              ...
              "node_modules/survey-core/defaultV2.min.css",
              "node_modules/survey-creator-core/survey-creator-core.min.css"
            ],
            ...

Create a new component and use it in your Angular application:

import { Component, Input, EventEmitter, Output, OnInit } from "@angular/core";
import { SurveyCreator } from "survey-creator-knockout";

@Component({
  // tslint:disable-next-line:component-selector
  selector: "creator",
  template: `<div class="survey-container contentcontainer codecontainer" id="surveyCreatorContainer">
    <div id="creatorElement" style="height: 100vh;"></div>
  </div>`
})
export class SurveyCreatorComponent implements OnInit {
  @Output() submitSurvey = new EventEmitter<any>();
  @Input() result: any;

  ngOnInit() {
    // Instantiate Survey Creator
    const creator = new SurveyCreator({ showLogicTab: true });
    // Enable auto save
    creator.isAutoSave = true;
    // Save the survey definition JSON to your web service
    creator.saveSurveyFunc = (saveNo, callback) => {
      // Call a function on your web service to store the survey definition JSON
      // As an alternative to creator.JSON, you can use the creator.text string property
      // saveSurveyJSON(this.id, creator.JSON, () => {
      //   callback(saveNo, true);
      // });
    };
    // Load a survey definition JSON from you web service
    // ...
    // Assign the survey definition to Survey Creator
    // creator.JSON = yourJSON;
    creator.render("creatorElement");
  }
}

Use with Vue

Install the package:

npm install survey-creator-knockout --save

Create a new component and use it in your Vue application:

<template>
  <div id="creatorElement" />
</template>

<script>
import { SurveyCreator } from "survey-creator-knockout";
// Import CSS files for SurveyJS (survey-core) and Survey Creator
import "survey-core/defaultV2.min.css";
import "survey-creator-core/survey-creator-core.min.css";

export default {
  name: "surveyjs-creator-component",
  mounted() {
    // Instantiate Survey Creator
    const creator = new SurveyCreator({ showLogicTab: true });
    // Enable auto save
    creator.isAutoSave = true;
    // Save the survey definition JSON to your web service
    creator.saveSurveyFunc = (saveNo, callback) => {
      // Call a function on your web service to store the survey definition JSON
      // As an alternative to this.creator.JSON, you can use the this.creator.text string property
      // saveSurveyJSON(this.id, creator.JSON, () => {
      //   callback(saveNo, true);
      // });
    };
    // Load a survey definition JSON from you web service
    // ...
    // Assign the survey definition to Survey Creator
    // this.creator.JSON = yourJSON;
    creator.render("creatorElement");
  }
};
</script>
   

Use with React

Use the survey-creator-react package instead.

License

The Survey Creator (Form Builder) is not available for free commercial usage. You can find more information about licensing this product on the following page: Licenses.

Keywords

FAQs

Package last updated on 24 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc