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