UI Blueprint [4.5] - Forum - Rollbase - Progress Community

UI Blueprint [4.5]

 Forum

UI Blueprint [4.5]

This question is answered

Hi All,

I'm wondering if there is a way to see what the current UI blueprint option is being used from the client side? This is so I can use JavaScript to make the page look differently based on the UI blueprint.

Regards,

Simon Tregloan-Reed

Verified Answer
  • You can use client-side SDK:
     
    var pageContext = rbf_getPageContext();
    var currTemplate = pageContext && pageContext.getCurrentUITemplate();
    return currTemplate && currTemplate.getType();
     
    Regards,
    Siraj.
     
    Regards,
    Siraj.
All Replies
  • You can use client-side SDK:
     
    var pageContext = rbf_getPageContext();
    var currTemplate = pageContext && pageContext.getCurrentUITemplate();
    return currTemplate && currTemplate.getType();
     
    Regards,
    Siraj.
     
    Regards,
    Siraj.
  • Hi Siraj,

    Sorry for the late reply, I got your response but wasn't able to send a reply because I couldn't see the topic I posted. It would show as a blank white page but thanks for the reply. I'll give it a shot and see what I get.

    Regards,

    Simon Tregloan-Reed

  • Simon,

    I understand you may want to use JavaScript in some cases but in most of the times you should be able to tailor the UI using CSS and have specific rule for each blueprint.

    We have 3 CSS root level rules we add to the body element based on which blueprint the UI is running.  The CSS rules are:

    • rbs-ui-template-type-default (Traditional)
    • rbs-ui-template-type-2 (Modern Vertical BP)
    • rbs-ui-template-type-custom

    So far example, this will make the object view title red for Modern Vertical BP and green for traditional

    .rbs-ui-template-type-2 .rbs-objectViewTitle {  color: red; }
    .rbs-ui-template-type-2 .rbs-objectViewTitle {  color: green; }

    It is the same technique we have implemented for differentiating between desktop vs mobile and smartphone. See
    http://documentation.progress.com/output/rb/doc/#page/rb%2Fcustom-css.html for details.

    Thierry.
  • FYI:

    We will improve the documentation in V5.0 to include these CSS rules

    We are tracking it as item 76547