Hello, is it possible to add custom component to the side bar near some field? I'm using the React. The concept I'm trying to refer to is angular templates reference (e.g. you can take reference to the component and pass it inside the library using input).
Add custom component to the Side Bar
Show previous comments
(0)
Comments
(0)
Sign in to comment on this post
Answers approved by surveyjs Support
Hello,
Thank you for reaching out to us. If you wish to add a custom action/button to be displayed for a property grid editor, you can add a custom property editor action. Handle the creator.onPropertyEditorUpdateTitleActions event and add an Action element to the options.titleActions
array.
The following code adds a custom action to the Title property of a Survey element:
JavaScriptimport { Action } from "survey-core";
creator.onPropertyEditorUpdateTitleActions.add((sender, options) => {
if (
options.obj.getType() === "survey" &&
options.property.name === "title"
) {
options.titleActions.push(
new Action({
id: "customAction",
title: "Custom Action",
iconSize: 18,
innerCss: "customAction",
iconName: "icon-expand-detail_16x16",
action: () => {
alert("Hello from a survey title!");
}
})
);
}
});
CSS.customAction .sv-svg-icon.spg-action-button__icon {
padding: 3px;
}
The action appears as follows:
For the record: you can use a built-in icon or register a custom icon for your action. For more information, refer to the following guide: UI Icons.
Please let me know if this option works for you.