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;
// 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");
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;
// 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");
}
}
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;
// 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 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 3,206 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
Ransomware negotiators share how modern cybercriminals operate like corporations, using specialized teams, negotiation tactics, and reputation management.
Security News
PyPI confirms no security flaws were exploited in the Ultralytics supply chain attack and highlights improvements for safer package publishing.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.