Custom Widget on Survey

mdumchikov

created 4 years ago

Hi there,

I'm able to add custom widget on Survey Creator but it's not visible on Survey page. What should be done to make it visible and ready to answer?

Answers approved by surveyjs Support

Andrew Telnov

created 4 years ago

Hello,
It means that you missed JavaScript file(s) related to your custom widget on the page where you run SurveyJS Library (survey runner).
SurveyJS loads your JSON, could not find the type of your custom widget, ignore this question and add an item into survey.jsonErrors array.

Thank you,
Andrew
SurveyJS Team

Show previous comments (7)

mdumchikov 4 years ago

Can you please provide me with example?

Alex G 4 years ago

Hello,

Here is section on our site with examples of using custom widgets with Survey Library

SurveyJS Team

mdumchikov 4 years ago

I created completely new widget like it's described here: https://surveyjs.io/Documentation/Survey-Creator/?id=Create-Custom-Widget

I didn't use custom widgets library

Andrew Telnov 4 years ago

Here is the example of custom widget in external file.
You have to include your custom widget into Survey.CustomWidgetCollection.

JavaScript
//Register our widget in singleton custom widget collection
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

Please make sure that you run this code with your custom widget on the page with SurveyJS Library before creating the survey model and loading JSON.

Thank you,
Andrew
SurveyJS Team

mdumchikov 4 years ago

I'm using survey-angular, looks like it doesn't support custom widget, am I right?

mdumchikov 4 years ago

I don't have any errors on rendering and in debugger I see that my custom type was found and rendered BUT it renders parent html regardless I added custom one.

TypeScript
export class FileUploadCustomWidget implements ICustomWidget {
  name: string;
  title: string;
  iconName: string;
  widgetIsLoaded: () => boolean;
  isFit: (question: any) => boolean;
  init: () => void;
  activatedByChanged: (activatedBy: any) => void;
  isDefaultRender: boolean;
  htmlTemplate: string;
  afterRender: (question: any, el: any) => void;

  constructor() {
    this.name = 'fileupload';
    this.title = 'File upload';
    this.iconName = 'icon-editor';
    this.widgetIsLoaded = () => true;
    this.isFit = (question) => question.getType() === 'fileupload';
    this.init = () => {
      Survey.Serializer.addClass("fileupload", [], null, "file");
      SurveyKo.Serializer.addClass("fileupload", [], null, "file");
       };
    this.activatedByChanged = () => {
      Survey.Serializer.addClass("fileupload", [], null, "file");
      SurveyKo.Serializer.addClass("fileupload", [], null, "file");
    };
    this.isDefaultRender = false;
    this.htmlTemplate = `<section class='at-left-section'>
        <p class='at-header at-header-bold'>Upload files</p>
        <p class='at-header'>Supported file formats: .csv</p>
        <div class='at-file-container'>
          <span class='at-file-section-left-side'>
            <span class='at-icon at-icon-action-upload'></span>
          </span>
          <span class='at-file-section-right-side'>
            <p>Drag and drop here or</p>
            <p class='at-browse'>Browse files</p>
            <input
              type='file'
              class='at-file-input'
              accept='.csv'
            />
          </span>
        </div>
      </section>`;

mdumchikov 4 years ago

And this is how I'm trying to render it on Survey page

TypeScript
import * as Survey from 'survey-angular';
import * as SurveyKo from 'survey-knockout';

const fileUploadWidget = new FileUploadCustomWidget();
SurveyKo.CustomWidgetCollection.Instance.addCustomWidget(fileUploadWidget, 'customtype');
...
const survey = new Survey.Model(questionnaire.definition);
survey.render('surveyElement');

mdumchikov 4 years ago

Just want to remind that it works on Creator page where I use only survey-KO version.

Serge T 4 years ago

Hello,

Probably you need to register the custom widget in the survey-angular library also:

JavaScript
import * as Survey from 'survey-angular';

const fileUploadWidget = new FileUploadCustomWidget();
Survey.CustomWidgetCollection.Instance.addCustomWidget(fileUploadWidget, 'customtype');

Thanks, Serge
SurveyJS Team

Andrew Telnov 4 years ago

Hello,
If you have SurveyJS Creator and SurveyJS runner on your page, then you have to register them in SurveyKO and in Survey. There are two instances and they are separated.

PS: We will have survey-core and survey-angular-ui in V2. You will have to register in survey-core module only that will be shared by Creator and Survey runner. However, for the first version they run two separate SurveyJS Library instances.

Thank you,
Andrew
SurveyJS Team

Custom Widget on Survey

Answers approved by surveyjs Support

Recently viewed tickets