Custom User Interface

Custom UIs are a user preferred way to add their own UI implementations into the registry. It is associated with Media types (To learn more information about Media types, please, visit the Adding a Resource page). By adding a few entries to the component.xml, custom UIs can be plugged in to WSO2 products.We will be using the custom UI sample located at $GREG_HOME/samples/custom-ui/ to explain the process of writing a custom UI.

component.xml contains the Custom UI configuration. The user has to define the:

• uiType
• mediaType
• uiPath

Let us take a look at the component.xml located at src/main/resources/META-INF directory.

<component xmlns="http://products.wso2.org/carbon">
<customUI>
<uiType>view</uiType>
<mediaType>epr</mediaType>
<uiPath>../registry/custom/endpoint/epr_main_ajaxprocessor.jsp</uiPath>
</customUI>
<customUI>
<uiType>add</uiType>
<mediaType>epr</mediaType>
<uiPath>../registry/custom/endpoint/epr_add_ajaxprocessor.jsp</uiPath>
</customUI>
<customUI>
<uiType>view</uiType>
<mediaType>topic</mediaType>
<uiPath>../registry/custom/endpoint/topic_ajaxprocessor.jsp</uiPath>
</customUI>
</component>

There are three types of UIs that can be used:

• add
• edit
• view

For each UI type, you can specify the corresponding media type it will be associated to and the respective JSP that will be called. In the given example component.xml, when a epr Media type is added, the respective epr_add_ajaxprocessor.jsp is called.
Please, take a look at the respective JPSs available in the source of the sample to have a better understanding of the implementation details. Basically, this JSP, will be what is displayed when the custom UI event occurs.

Follow the instructions given in the Custom UI with Registry to run the custom UI with Registry.