Best practices for Portal Page Developers

Do Portal Pages inherit CSS from the rest of the application?

If setting "Catalog Layout" is set to "yes", a Portal page inherits all styles from the application, including its theme (if applicable). 

To use custom CSS classes, we recommend adding a prefix cp_ (custom page) in front of new class names. iframes can be used to prevent CSS overlaps from happening.

What are the JavaScript libraries that I can use?

  • If "Catalog Layout" is set to "no", you may use any JavaScript library.
  • If "Catalog Layout" is set to "yes", all JavaScript libraries available in Metric Insights can be used with a few exceptions:
    1. jQuery must be used in no-conflict mode
    2. Highcharts v5.0.4 and Underscore.js version 1.8.3 are available globally
    3. Ext.js is not allowed

How can I store data in JavaScript?

As of Metric Insights 6.1.0, Portal Page developers can utilize the following methods:

  1. storeData() will it store states in JSON format
  2. getData() will display data about state that was previously saved

All state-related data saved in the portal_page_data table within dashboard_db

States can be global or localized to a specific user via a per_user_ind Y/N boolean. The default is set to global (N)

How should I manage my assets?

Assets like JavaScript libraries, CSS and images should all be directly uploaded via the Assets tab (Admin > Portal Pages > Assets) and directly linked from either the Portal Page, Template, or Layout.

Note: You are not able to reference externally hosted libraries. They must be hosted within the MI system itself. We enforce this to meet common security requirements in the enterprise.

If I use a custom theme, how do I apply those colors/styling to my portal page?

  • If "Catalog Layout" is set to "yes", the theme will be applied automatically.
  • If "Catalog Layout" is set to "no", the developer should explicitly include theme CSS in their layout.