Question T15347
Visible to All Users

Add custom component to the Side Bar

created a year ago

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).
Clipboard-File-1.png

Answers approved by surveyjs Support

created a year ago

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:

JavaScript
import { 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; }

View CodeSandbox

The action appears as follows:
Clipboard-File-1.png

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.