Hitachi Vantara Pentaho Community Forums
Results 1 to 8 of 8

Thread: change the css dynamically

  1. #1
    Join Date
    May 2016
    Posts
    16

    Default change the css dynamically

    Hi all!
    I have a small question about the CSS. I need to change the resource (CSS) depending on the role or user, any idea?. I'm read the doc and some link:

    Thanks

  2. #2
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    a script that reads user and role from Dashboards.context and injects the appropriate css into the html body would be my first approach.

    probably not the best security-wise approach for general usage but it might hold for your needs.
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  3. #3
    Join Date
    May 2016
    Posts
    16

    Default

    Hi Pedro,
    Completely agree with you. But i need to change the CSS in dashboard and Pentaho themed (bi-server) depends to the Role user , in this case each role is a brand. Any idea?.
    I'm read the documentation in https://help.pentaho.com/ but i don't find anything.
    Thanks alot

  4. #4
    Join Date
    Jan 2014
    Posts
    189

    Default

    That question is not small at all. You want role/user dependent CSS, so you have two options:

    Option 1) load the CSS dynamically using a call to require pointing to the correct file, via a javascript snippet:
    Code:
    var user = dashboard.context.user;
    var cssFiles = {
      "default": "default.css",
      "alice": "alice.css",
      "bob": "bob.css"
    };
    
    var cssFileToLoad = cssFiles[user] || cssFiles["default"];
    
    require(['css!./' + cssFiletoLoad], function(){});
    Option 2) Inject some css class in the 'body' element and create specific css:
    Add the javascript snippet:
    Code:
    var user = dashboard.context.user;
    var cssClasses = {
      "alice": "user-alice",
      "bob": "user-bob"
    };
    
    $('body').addClass(cssClasses[user]);
    and any CSS overrides:
    Code:
    .user-alice table {
      background: pink;
    }
    
    .user-bob table {
      background: blue;
    }
    I would go for Option 2.
    Last edited by crusso; 06-28-2017 at 10:25 AM.

  5. #5
    Join Date
    Feb 2017
    Posts
    20

    Default

    complement of Crusso's reply:
    Code:
    var user = dashboard.context.user;
    var cssClasses = {
      "admin": "user-admin",
      "employee": "user-employee",
      "supervisor": "user-supervisor"
    };
    
    $('body').addClass(cssClasses[user]);
    same code (using the second example) but working with roles
    Last edited by hugonr; 06-28-2017 at 11:03 AM. Reason: correct code

  6. #6
    Join Date
    May 2016
    Posts
    16

    Default

    Hi, all!
    Thanks for the answer. Completely agree with all, this a temporal workaround but I need to change the Pentaho theme depending on the role or user. I remember in a PCM @palves showed this possibility but I don't find any information about that. any idea or documentation?.
    Thanks

  7. #7
    Join Date
    Jan 2014
    Posts
    189

    Default

    You could try to look for it in the online documentation . Searching for "theme" lead me to

    https://help.pentaho.com/Documentation/7.1/0R0/090/010

    more concretely:

    "It is also possible to set the session variable pentaho-user-theme to the desired theme name, which is usually done in a start-up action to have per-user themes in multi-tenancy scenarios."

  8. #8
    Join Date
    May 2016
    Posts
    16

    Default

    Thanks.
    I read the documentation, but I should not have read it in more detail. sorry for the inconvenit

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.