The example contains the source code of the most requested custom items you can use in your Web Dashboard application. Use the custom items from this example as they are, or modify them according to your needs. In this Web Dashboard application, you can add custom items from the Custom Items group in the Toolbox:
- SimpleTableItem.js
- PolarChartItem.js
- ParameterItem.js
- OnlineMapItem.js
- WebPageItem.js
- GanttItem.js
- HierarchicalTreeViewItem.js
- FunnelD3.js
- _Layout.cshtml
The dashboard displays product sales for the selected category. Use the Country parameter to filter data by country. Select a category on the Polar Chart to show sales by products from this category in the table.
This dashboard contains the following custom items:
View Script: SimpleTableItem.js
A custom Simple Table item renders data from the measure / dimensions as an HTML table. You can use the Simple Table as a detail item along with the Master-Filtering feature. This custom item supports the following settings that you can configure in the Web Dashboard UI:
- Show Headers - Specifies whether to show the field headers in the table. The default value is
Auto. - Text Color - Allows you to change the text color. The default value is
Dark.
View Script: FunnelD3.js
A custom Funnel D3 Chart item renders a funnel chart using the D3Funnel JS library. This custom item supports the following settings that you can configure in the Web Dashboard UI:
- Fill Type - Specifies the funnel chart's solid or gradient fill type.
- Curved - Specifies whether the funnel is curved.
- Dynamic Height - Specifies whether the height of blocks are proportional to their weight.
- Pinch Count - Specifies how many blocks to pinch at the bottom to create a funnel "neck".
View Script: PolarChartItem.js
A custom Polar Chart item that allows you to use the dxPolarChart DevExtreme widget in your dashboards. This item supports the following settings that you can configure in the Web Dashboard UI:
- Display Labels - Specifies whether to show point labels.
View Script: ParameterItem.js
A custom Parameter item renders dashboard parameter dialog content inside the dashboard layout, and allows you to edit and submit parameter values. This item supports the following settings that you can configure in the Web Dashboard UI:
- Show Headers - Specifies whether to show headers in the parameters table.
- Show Parameter Name - Specifies whether to show the first column with parameter names.
- Automatic Updates - Specifies whether a parameter item is updated automatically. When enabled, this option hides the 'Submit' and 'Reset' buttons.
The dashboard displays information from Wikipedia for the selected country.
This dashboard contains the following custom items:
View Script: OnlineMapItem.js
A custom Online Map item allows you to place callouts on Google or Bing maps using geographical coordinates. The dxMap is used as an underlying UI component. This custom item supports the following settings that you can configure in the Web Dashboard UI:
- Provider - Specifies whether to show Google or Bing maps.
- Type - Specifies the map type. You can choose between
RoadMap,SatelliteorHybrid. - Display Mode - Specifies whether to show markers or routes.
View Script: WebPageItem.js
A custom Web Page item displays a single web page or a set of pages. You can use the Web Page as a detail item along with the Master-Filtering feature. The content is rendered inside the Inline Frame element (<iframe>). This custom item supports the following setting that you can configure in the Web Dashboard UI:
- URL - Specifies a web page URL. You can set a single page as well as a set of pages (e.g., 'https://en.wikipedia.org/wiki/{0}'). If you add a dimension and specify a placeholder, the data source field returns strings that will be inserted in the position of the {0} placeholder. Thus, the Web Page item joins the specified URL with the current dimension value and displays the page located by this address.
The dashboard displays tasks. Select the task to display detailed information in the Grid.
This dashboard contains the following custom item:
View Script: GanttItem.js
A custom Gannt item displays the task flow and dependencies between tasks. This item uses dxGantt as an underlying UI component.
The dashboard displays departmental data. Use the custom Tree View item to filter detailed information in the Grid.
This dashboard contains the following custom item:
View Script: HierarchicalTreeViewItem.js
A custom Tree View item can display hierarchical data. This item uses dxTreeView as an underlying UI component.
These extensions are distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.
