Page History

In this section:

...

Component nodes include a custom widget and a report's structure and definition. Import a custom widget from the Sample Widgets library and click a component to view its parts.

1. Choose Import from the vertical ellipses menu.
   Image RemovedImage Added
2. Choose an example widget from the Library Local > Sample Widgets folder.
   Image RemovedImage Added

Component Nodes

...

The HTML Template defines how the component should look inside of the dashboard or custom report. It defines what properties that Javascript Controller should have under the $scope object.

Image Modified

JavaScript Controller

The JavaScript Controller implements how to represent the chart according to the HTML Template. It controls the color of the chart and the drill-down operation.

Image Modified

CSS Style

This tab defines the CSS styling unique to the component. We highly recommend providing unique prefixes if you want to customize the CSS, otherwise, the style definitions may conflict with other widgets in same the dashboard.

Image Modified

Configuring Parameter Nodes

...

This tab defines list of parameters and its data source. Some parameters can also link the dependencies so that filters, such as the build ID, can be set.

Image Modified

...

This tab defines how the parameter label is presented in the Add or Edit Widget page.

Image Modified

Parameters are tightly defined under the DTP dashboard. You can use a combination of known parameters, such as filters, periods, or baseline/target build, but you can only define text box parameters as needed. Some parameter nodes defined artifacts have a profile parameter definition (see Working with Model Profiles).

...

This section explains how to create a new chart widget in DTP using the Pie chart sample widget. 

1. Choose Import > Library Local > Sample Widgets > Pie Chart example from the Extension Designer menu to import the example to a new flow tab in any service.

2. Double-click the Example Pie Chart endpoint node and review the configuration. This node defines the widget implementation. 
    Image RemovedImage Added
   You can change the following fields to configure the example widget: 

   Scroll Table Layout
   widths 30%,70%

   Component:

   Name	Name of the widget displayed in the DTP dashboard.
   UUID	Unique identifier for the endpoint that is automatically generated when you drop the endpoint node into the flow canvas.
   Type	Choose an endpoint type from the Type drop-down menu: Widget: Specifies a DTP dashboard widget. Once this value is selected, the size, category, component, and parameter fields will be available. See About the Dashboard Grid for additional information about sizing widgets. Report: Specifies a custom report for the DTP dashboard. Once this value is selected, the component and parameter fields will be available. General: Specifies a general REST endpoint. Both GET and POST operations will be available for the endpoint. To get the endpoint URL, open the Service Category Page and copy the URL.
   Category	Defines the DTP dashboard widget category. In general, the value should be either "custom" or "process intelligence". You can enter a new name to create a new category. The widget header color will be gray if you create your own category name.
   Size	Defines the size of the widget.
   Image	Specifies a preview image for the widget. This image is shown for the widget when searching in the Add Widget page (see Adding Widgets). In general, there should be no need for you to change this value.
   Component		Specifies the component to provide. Any components deployed to the flow canvas should be available from the menu.
   Parameter	Specifies the set of parameters to provide to the DTP dashboard. All parameters deployed to the flow canvas should be available from the menu.
   Description	Specifies a description of the endpoint. This description will be used on DTP dashboards, the Add Widget page (see Adding Widgets), and the Extension Designer's category page as the endpoint description.

3. Click the refresh button at the UUID field. This will ensure that the new widget does not conflict with any other endpoint.
4. Deploy the widget.
5. Drop a new Endpoint node into the flow and configure the following settings:
   1. Specify a name.
   2. Choose Widget from the Type menu.
   3. Choose Pie Chart Component from the Component menu.
   4. Choose Pie Chart - Widget Parameters from the Parameters menu.
   5. (Optional) Enter a description.
      Image RemovedImage Added
6. Click the output handle and on the new component to the input handle on the "Sample Data" function node.
    
7. Deploy the flow.
8. In Report Center, refresh the dashboard (if already open) and click Add Widget. The Add Widget overlay will display your widget on its own Your widget will be in the Custom category.
   Image RemovedImage Added
9. Finish adding the widget to see it on the dashboard.
   

...