Customize the palette of Visual Editor

The Visual Editor has a palette from which the user can choose frequently used widgets. This article is a deep dive into the internals of the Visual Editor framework to show how to extend its capabilities. Visual Editor lets you create your own custom controls. This article shows the way to create a new palette category with a custom built widget DateField.

Customize the palatte of Visual Editor(Pic1) There are two ways to drag custom built widget to your view:

  1. Use choose bean optionCustomize the palatte of Visual Editor(Pic2)
  2. Add the custom built widget to palatte and use directly

Customize the palette of Visual Editor(Pic 3)

You need to follow two steps listed below to create a new palette category and add the DateField option in that:

  1. Create a new category Custom Control by adding the following line into the plugins\\palette\ file.
  2. Palette.Category.CustomControls = Custom Controls

  3. To add the DateField widget to the Category that you have created, add the following lines in plugins\\palette\ swtpalette.xmi file.


<entryLabel xsi:type=”” key=”Palette.Category.CustomControls” bundle=”#bundle”/>

<children xsi:type=””



<entryLabel xsi:type=”” string=”DateField”/>

<keyedValues xsi:type=”ecore:EStringToStringMapEntry” key=”” value=”dateField”/>