Please ensure Javascript is enabled for purposes of website accessibility
Powered by Zoomin Software. For more details please contactZoomin

Edge HMI

Create a new custom widget

  • Last UpdatedOct 29, 2026
  • 3 minute read

Use the Custom Widgets command to create a new custom widget and then add it to your project's library.

To create a new custom widget:

  1. On the Draw tab of the ribbon, in the Libraries group, click Custom Widget.

    The Custom Widgets list is displayed. This box lists all of the widgets that have been added to your project's library.

    Custom Widgets list window

  2. Click New.

    A Custom Widget dialog box is displayed for the new widget that you are creating.

    Custom Widge dialog

  3. In the Name box, type a name for the widget.

    The name cannot contain any spaces.

  4. In the Height and Width boxes, type the default height and width (in pixels) that the widget should have when it is added to a project screen.

    Note: A custom widget, like most other screen objects, can be resized after it is inserted in a project screen.

  5. To add a property to the widget, do the following:

    1. In the Properties area, click Add.

      The Add dialog box is displayed.

    2. In the Name box, type the name of the property.

    3. Click OK to add the property to the widget and then close the dialog box.

    4. Repeat for each property that you want to add.

    These are the basic properties that will be shared by all instances of the widget. To customize the properties on a specific instance of widget โ€” that is, to associate different tags with the properties on that instance โ€” you will need to configure the widget's object properties.

  6. To add an event to the widget, do the following:

    1. In the Events area, click Add.

      The Add dialog box is displayed.

    2. In the Name box, type the name of the event.

    3. Click OK to add the event to the widget and then close the dialog box.

    4. Repeat for each event that you want to add.

    These are the basic events that will be shared by all instances of the widget. To customize the events on a specific instance of widget โ€” that is, to attach different scripts to the events on that instance โ€” you will need to configure the widget's object properties.

  7. When you are done, click OK to create the widget.

    The new widget is added to the list of widgets in the Custom Widgets dialog box. Also, the web files that actually make up the widget are automatically created in your project folder at:

    <project name>\Web\Widgets\<widget name>

  8. If you want to immediately insert an instance of this widget, make sure it is selected in the list of widgets and then click OK.

    The Custom Widgets dialog box is closed, and the widget is inserted in the project screen.

  9. If you want to close the Custom Widgets dialog box without inserting an instance of this widget, click Cancel.

Related Links