I should add a custom question in the form viewer, but I can't, if I add it directly in the JSON it doesn't appear. I use V1 of the component as I still have the old Angular, how can I display a custom question?
Custom question in form viewer problem
Answers approved by surveyjs Support
Hello,
Yes, you can use this function to register a custom component in a form library. Import ComponentCollection
from "survey-angular" and register your custom component within a SurveyJS library:
JavaScriptimport { ComponentCollection } from "survey-angular";
ComponentCollection.Instance.add({
// A unique name; must use lowercase
name: "fullname",
// A display name used in the Toolbox
title: "Full Name",
// An array of JSON schemas that configure the nested questions
elementsJSON: [
{ type: "text", name: "firstName", title: "First Name", isRequired: true },
{ type: "text", name: "lastName", title: "Last Name", isRequired: true, startWithNewLine: false }
]
});
I also attached a demo for your reference.
Hope this helps. Please let me know if you have further questions.
Thanks
P.S. We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.
Thank u Jane, this solve my problem!! Thank u very much!!
Yes i leave a good feedback for u!
Thank you! You're very welcome. Please feel free to contact us if you have any further questions.
Hello,
Would you please demonstrate how you register a custom question in a SurveyJS Form Library?
{ "logoPosition": "right", "pages": [ { "name": "page1", "elements": [ { "type": "esito", "name": "Esito Questionario" } ] } ] }
this is the JSON I created from your creator example, it's a boolean field. In your creator I see it right, but if I copy and paste the json it doesn't work. This is my code in angular project:
import { Model, SurveyNG, StylesManager } from "survey-angular"; StylesManager.applyTheme("modern"); @Component({ selector: 'pw-form-viewer', template: ` <div id="surveyContainer" [style]="style"></div> `, styleUrls: ['form-viewer.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class FormViewerComponent extends ScriptHooks implements OnInit, OnDestroy { private pStyle: CSSStyleDeclaration; @Input() set style(style: CSSStyleDeclaration) { this.pStyle = style; this.cdr.detectChanges(); } get style() { return this.pStyle; } @Input() id: string; @Input() surveyJson = {}; survey: any; constructor(public loggerService: LoggerService, public cdr: ChangeDetectorRef) { super(loggerService); } ngOnInit() { this.updateJson(this.surveyJson); } updateJson(json) { this.survey = new Model(json); SurveyNG.render("surveyContainer", { model: this.survey }); } }
Hello,
Thank you for the update. From what I gather, you register a custom
esito
component and you can successfully use it in your Survey Creator application. No matter whether you use a legacy Angular integration and thesurvey-angular
package, you need to ensure that the customesito
component is also registered within your survey runner application. Otherwise, a form library won't be able to create this question instance.Unfortunately, I do not see the code which registers a custom
esito
component. Please update your code and register this component within your form library app.Let me know if it helps.
Hello,
If you use the
survey-angular
package, you would go with registering specialized/composite custom components as it is described at Create Specialized Question Types / Create Composite Question Types. However, I though you already registered a customesito
question in your application. Therefore, you can simply reuse this code.Thanks
Jane, sorry, but what I'm trying to tell you is that from your documentation I'm not understanding how to register the component in the form library. In the creator it is clear, but I can't find any example of code that populates a form, only examples of creators.
Hello,
You would use the same code to register custom components in a Form Library and Survey Creator. Do you have access to the code which you used to register a custom
esito
component?ComponentCollection.Instance.add({ // A unique name; must use lowercase name: "fullname", // A display name used in the Toolbox title: "Full Name", // An array of JSON schemas that configure the nested questions elementsJSON: [ { type: "text", name: "firstName", title: "First Name", isRequired: true }, { type: "text", name: "lastName", title: "Last Name", isRequired: true, startWithNewLine: false } ] });
I used this method, i use this method also in the form library?