Hi,
Can we add a custom popup for setting a condition inside survey creator? I need to replace the existing popup shown in the attachment with some custom popup & store it's result value against condition.
Can you please guide us on this?
Thanks,
Santosh
Hello Santosh,
Please accept my apologies for the delayed reply.
I created two demos for your reference.
The following example demonstrates how to add a custom Visible If property adorner action which activates a custom popup modal form. The form contains a custom Angular component: Survey Creator for Angular: Custom Popup Angular Component.
JavaScript creator.onPropertyEditorUpdateTitleActions.add((sender, options) => {
if (options.property.name === "visibleIf") {
options.titleActions.push({
id: "customTitleAction",
title: "Show Modal",
action: () => {
const popupViewModel = settings.showModal(
"my-custom-modal",
{ model: options.obj },
() => {
alert("apply");
// Get values from custom component and update a survey question (options.obj)
return true;
},
() => {
alert("cancel");
},
"sv-property-editor",
options.obj.title,
"popup"
);
}
});
}
The my-custom-modal is an Angular component registered in a Survey component factory:
JavaScript@Component({
selector: "my-custom-modal-component",
templateUrl: "./my-custom-editor-template.html"
})
export class CustomModalComponent {
@Input() model!: any;
}
AngularComponentFactory.Instance.registerComponent(
"my-custom-modal",
CustomModalComponent
);
The following example demonstrates how to add a custom Visible If property adorner action which activates a custom popup modal form. The form contains another Survey instance: Survey Creator for Angular: Popup Survey Property Editor.
JavaScriptlet popupJson = {
elements: [
{
type: "text",
name: "question1"
},
{
type: "file",
name: "question2"
}
]
};
let popupSurvey = new SurveyModel(popupJson);
creator.onPropertyEditorUpdateTitleActions.add((sender, options) => {
if (options.property.name === "visibleIf") {
options.titleActions.push({
id: "customTitleAction",
title: "Show Modal",
action: () => {
const popupViewModel = settings.showModal(
"survey",
{ model: popupSurvey },
() => {
alert("apply");
// Get values from a popup survey using popupSurvey.data
// And update a current question as needed: options.obj
return true;
},
() => {
alert("cancel");
},
"sv-property-editor",
options.obj.title,
"popup"
);
}
});
}
});
I hope either of these examples can help you.
Please let me know if you have any questions or require further assistance.
Hello Santosh,
The creator.onPropertyGridShowModal function is triggered by Survey Creator just before it displays a pop-up modal window for editing condition properties. You can take advantage of this event to customize the pop-up window to meet your specific needs. The function is passed options that contain all of the relevant information about a given element, its property, popup editor, and model. For further details, I encourage you to consult the function API description.
If you have any additional questions or concerns, please do not hesitate to let us know. We are always here to assist you.
Best regards,
Hi Jane,
Thanks for sharing this reference. I am able to capture the condition modal event now. However, is there any way that i can stop showing the existing modal displayed by survey js? I need to show a custom modal here instead of showing the existing one that is being displayed by survey js.
Thanks,
Santosh
Hello Santosh,
I may need additional time to create an example for you. Please stay tuned.