survey-creator-knockout
Advanced tools
Use SurveyJS Creator to create or edit JSON for SurveyJS Library.
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.
<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");
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");
}
}
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 the survey-creator-react package instead.
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.
FAQs
Use SurveyJS Creator to create or edit JSON for SurveyJS Form Library.
The npm package survey-creator-knockout receives a total of 1,976 weekly downloads. As such, survey-creator-knockout popularity was classified as popular.
We found that survey-creator-knockout demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.