Table of Contents

Using Visual Overview to control dashboard feed components

In this tutorial, you will learn how to feed data into a dashboard URL in order to automate selections on feed components when the dashboard is opened. The data to be fed into the URL will be defined on an element's visual overview through the clever use of shape data.

Expected duration: 45 minutes

Note

The content of this tutorial has been created with DataMiner web apps version 10.4.1.

Prerequisites

Overview

Note

The data being interacted with in the example below originates from elements using the Skyline Generic Virtual Connector protocol. However, this process will work for elements using any protocol that features table-based parameters.

Step 1: Create a new Virtual Connector element and add numerical data to the 'Numerical Master Table' on the element's 'Table' data page

  1. Open DataMiner Cube.

  2. Create a new element using the Skyline Generic Virtual Connector protocol.

    1. Open the Surveyor.

    2. Right-click a view (e.g. the root view), and select New > Element.

    3. Enter an element name, select the DMA, the protocol (i.e. Skyline Generic Virtual Connector) and the protocol version (e.g. 1.0.0.3), and click Create.

  3. Go to the DATA > Table page of the newly created element, which contains the Numeric Master Table.

  4. Right-click below the table's column headers, and click Add to add a new row to the table.

    Add Row Numeric Table

  5. Enter the row's primary key [IDX], enter random numbers into the first three columns, and click OK.

    Important

    Do not use any special characters for the primary key, as they will interfere with the URL linking later in this tutorial.

    Table input

  6. Add at least one more row to the table.

    Table rows

Step 2: Create a new dashboard and add a 'Parameter feed' component and a 'State' component to display the numerical data from the Virtual Connector

  1. Open the Dashboards app.

  2. Create a new dashboard.

  3. If you are not yet in edit mode, then click Start editing.

  4. Add a Parameter picker component.

  5. From the Data pane on the right, drag the ELEMENTS header onto the Parameter feed component to be used as data.

  6. From the Data pane on the right, add the necessary parameters:

    1. Expand the PARAMETERS section.

    2. Set From to "Protocol".

    3. Set Protocol to "Skyline Generic Virtual Connector".

    4. Use the filter to find the three numeric table parameters that you entered numbers for.

    5. Drag each of these parameters onto the Parameter feed component to be used as data.

    Parameters

  7. From the Data pane on the right, add a protocol filter:

    1. Expand the PROTOCOLS section.

    2. Search for the Skyline Generic Virtual Connector.

    3. Drag the protocol onto the Parameter feed component to be used as a filter.

    Protocols

  8. Add a State component.

  9. Click the State component to select it.

  10. From the Data pane on the right, add the Parameters feed:

    1. Expand the FEEDS section to find the items associated with the parameter feed.

    2. Expand the Parameter feed component.

    3. Drag the Parameters item onto the State component to be used as data.

    Feeds

  11. In the Layout pane on the right, select the LABELS boxes to display the parameter name, the index, and the value.

    Labels

  12. Click Stop editing to exit edit mode.

    At this point, you should be able to make manual parameter feed selections to control which parameter values are shown on the State component.

    State component

  13. In the top-right corner of the screen, click the ellipsis button, and then click Share.

    Share button

  14. In the pop-up window, enable the Use uncompressed URL parameters option, and then click Copy link.

    Pop-up window

    The URL you copied will be used later in this tutorial.

  15. Close the pop-up window by clicking the "X" in the top-right corner.

Step 3: Create a new visual overview for the Generic Virtual Connector element with shapes for each numerical table index linking to the dashboard

  1. In DataMiner Cube, open the Generic Virtual Connector element you created earlier in this tutorial.

  2. Go to the VISUAL page of the element, and right-click anywhere to have the Visio file options displayed.

  3. Hover the mouse pointer over Set as active "..." element Visio file, and click New blank.

    New blank

  4. In the confirmation box, click Yes.

    A new Visio file associated with the element will now be created. It will look like a blank canvas on the VISUAL page of the element.

  5. If the new Visio file is not opened automatically, on the blank VISUAL page, right-click anywhere, and select Edit in Visio.

    This will open Microsoft Visio.

    Note

    When you make changes to the Visio file, they will immediately appear in DataMiner Cube as soon as you save the file.

  6. Add a large rectangle that represents a table row.

  7. Add a textbox with the text [tableIndex], and move it on top of the rectangle.

  8. Add a button to navigate to the Dashboards app:

    1. Add a small rectangle shape.

    2. Double-click the rectangle, and give it a useful description.

    3. Move the rectangle on top of the first rectangle representing a row.

  9. Ctrl-click all three components to select them all, then right-click, and select Group > Group.

    You should see the following under the Drawing Explorer:

    Drawing Explorer

    Note

    If the Drawing Explorer is not automatically displayed, follow these steps:

    1. Right-click the ribbon and select Customize the Ribbon.

    2. In the Main Tabs list on the right, make sure Developer is enabled.

    3. Click OK in the lower right corner.

    4. Access the Developer tab, and select the Drawing Explorer check box in the Show/Hide group.

      The Drawing Explorer window will become available in the corner of your drawing.

  10. Right-click the grouped sheet representing a row, select Shape Data, and add the following shape data:

    Shape data field Value
    ChildType Row
    ChildMargin 5
  11. Ctrl-click the grouped sheet representing the row and the existing background sheet that came with the new Visio file to select both, then right-click, and select Group > Group.

  12. Add the following shape data to the larger grouped sheet:

    Shape data field Value
    Children Row
    ChildrenSort Name
    ChildrenPanel Stack
    ChildrenSource [this element]/1200
    Note

    [this element] is a dynamic placeholder, and 1200 is the table parameter ID of the Numeric Master Table.

  13. Using a publicly available web-based encoded JSON URL converter, convert the URL you copied earlier to a human-readable format.

    This will make it easier to understand how feed selections are represented in the dashboard's URL.

    URL converter

  14. Replace sections of the URL with placeholders to allow dynamic entry based on the row index that is fed into it:

    http://<DMAIP>/dashboard/#/db/zStaging/Visio%20URL%20Feed.dmadb?data={"version":1,"feed":null,"components":[{"cid":2,"select":{"parameters":["[cardVar:_elementId]/1202/[tableIndex]","[cardVar:_elementId]/1203/[tableIndex]","[cardVar:_elementId]/1204/[tableIndex]"],"elements":["[cardVar:_elementId]"],"indices":["[tableIndex]/[displaytableIndex]"]}}],"feedAndSelect":{}}
    
    Note

    The first part of the URL (i.e. the part on the left of the question mark) needs to be changed to match the naming structure of your dashboard. The component ID (cid) also needs to be changed to match that of your parameter feed. You can find the ID of each component in the lower right corner of the component while in edit mode.

  15. Again use a web-based encoded JSON URL converter, this time to convert the URL back to encoded JSON.

  16. Add the following shape data to the button shape.

    Shape data field Value
    Enabled true
    Link The URL with encoded JSON
  17. Make sure nothing is selected in the Visio drawing, and add the following shape data to ThePage:

    Shape data field Value
    InitVar _elementId:[This ElementID]

    This is needed to initialize the card variable that is used in the URL.

  18. Save the Visio file.

For each table row that was added in step 1, a child shape should now be displayed on the visual overview of the Generic Virtual Connector element. Each shape will have its own button that, when clicked, will open the dashboard that was created in step 2. Depending on the button that was clicked, the URL will be fed with the appropriate table index information so that the parameter feed on the dashboard automatically selects the index associated with the button's row, and the State component will display the corresponding results.