Creating components

Use the component customization tool to create customized components that you can add to the user interface. For example, you can either create your own customized preview card, or you can create actions that you make available in the More Actions menu on the preview card. You can also create customized full properties windows and advanced visualization components.

Before you begin

Create and install a customized module that contains the code to implement the component. You can use sample custom modules that are provided in the JUnit test junit_round_rock_ear sample data. For information about configuring the JUnit test sample data, see the related links.
  1. Define a custom module through a Dojo script that is in a JavaScript file.
  2. Configure a web file server to serve the JavaScript file by following the instructions in Configuring a web file server. Note the path location. In the Configuring a web file server section, the path location is referred to as project_directory. The Configuring a web file server in a platform environment topic gives an example that uses the JUnit test junit_round_rock_ear sample data.
  3. In a browser, verify that you can access the JavaScript file.

Procedure

  1. In the navigation menu, click Administration > Configuration Tools > Component Customization.
  2. Click Create.
  3. In the Create Custom Component window, enter the details for your custom component. The details that you must enter include the following values:
    Name
    Enter an appropriate name for the customized component.
    Type
    Select the appropriate component type from the list.
    Target
    Select a target value that the custom component is associated with, for example, data source.
    Path location
    Enter the path to the module where the custom component is implemented. For example, if you use the junit_round_rock_ear sample data, the URL for the custom preview card is https://web_server/sample/ui/extensions/js/sample/previewcard/CustomPreviewCard.js. The corresponding path location is /sample/ui/extensions/js/sample.
    Path name
    Enter a name for the path location. For example, if you use the junit_round_rock_ear sample data, the path name is sample.
    Module name
    Enter the name of the module where the custom component is implemented. The module name is the path name followed by the declared path that is in the JavaScript file. For example, if you use the custom preview card in the junit_round_rock_ear sample data, the value of Path name is sample and the declared path is previewcard/CustomPreviewCard. Therefore, the value of Module name is sample/previewcard/CustomPreviewCard.

Results

  • After you click OK in the Create Custom Component window, the name of the new component is listed in the appropriate component type submenu under Configure Components.
  • If the component type is one of the following, the custom component is automatically added to the user interface:
    • Alert Configuration
    • Analytics Plug-in
    • Notification Pane
    • Profile Management
    • Video Plug-in

Example

For example, if you added an action component that has the name Cancel All, the Configure Components > Action submenu has a new Cancel All menu option.

What to do next

If the new component is not automatically added to the user interface, use the Add Components to User Interface menu option to add the component to the user interface.