...
Component nodes include a custom widget and a report's structure and definition. Import the a custom widget from the Sample Widgets library and click a component to view its its parts.
- Choose Import from the ellipses menu.
- Choose an example widget from the Library > Sample Widgets folder.
...
Out of the box, Parasoft provides useful component and parameter definitions for creating your own custom widgets. All definitions are provided under Import> Library> Import > Library > Sample Widgets.
| Scroll Table Layout | ||
|---|---|---|
|
| Components | Description |
|---|---|
| Bubble Chart | This component renders concentrations of data points as bubbles along an x- and y-axis. The Modules - Bubble widget is an example of a bubble chart. |
| Donut Chart | This component renders the data as proportioned segments and includes an overall value. |
| Percentage Chart | This component renders the data as an overall percentage. The Coverage - Percent widget is an example of a percentage chart. |
| Pie Chart | This component renders the data as a pie chart with a legend. The Severities - Pie widget is an example of a pie chart. |
| Summary Chart | This component renders the data as a single summary value. The Metrics - Summary widget is an example of a summary chart. |
| Table Chart | This component renders the data as a table with five rows and an optional link to an additional report showing the complete data. The Authors - Top 5 Table widget is an example of the table chart. |
| TreeMap Chart | This component renders the data into tiles with sizes proportional to the data point values. The Modules - Top 10 Tree Map widget is an example of the tree map chart. |
...
This section explains how to create new chart widget in DTP using the Pie chart sample widget.
- Choose Import> Library> Sample Widgets> Import > Library > Sample Widgets > Pie Chart example from the Extension Designer menu to import the example to a new flow tab in any service.
Double-click the Example Pie Chart endpoint node and review the configuration. This node defines the widget implementation.
You can change the following fields to configure the example widget:Scroll Table Layout widths 30%,70% 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
GETandPOSToperations 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. Component: Specifies the component to provide. Any components deployed to the flow canvas should be available from the drop-down menu. Parameter Specifies the set the set of parameters to provide to the DTP dashboard. All parameters deployed to the flow canvas should be available from the drop-down 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. - Click the refresh button at the UUID field. This will ensure that the new widget does not conflict with any other endpoint.
- Deploy the widget.
- Drop a new Endpoint node into the flow and configure the following settings:
- Specify a name.
- Choose Widget from the Type menu.
- Choose Pie Chart Component from the Component menu.
- Choose Pie Chart - Widget Parameters from the Parameters menu.
- (Optional) Enter a description.
- Click the output handle and on the new component to the input handle on the "Sample Data" function node.
- Deploy the flow.
- In Report Center, refresh the dashboard (if already open) and click Add Widget. The Add Widget overlay will display your widget on its own category.
- Finish adding the widget to see it on the dashboard.
About the Endpoint Output Link
...
The nodes provide a structured msg.payload as the output to the endpoint. The DTP dashboard will use the response as data for the widget. In every sample widget, we provide a Sample Data function node (with actual data) and a No Data function node for possible payload schema. The No Data node demonstrate how to send an error message back to the widget so the widget can display the message properly.
Click on the connector from the custom widget to the Sample Data node and press the Delete keyDELETE.
Make a new connection to the No Data node.
...