Skip to Content

Issue

Design Studio only allows a single custom CSS file.

Challenge

Allow a Design Studio application to use multiple CSS files.

Example Scenario: We would like to be able to combine an enterprise template CSS with an application specific CSS.

Solution

Use @import to import style rules from other style sheets.

Note: @import is generally discouraged in typical web development due to the sequential nature in which it loads as opposed to <link rel=”…> which downloads style sheets in parallel. Unfortunately, we do not have access to embed raw HTML hence the need for @import.

Approach #1 – Relative (Local & BI Launch Pad)

Path of least resistance 🙂 . The benefit of this approach is that it will work both when running your application locally (i.e. localhost) and via BI Launch Pad.

Step 1

Setup your application specific CSS to use @import. In the example below we are referring to our template CSS via a relative path.

/wp-content/uploads/2015/01/css01_632843.png

Step 2

Ensure both CSS files are in the same folder within BI Launch Pad (e.g. Public Folders\Design Studio Template (mimes)).

/wp-content/uploads/2015/01/css02_632844.png

Approach #2 – Absolute (Local Only)

If your additional CSS is located in a completely distinct location within BI Launch Pad, you can explicitly refer to it using the syntax below.

URL: /aad/zen/mimes/[Application_CUID]/Root Folder/Design Studio Template (mimes)/template.css 

/wp-content/uploads/2015/01/css03_632852.png

To discover this location:

  1. Run application locally
  2. Open Chrome Developer Tools (CTRL + Shift + I)
  3. Navigate to your custom CSS via the Resources pane and “Open link in new tab”
  4. URL location will be visible in the address bar

/wp-content/uploads/2015/01/css04_632853.png

Note: While this method works when running the application locally, the application fails to locate the CSS when executed from BI Launch Pad.

Approach #3 – Absolute (BI Launch Pad Only)

The following URL syntax allows us to explicitly refer to a CSS location that will work when the application is launched within BI Launch Pad.

URL: /BOE/portal/1501220001/zenwebclient/zen/mimes/[Application SI_ID]/Root Folder/Design Studio Template (mimes)/template.css

/wp-content/uploads/2015/01/css05_632854.png

Similarly, Chrome Developer Tools was used to discover the location (albeit a different resource path).

/wp-content/uploads/2015/01/css06_632861.png

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

    1. Taygan Rifat Post author

      Hey Mustafa,

      Thanks for link. Very eager to spend some time understanding the SDK better. Still got my enterprise hat on as it is early days 🙂

      Cheers,

      Taygan

      (0) 

Leave a Reply