Chapter 55. Page authoring

Procedure

1. Log in to Business Central and go to Menu Design Pages.
2. Select the Navigation panel and then click New.
3. Enter the name of the new navigation tree and click the check mark icon or, press Enter.
4. Click Save.

Procedure

1. In Business Central, go to Menu Design Pages.
2. Click the Navigation panel and then select the navigation tree you want to add the entries to.
3. Click the gear icon of the tree and then select New Group, New Divider, or New Page.

4. Enter the name of the new group or page and click the check mark icon or press Enter.

   Note

   Divider entries do not have a name property.

5. Click Save.

Procedure

1. In Business Central, go to Menu Design Pages.
2. Click the Navigation panel and then select the navigation tree you want to reorder.

3. Click the gear icon of the tree and then move up or down as required.

   Note

   First and last entries of a navigation tree have only two reordering options available.

4. Click Save.

Procedure

1. In Business Central, go to Menu Design Pages.
2. Click the Navigation panel and then expand the navigation tree.
3. Click the gear icon of the entry you want to reorder and then move up or down as required.
4. Optional: Click Goto Page to view the selected page.
5. Click Save.

Procedure

1. In Business Central, go to Menu Design Pages.

2. Click the Navigation panel and then select the custom navigation tree you want to rename.

   Note

   To rename an entry of a tree, expand the tree and select the entry that you want to rename.

3. Click the edit icon of the tree or the tree entry.

4. Enter the new name of the tree and click the check mark icon.

   Note

   You cannot rename divider entries.

5. Click Save.

Procedure

1. In Business Central, go to Menu Design Pages.
2. In the Navigation panel, select the navigation tree that you want to delete, then click the delete icon.
3. Click Save.

Procedure

1. In Business Central, go to Menu Design Pages.
2. Click the Navigation panel.
3. Expand the tree that contains the entries you want delete.
4. Click the delete icon of the entry.
5. Click Save.

Procedure

1. Create a new KIE Server dataset using the following steps:

   1. In Business Central, go to Admin Data Sets.

      The Data Set Explorer page opens.

   2. Click New Data Set and select the Execution Server provider type.

      The Data Set Creation Wizard page opens.

   3. Enter the name of the dataset.
   4. Select the server configuration. The server configuration is available if the project is deployed.
   5. Select CUSTOM query target from the list.

   6. In the Query field, enter the following custom SQL query.

      select
         pil.externalId,
         pil.processId,
          nid,
          nodetype,
          nodename,
          count(nid) as total_hits,
          avg(execution_time) as averageExecutionTime,
          min(execution_time) as minExecutionTime,
          max(execution_time) as maxExecutionTime
      from(
              select
                      max(log_date) as lastLog,
                      processinstanceid as piid,
                      nodeinstanceid as niid,
                      nodeid as nid,
                      nodetype,
                      nodename,
                      DATEDIFF(SECOND, min(log_date), max(log_date)) as execution_time
              from
                      NodeInstanceLog
              group by
                    processinstanceid,
                     nodeinstanceid,
                    nid
             order by lastLog
      )
      inner join
           ProcessInstanceLog pil on pil.processInstanceId = piid
      group by
           pil.externalId,
           nid,
           nodename

   7. Complete the Data Set Creation Wizard and click Test.
   8. Click Save.
2. In Business Central, go to Menu Design Pages.
3. In the Pages panel, click New.
4. In the New Page dialog box, enter a value in the Name field and select the required style.

5. Click OK.

   The new page opens in the Page Editor and you can see that the Heatmaps component is available under the Components panel.

6. In the Components panel, expand the Heatmaps components and drag the Process Heatmap component type to the Page Editor.
7. In the Displayer editor wizard, click Data tab and select the newly created KIE Server dataset.
8. In the Data tab, select NID and AVERAGEEXECUTIONTIME from the Columns field.

9. Click the Component Editor tab and enter the values for the mandatory fields including Server Template, Container ID, and Process Definition ID into the Component Properties field.

   Note

   To access the value of Server Template, go to Deploy Execution Servers Server Configurations. For the value of Container ID, go to Manage Process Instances, you can click on the process instance you want to use and in the, Deployment corresponds to the Container ID and the Definition ID is the Process Definition ID.

10. Click the Display tab and edit the value of Chart, Margins, Filter, Refresh, and Columns as per your requirements.

11. Click +OK.

    Figure 55.2. Example process heatmap components

    

Procedure

1. Create a new KIE Server dataset using the following steps:

   1. In Business Central, go to Admin Data Sets.

      The Data Set Explorer page opens.

   2. Click New Data Set and select the Execution Server provider type.

      The Data Set Creation Wizard page opens.

   3. Enter the name of the dataset.
   4. Select the server configuration. The server configuration is available if the project is deployed.
   5. Select CUSTOM query target from the list.

   6. In the Query field, enter the following custom SQL query.

      select
         pil.externalId,
         pil.processId,
          nid,
          nodetype,
          nodename,
          count(nid) as total_hits,
          avg(execution_time) as averageExecutionTime,
          min(execution_time) as minExecutionTime,
          max(execution_time) as maxExecutionTime
      from(
              select
                      max(log_date) as lastLog,
                      processinstanceid as piid,
                      nodeinstanceid as niid,
                      nodeid as nid,
                      nodetype,
                      nodename,
                      DATEDIFF(SECOND, min(log_date), max(log_date)) as execution_time
              from
                      NodeInstanceLog
              group by
                    processinstanceid,
                     nodeinstanceid,
                    nid
             order by lastLog
      )
      inner join
           ProcessInstanceLog pil on pil.processInstanceId = piid
      group by
           pil.externalId,
           nid,
           nodename

   7. Complete the Data Set Creation Wizard and click Test.
   8. Click Save.
2. In Business Central, go to Menu Design Pages.
3. In the Pages panel, click New.
4. In the New Page dialog box, enter a value in the Name field and select the required style.

5. Click OK.

   The new page opens in the Page Editor and you can see that the Heatmaps component is available under the Components panel.

6. In the Components panel, expand the Heatmaps components and drag the All Processes Heatmaps component type to the canvas.
7. In the Displayer editor wizard, click Data tab and select the newly created KIE Server dataset.
8. In the Data tab, select EXTERNALID, PROCESSID, NID, and AVERAGEEXECUTIONTIME from the Columns field.
9. In the Process Selector box, select the Container and Process values as per your requirement.

10. Click the Component Editor tab and enter the value in the Server Template (mandatory) field.

    Note

    To access the value of Server Template, go to Deploy Execution Servers Server Configurations.

11. Click the Display tab and edit the value of Chart, Margins, Filter, Refresh, and Columns as per your requirements.

12. Click +OK.

    Figure 55.3. Example multiple processes heatmap components

    

Procedure

1. Go to the appformer/dashbuilder/dashbuilder-shared/dashbuilder-js directory.

2. Open the terminal in the dashbuilder-js directory and enter the following command:

   yarn run init && yarn run build:fast

   You can see the following components are present in the dashbuilder-js/packages directory:

   • processes-heatmaps-component
   • process-heatmap-component
   • logo-component
   • heatmap-component

3. Go to the dashbuilder-js/packages directory, open the desired heatmap component and enter the following command in the terminal:

   yarn run start

4. To access the component, enter http://localhost:9001/ in a web browser.

   The selected component is displayed on the web browser.

Procedure

1. Set the component under components directory with a parent directory.

   For example, if the component ID is mycomp and the component directory is /tmp/dashbuilder/components, then the component base directory is /tmp/dashbuilder/components/mycomp.

2. Create the manifest.json file in the component directory.
3. Create index.html file with HTML content.
4. In a terminal application, navigate to EAP_HOME/bin.

5. To enable the external components, set the value of dashbuilder.components.enable system property to true:

   $ ~/EAP_HOME/bin/standalone.sh -c standalone-full.xml
   -Ddashbuilder.components.dir={component directory base path} -Ddashbuilder.components.enable=true

6. Start Business Central, go to Menu Design Pages.

   External Components is available under Components pane.

7. In the Components pane, expand the External Components and drag the required component types to the canvas.
8. Click Save.