How to Add Images & Logos to a Dashboard!

Have you ever felt like the one thing missing to really bring a dashboard together is an image or company logo? Well wonder no more, here are three ways to do just that in Omni!

Method 1 - Simple Static Image

This method is incredibly easy! Simply add a markdown tile to a dashboard, then replace the text with the following line:

<img src="https://upload.wikimedia.org/wikipedia/commons/d/d4/Hogwarts-Crest.png" alt="Omni Logo" width="400">

Where the image url needs to be a publicly available file. This can be a great way to add a logo to a company dashboard. One quick aesthetic recommendation, try removing the background of the tile to make the image blend into your dashboard theme (as long as the image has a transparent background)!

Method 2 - Dynamic Image on Filter Selection

For a slightly more dynamic setup you could have the image respond to user input, such as a filter selection. Here I’ve created a tile that switches the Hogwarts house crest based on the selected student.

Method 2 - Dynamic Filtering

This is pretty straightforward to set up as well. First, you’ll need to have the images you want to call stored in a table somewhere. Ideally you have these already in your database, but if not you can easily upload a CSV or create a blank table like I’ve done here.

If the images exist in a table already, you should be able to join them to other tables quite easily. In my case, I used Omni’s XLOOKUP functionality to have a new tab fetch the correct link based on the Hogwarts house I’m calling in my base table.

Then finally in this same query I visualized the results in a markdown chart, where the syntax is very similar to before but now replacing the static link with a reference to the first row in the query.
<img src="{{result._first.calc_1.value}}" width="150">

All that’s left to do is put this tile on a dashboard and add a filter on the student name (ideally a single value dropdown). Now by selecting a single student, we ensure that the top row in this query is the student whose house we want to see!

Method 3 - Dynamic Image on User Attribute

Now let’s say you want the image to be specific to the user accessing the dashboard. For example I can test what a member of Slytherin vs Gryffindor might see.

Method 3 - Dynamic User Attribute

For this we can leverage user attributes, in much the same way that we might partition which users can access specific data. First we’ll create a new user attribute in the Settings page. Then we’ll navigate to a user and set the user attribute value.

Then we will navigate to the model file and add an access filter in the topic file (can also do it at the model level with default access filters). You can interpret this as telling Omni: “when querying the name field from the table called houses, ensure the user can only see values that equal their hogwarts_house user attribute”.

Now we can build a simple query that has the field used by the user attribute and the image link - you’ll see that Omni dynamically adds a WHERE clause in the SQL query to filter based on the user attribute. Just like in Method 2 we’ve visualized this query with a markdown vis type.

And that’s it! Now try putting this tile on a dashboard, then navigate back to the user attribute and try changing the value - you should see the image change dynamically as you reopen the dashboard!