Creating and deploying a plug-in to add custom widgets for user applications

You can create plug-ins to add custom widgets to search and analytics applications.

About this task

You can create custom widgets by using the Dojo Toolkit. You must create a separate plug-in for each custom widget.

Sample plug-ins are provided in the ES_NODE_ROOT/master_config/searchapp/icaplugin directory. You can start developing your custom plug-ins by modifying the sample code.

Procedure

To create and deploy a plug-in that adds a custom widget in a search or analytics application:

  1. Develop the JavaScript (.js) file for the custom plug-in by using the Dojo Toolkit. Develop the plug-in as a Dojo widget that extends the ica/pane/PanePluginBase class. For information about the available functions, see the MyFirstSearchPane and MyFirstAnalyticsPane sample plug-ins.
  2. Add the plug-in file to the ES_NODE_ROOT/master_config/searchapp/icaplugin directory.
  3. Register the widget.
    1. Back up and edit the appropriate widgets.json file for the type of application to which you want to add the custom widget:
      • To register a custom widget for a search application, edit the ES_NODE_ROOT/master_config/searchserver/repo/search/Application_Name/widgets.json file.
      • To register a custom widget for an analytics application, edit the ES_NODE_ROOT/master_config/searchserver/repo/analytics/Application_Name/widgets.json file.

      Application_Name is the application ID, such as default, social, or advanced. You can determine the ID by viewing the list of applications in the application customizer.

    2. Add an entry for the widget in the following format:
      } ,
      "MyCustomAnalyticsPane" : { 
            "available" : true, 
            "label" :  "My Custom Analytics Pane" , 
            "widgetName" :  "icaplugin/MyCustomAnalyticsPane" , 
            "properties": [
      	     {"value":"test", "name":"defaultQuery", "editable":true, "sync":false,
                "type":"TextBox", "label":"Default Query", "widgetOptions":{}, 
                "requried":false}
             ]
      }

      The MyCustomAnalyticsPane field is the internal ID of this widget. You can assign any value that includes alphabetic and numeric characters only.

      The label field is the name to display for this widget in the list of available widgets in the layout customizer.

      The widgetName field is the Dojo module path of the plug-in. You must include the icaplugin directory in the path.

      The properties field defines the customizable properties for the widget. You must specify the following parameters for each property:

      value
      Default value of the widget property.
      name
      Name of the widget property.
      editable
      Specify true to display the property in Preferences and the layout customizer so that users can change the value.
      sync
      Always set this parameter to false. true is not supported.
      type
      Type of customization user interface for this property. Only TextBox is supported.
      label
      Label to display for this property in Preferences and the layout customizer.
      widgetOptions
      Not supported. Always set this parameter to {}.
      required
      Specify true to display an asterisk (*) next to the property to indicate that this property is required.

      In this example, the entry defines the defaultQuery property that is displayed in the layout customizer with the label Default Query and the default value test.

      Tip: Ensure that you include a comma (,) before each entry to conform to JSON syntax.
  4. Restart the user application.
    • If you use the embedded web application server, enter the following commands, where node_ID identifies the search server:

      esadmin searchapp.node_ID stop
      esadmin searchapp.node_ID start

      To determine the node ID for the search server, run the esadmin check command to view a list of session IDs. Look for the node ID that is listed for the searchapp session.

    • If you use WebSphere® Application Server:
      1. Enter the following command:

        esadmin config sync

      2. Stop and restart the user application.
    Tip: To test plug-in code without restarting the server, you can add the plug-ins to the ES_INSTALL_ROOT/wlpapps/servers/searchapp/apps/commonui.ear/commonui.war/icaplugin directory. After you update the contents of this directory, clear the browser cache to immediately view the changes in your application. However, this directory is automatically overridden when the server is restarted. When the server is restarted, the ES_NODE_ROOT/master_config/searchapp/icaplugin directory is copied to the ES_INSTALL_ROOT/wlpapps/servers/searchapp/apps/commonui.ear/commonui.war/icaplugin directory.