Customize editor and add new custom questions in angular

[buddhika23]

Are you requesting a feature, reporting a bug or ask a question? Question

I am trying to create custom control (drop down with hard-coded service end points) and remove some default controls from the editor tool bar.

I tried to follow examples in the site, but they didn't work for me.

Could you be able to give me a sample code which I can use in angular (4)?

In the sample, i saw following message in the bottom of the example pages. does it mean, I cannot customize the editor with angular? "you have to use the knockout rendering, since Editor is based on knockout framework."

Specify your

• browser: Chrome, Edge
• browser version: Chrome 58, Edge 38
• surveyjs platform (angular or react or jquery or knockout or vue): angular
• surveyjs version: 0.12.19

[tsv2013]

@buddhika23 I'll create a sample with Angular 4 + SurveyJS Editor (from https://github.com/mgechev/angular-seed).

[tsv2013]

@buddhika23 Could you specify, what sample from SurveyJS documentation you used?

[buddhika23]

@tsv2013 I followed https://github.com/surveyjs/surveyjs_angular_quickstart sample application. I just want to add custom controls into the editor and hide some default controls from the editor.

[tsv2013]

@buddhika23 Thank you for clarification. The https://github.com/surveyjs/surveyjs_angular_quickstart sample application was built with Angular2. But you want to use Angular 4. Am I right?

Right now I'm working on a solution for you (SurveyJS + Angular4 sample).

[buddhika23]

hi @tsv2013 , I can replicate the above sample in Angular 4, BUT-my requirement is to customize the editor toolbar by adding new controls and removing some existing control.

Because I want to add a heat-map control in the editor toolbar which is not available, also i want to remove some of the existing controls from the toolbar.

[tsv2013]

@buddhika23 Will it be ok for you if I just will create a brunch in the https://github.com/surveyjs/surveyjs_angular_quickstart repo with a corresponding sample?

[buddhika23]

yes @tsv2013, thank you very much.

[tsv2013]

@buddhika23 I've prepared editor customizations sample for you at the https://github.com/surveyjs/surveyjs_angular_quickstart/tree/editor-customizations repo.

I've changed questions set in the editor's toolbox via the following code: let editorOptions = { showEmbededSurveyTab: true, questionTypes : ['text', 'checkbox', 'radiogroup', 'dropdown'] };

I've created heatmap custom widget (the first one library I've found) - you can check the heatmap.widget.ts file.

I've added heatmap custom widget to the toolbox via this code:

        this.editor.toolbox.addItem({
                name: 'heatmap',
                isCopied: true,
                iconName: 'icon-default',
                title: 'Heat Map Demo',
                json: { 'type': 'text', 'renderAs': heatmapWidget.name }
        });

You can clone this repo, change brunch to the editor-customizations then run npm i and npm start in the repo folder.

[buddhika23]

Thank you very much @tsv2013. This is exactly what I was looking for.

[frankwo1]

Hi - can you do the same for React-Quickstart? I can't seem to pass the editorOptions through

[andrewtelnov]

@frankwo1 Here it is: https://github.com/surveyjs/surveyjs_react_quickstart

Thank you, Andrew