Plugging in External CSS Files

Working with shared CSS styles by plugging external CSS files to a dashboard is the recommended method to handle big applications that don’t use a Dashboard Template to contain the UI.

The main differences between this approach and writing custom styles directly to properties of dashboard components are that it:

  • Requires using a CSS editing tool outside of Iotellect

  • Requires using more specific selectors to compose the CSS rules targeting the components’ elements

  • Requires keeping in mind browser’s caching settings when delivering CSS updates to users.

Note that some features available in CSS Editor can’t be used if plugging an external CSS file. Since it is just native CSS, you have to use selectors for all style rules and can’t use SCSS syntax in the file. Also, it isn’t optimized or validated automatically on the dashboard render.

The are three ways to source an external CSS file to a dashboard:

  • Linking CSS files directly from the web resource they’re shared from

  • Storing CSS files locally in the Iotellect Server filesystem in a location shared on the web by the embedded web server and linking the files using their web URLs

  • Adding them to the Media/Content Library and linking as the plugin entry.

We recommend using the Media Library for storing custom CSS in order to have full control over the linked files.

Adding CSS files to the Media Library

Custom CSS files are added to the Media Library in the same way as any other asset. Follow the instructions in the Using Media Library article to upload a custom CSS file.

Use the text/css MIME type in the Content Type of the created Media Library entry.

Adding Custom CSS Files to a Dashboard

To use a custom CSS file uploaded to the Media Library in a dashboard, add it as an additional header part of the dashboard’s <head> using the address based on the file's location in the File List table:

  1. Locate the dashboard context under Dashboards in the System Tree of your Iotellect product’s UI. You can use the search input in the tree’s toolbar to make it easier.

  2. Open the dashboard configuration by right-clicking on the dashboard and selecting the ( ) Configure option.

  1. In the configuration dialog, switch to the <HEAD> Content tab.

  2. When in the <HEAD> Content tab, add a new element by clicking the () Add Row button.

  3. In the created table row, leave the Type field with the Tag value and change the value of the Tag Name to link. Leave the Content Expression field intact.

  4. Now, move to the Tag Attributes field and drill-down into the nested table by clicking the () button next to the [ No records ] line.

  1. In the Tag Attributes table, add a new row the same way as you did in the <HEAD> Content table earlier.

  2. In the created row, add href value to the Name field.

  3. In the Value Expression field, add the expression that will return a string value with the link to the uploaded file:

'/content/file/css/custom_css.css'

  1. Add one more row In the Tag Attributes table.

  2. In the created row, add rel value to the Name field.

  3. In the Value Expression field, add the expression that will return a string value with the type of the added content:

'stylesheet'

  1. Apply changes by closing the configuration dialog with the OK button at the bottom. Now, the new <head> entry is added.

  1. Open the dashboard from the System Tree of your Iotellect product’s UI by clicking on it with the cursor or from its context menu by right-clicking on the dashboard and selecting the ( ) Open Dashboard action.

  1. The custom CSS file is visible in the document’s <head> section and the styles from it should be applied to the dashboard components:

<link data-custom-head-tag="true" href="/content/file/css/custom_css.css" rel="stylesheet">

CSS files that are plugged via the dashboard’s <head> section do not go through the validation and optimization process on a dashboard render, as CSS from the component custom style properties do.

Be careful with what you plug in not only from the perspective of code validity, but also from the security point.

Was this page helpful?