Skip to main content

Celonis Product Documentation

Network Explorer extensions

This page is for advanced users such as analysts setting up Network Explorer features for business users.

You can extend Network Explorer to add some functionality that is not already built in. This page shows how you can:

  • add dropdown lists.

  • set up node KPIs and edge KPIs.

Adding dropdown lists in the UI

You can set up set up dropdown list for users based on the Knowledge Model you're using.

There are three main steps:

  1. Define the elements that will appear in the dropdown.\

  2. Create a view variable to hold the user's selection when they choose from the dropdown list.

  3. Set up your component in Network Explorer to consume the view variable.

Here's how to do that.

  1. Define the elements that will appear in the dropdown:

    1. Create a custom attribute in the Knowledge Model's YAML.

      1. Click Network Explorer.

        Network-explorer_extensions_1_a_i_1.png

      2. Click the </> icon to open the YAML editor.

        Network-explorer_extensions_1_a_i_2.png

      3. Scroll down until you see the customObjects: attribute.

        If you don't find it, you'll need to create it in the next step. Otherwise, you'll need to update it in the next step.

    2. Define the elements you want to see in the dropdown.

      To create a dropdown that lists all the layout options, you'll need to define them in YAML.

      • Add this section to the YAML.

        customObjects:
  - id: GRAPH_LAYOUT
    displayName: Graph Layout
    customAttributes:
      list:
        - name: CIRCLE
          displayName: Circle
        - name: HIERARCHY
        - name: HIERARCHY_BT
        - name: HIERARCHY_LR
        - name: HIERARCHY_RL
        - name: SPRING_FDP
        - name: SPRING_NEATO

    3. Close the Knowledge Model and go to the view where you will use the dropdown.

    4. Create a new dropdown.

    5. In the dropdown's visual editor, select the custom attribute you defined in the Knowledge Model.

      1. Click Choose Data.

      2. Select Custom Objects and then select Graph Layout..

      3. Click Apply.

      4. Click Save.

      5. Click Exit Edit Mode.

  2. Create a view variable to hold the user's selection when they choose from the dropdown list:

    1. Create a view variable.

      1. Click Edit Mode.

      2. Click the variables {x} icon.

        Network-explorer_extensions_1_a_i_4.png

      3. Click New Variable.

        Network-explorer_extensions_1_a_i_5.png

      4. Enter a name for your new variable.

        Make a note of the name.

        Note that the name cannot include special characters such as dashes.

      5. Optionally, enter a default value for the variable.

      6. Click Save to save the configuration of the variable creation dialog box.

      7. Click Save to save the configuration of the view.

        Network-explorer_extensions_1_a_i_6.png

    2. Configure the dropdown to write the user selection to the view variable.

      1. Hover over your dropdown.

        Network-explorer_extensions_1_a_i_7.png

      2. Click Edit Component.

        Network-explorer_extensions_1_a_i_8.png

      3. Click Graph Layout.

        Network-explorer_extensions_1_a_i_9.png

      4. Click the checkbox for Variable update.

        Network-explorer_extensions_1_a_i_10.png

      5. Click Name and select the variable that you want to connect to your dropdown.

        Network-explorer_extensions_1_a_i_11.png

      6. Click Save.

      7. Click Exit Edit Mode.

  3. Set up your component in Network Explorer to consume the view variable:

    1. Edit the YAML of the Network Explorer component.

      1. Click Edit Mode

      2. Click the + icon.

        Network-explorer_extensions_1_a_i_12.png

      3. Choose a column layout.

        Network-explorer_extensions_1_a_i_13.png

      4. Click Create Component and select the Network Explorer.

        Network-explorer_extensions_1_a_i_14.png

      5. Open the Nodes dropdown.

        Network-explorer_extensions_1_a_i_15.png

      6. Select Materials and then Material.

        Wait until Celonis Platform builds the preview of the layout in the right pane.

        Network-explorer_extensions_1_a_i_16.png

    2. Overwrite the layout definition to include the variable.

      Note that variable names take this format: ${example}.

      1. Click the </> icon to open the YAML editor.

        The existing YAML might look like this:

        Network-explorer_extensions_1_a_i_17.png

      2. Overwrite the layout: attribute in line 7 with the name of your variable. That is, change line 7 (retaining the indentation) to:

        layout: ${Graph_Layout}

      3. Click Save and then click Exit Edit Mode.

    3. Click Save.

Now you can test that it's all working.

  1. Make a note of the layout you currently have on screen. Here, it's HIERARCHY_RL.

    Network-explorer_extensions_1_a_i_19.png

  2. Select a different layout option from the dropdown.

    Network-explorer_extensions_1_a_i_20.png
Adding node KPIs and edge KPIs

You can add node or edge KPIs of your choice from a Knowledge Model.

The procedure to do this is almost the same as the procedure shown above (for adding dropdowns). The only difference is in step 1a.

Here, rather than using a predefined list of layout names, you would use the ids of the KPIs you want the user to be able to select from.