Create Custom Adorners

Adorners are interactive design-surface controls placed within a question area. Adorners allow users to quickly execute the most common actions: duplicate a question, mark a question as required, or delete it. This demo shows how to customize built-in adorners and create custom adorners.

A button adorner executes a simple action on click. To create a button adorner, follow the steps below:

1. Handle the onElementGetActions event.
   This event is raised when Survey Creator renders adorners on the design surface.

2. Create an Action instance.
   Pass an IAction configuration object to the Action constructor. This object describes an action item rendered as a button adorner.

3. Add the Action instance to the options.items array.

This demo shows how to create a custom Read-Only button adorner. Refer to the code listing for more information.

A drop-down adorner opens a drop-down menu on click. The following instructions describe how to create a drop-down adorner:

1. Handle the onElementGetActions event.

2. Create an Action instance.
   Drop-down adorners have a dedicated createDropdownActionModel() helper function that generates Action instances based on IAction and IActionDropdownPopupOptions configuration objects. Import this function from survey-core and pass IAction and IActionDropdownPopupOptions objects to it.

3. Add the Action instance to the options.items array.

In this demo, a custom Sort Order drop-down adorner lets users specify the order of items in choice-based questions. For details about implementation, view code listings for Angular, React, Vue, jQuery, or Vanilla JavaScript.