12.1.2.1.1.14.1. Dashboard with Drilldown Functionality

Charts are a useful tool for creating dashboards, which provide a visual representation of data to help users quickly understand trends and patterns. To create a dashboard with drilldown functionality, users must create three forms: a custom form, a drilldown form, and a main form.

*The custom form is used as the basis for generating a detailed report in the drilldown form. The drilldown form is used as the basis for generating a summary report in the chart. The main form is where the chart control is implemented and the dashboard is created. Each form has its own set of attributes, which define the data fields and properties associated with it.

By following these steps, users can create a dashboard with drilldown functionality that allows for a more nuanced understanding of their data.

1. Create Custom Entity

   • Access Entity Properties

     • From the Application Tree, navigate to Entities > Entity Designer (double-click to open). It will display the Entity Designer tab and expand the menu bar to show additional options.
       
     • From either the Entity tab or the menu bar, select the Add New Entity option. It will display a set of fields in which you can define the properties of the new entity.
       

   • In the fields of the Entity tab, users can define the properties of the newly created entity.
     
     • In the Name field, provide a name for the entity.
     • In the Title field, either specify a custom title for the entity or let the system automatically generate it based on the provided name.
     • In the Description field, provide a description for the entity, if needed.

2. Create Custom Attributes

   • Access Attribute Properties

     • Once you have created the entity, select the Add New Attribute option from the Entity tab. It will direct you to the Attribute tab where you can define the properties of the new attribute.
       

   • In the fields of the Attribute tab, users can define the properties of the newly created attribute.
     
     • In the Name field, provide a name for the attribute.
     • In the Title field, either specify a custom title for the attribute or let the system automatically generate it based on the provided name.
     • Choose an attribute type— Data Field or Reference.
       • For the Data Field attribute, select the appropriate data type from the dropdown.
       • For the Reference attribute, select the appropriate reference from the System Reference window.
   
   

   • Custom Entity Attributes Example

   !!Remember to select the Save Changes option from the menu bar to finalize the configuration.

3. Create & Design Custom Form

   • Access Form Properties

     • From the Application Tree, navigate to Forms > List of Forms (double-click to open). It will display the List of Forms tab and expand the menu bar to show additional options.
       
     • From the menu bar, select the New option. It will display the Form Properties window.
       

   • In the Form Properties window, users can create a new form for the application.
     
     • In the Name field, provide a name for the form.
     • In the Form Entity field, either specify a custom name for the form entity or let the system automatically generate it based on the provided form name.
     • From the Entity dropdown, select the custom entity.
     • Click OK and confirm both the prompt to start designing the form and the prompt to create a draft.

   **Design the form by adding the necessary controls (and their corresponding attributes) in a clear and organized layout.

4. Create & Design Drilldown Form

   • Access Form Properties

     • From the Application Tree, navigate to Forms > List of Forms (double-click to open). It will display the List of Forms tab and expand the menu bar to show additional options.
       
     • From the menu bar, select the New option. It will display the Form Properties window.
       

   • In the Form Properties window, users can create a new form for the application.
     
     • In the Name field, provide a name for the form.
     • In the Form Entity field, either specify a custom name for the form entity or let the system automatically generate it based on the provided form name.
     • From the Entity dropdown, select the custom entity.
     • Click OK and confirm both the prompt to start designing the form and the prompt to create a draft.

   **A drilldown form typically contains a data grid, which displays all instances of the custom form. For more information on how to create a data grid and its required attribute, click here. (Please note, however, that if you have already created the custom form and its attributes, you can skip to the fifth step in the instructions.)

5. Configure Grid / Table Data Source
   • In the Query Editor window associated with the grid, perform the following modifications to the grid’s data source:
     • To filter the grid’s data, add a filter to the data source.
       

       **To determine which clause to use for filtering, consider the type of filtration required: use the $q clause to search for specific text-based data, or use the $filter clause to filter based on specific values or conditions.

     • To add the parameter to the query, launch the Code Designer and write the corresponding code.
       

       **Use the variable “externalParams [0][“id”]” to retrieve the value passed from the chart. Note that you must use “id” as the name of the attribute passed by the chart; this part of the code is invariable.

6. Create Dashboard Form

   • Access Form Properties

     • From the Application Tree, navigate to Forms > List of Forms (double-click to open). It will display the List of Forms tab and expand the menu bar to show additional options.
       
     • From the menu bar, select the New option. It will display the Form Properties window.
       

   • In the Form Properties window, users can create a new form for the application.
     
     • In the Name field, provide a name for the form.
     • In the Form Entity field, either specify a custom name for the form entity or let the system automatically generate it based on the provided form name.
     • From the Entity dropdown, select the custom entity.
     • Click OK and confirm both the prompt to start designing the form and the prompt to create a draft.

   **Once they have launched the Form Designer, users should drag the interactive chart control from the toolbox and drop it onto the design environment.

7. Configure Chart Properties
   1. Create Data Source
      • To create a data source for the chart, click on the button. It will display the KPI Properties window.
        
        • In the Naming tab, provide the KPI name, title, and data source type.
          
        • In the DataSource tab, customize the query using C# code.
          
          1. In the command box, write the query.
          2. In the Code Designer, write the corresponding code.
        • In the Execute Parameters tab, execute the query.
          
        • Return to the Chart Editor window by clicking on the Save & Exit button.
   2. Add Chart Title
      • In the Detail tab, add a title for the chart.
        
   3. Add New Chart Type / Data Series
      • To add a new chart type, click on the Add button. It will display the Chart Gallery window, from users can select the desired chart.
        
        • Select the chart type from the window and click on the OK button. It will be listed as a new series under Common Charts.
   4. Configure Series Properties
      • In the Data tab, provide the labels and values for the chart elements.
        
   5. Save Chart Properties
      • To save changes and exit the Chart Editor window, click on the OK button.
   6. Configure Control Governance Properties
      • To access the control governance properties, click on the ellipses () inside the field.
        
        • Select the Enable View checkbox.
        • Select and/or create the appropriate form behavior.

8. Save Dashboard Form & Deploy Application
   • Save the form and select Yes in response to the following prompt:
     
   • Deploy the application to the web.
     

     **For more information on the functionality of interactive charts with drilldown capability in the web application, click here.