Building a shared dashboard directory/browser

Gists
1

Sharing some info on a recent customer request…

“We want a single shared dashboard URL that lets people find all the other shared dashboards in our organisation”

In our Dashboard Server product, we have this functionality via a configurable navigation bar, but it hasn’t made its way to Cloud yet.

But, it’s pretty simple to create a dashboard that can do the job.

Note this uses our API so requires an Enterprise license

image
image3840×1698 306 KB

Each of those blocks represents a shared dashboard. They’re green if the link is active, or grey if they’ve been paused. The label has been decorated with a little padlock icon to denote shared dashboards that require authentication. Clicking a block opens that dashboard in a new tab.

Pretty neat :tada:

So here’s how to build it.

  1. Go into Settings > Advanced > API and create a new API key.
    a. copy to clipboard

  2. In a workspace of your choice, create a new Web API data source.
    a. Name: SquaredUp API (or similar)
    b. Base URL (US): https://api.squaredup.com/api
    b. Base URL (EU: https://eu.api.squaredup.com/api
    c. Headers: apiKey: <key-from-step-1>

  3. Create a new dashboard and open the tile editor

  4. Select your new WebAPI data source, then the HTTP Request data stream.

  5. On the Parameters panel…
    a. Set the endpoint to /openaccess/shares
    b. Tick Expand Inner Objects

  6. The request will return some data that looks like…

    image
    image3042×420 119 KB

  7. Now that we’ve got all the data we need, enable SQL Analytics

  8. Grab the SQL snippet

SELECT
    CASE
        WHEN [properties.requireAuthentication] = true
        THEN CONCAT([dashboardName], " 🔐")
        ELSE [dashboardName]
    END AS [label],
    [workspaceName] AS [sublabel],
    CASE
        WHEN [properties.enabled] = true
        THEN "success"
        ELSE "unknown"
    END AS [state],
    CONCAT("http://app.squaredup.com/openaccess/",SUBSTRING([id],9)) AS [link]
FROM dataset1
--- the following line can be used to filter out dashboards by workspace
--- or just remove it if you don't need to filter anything
WHERE [workspaceName] NOT IN ("Workspace 1", "Workspace 2")

  1. Click Execute, then select the Blocks visualisation.
    a. You might need to manually select the Sub-label field.

  2. That’s it, you’ve now got a page of clickable blocks that represent all your shared dashboards. The only thing left to do is to share this dashboard and give the URL to your users.

One thing to note, is that you’ve just created a new shared dashboard, so it too will appear as a block in your dashboard browser. You might want to tweak the last line of the SQL snippet to filter this out of the view.