Skip to content

Latest commit

 

History

History
 
 

survey-creator-knockout

README.md

Survey Creator V2 for Knockout (Beta)

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>
  <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-coredefaultV2.min.css" type="text/css" rel="stylesheet"/>
  <script src="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.js"></script>
  <link href="https://unpkg.com/survey-creator-knockout/survey-creator-knockout.min.css" type="text/css" rel="stylesheet"/>
  <!-- ... -->
</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;
// Show notifications before and after a survey definition JSON is saved
creator.showState = 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-knockout/survey-creator-knockout.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;
    // Show notifications before and after a survey definition JSON is saved
    creator.showState = 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-knockout/survey-creator-knockout.min.css";

export default {
  name: "surveyjs-creator-component",
  mounted() {
    // Instantiate Survey Creator
    const creator = new SurveyCreator({ showLogicTab: true });
    // Enable auto save
    creator.isAutoSave = true;
    // Show notifications before and after a survey definition JSON is saved
    creator.showState = 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.