How to change the color of the box for different region

by ddo@qsr.com.au » Fri Aug 19, 2016 12:54 am

Hi I need some help on the CSS script to change my org chart based on region. We have 4 different regions and we are using Office 365 Org Chart based on user profile and not sharepoint list. The field that we specify the region is Office (Office). I need to change the color of the box as follows:
If office contains "Asia Pacific, Head Office", then Blue
If Office contains "EMEA" then Green
If Office contains "America" then Grey
If Office contains "Japan" then White

Can someone help to provide the syntax for this and where should it be paste into?

Many thanks
Diana
ddo@qsr.com.au
 
Posts: 5
Joined: Fri Aug 19, 2016 12:47 am

by Evgeniy Kovalev » Fri Aug 19, 2016 12:52 pm

Hi Diana,
Thank you for your message.

You may use the OnBoxRender event on "Custom JavaScript" step of the configuration wizard.

For example, you could try this code snippet for your task:
Code: Select all
renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Office"].contains("Asia Pacific, Head Office"))
  {
    box.$elem.css({
      'background-color': 'blue',
      'border-color': 'blue'
    });
  }
  else if(itemData["Office"].contains("EMEA"))
  {
    box.$elem.css({
      'background-color': 'green',
      'border-color': 'green'
    });
  }
    else if(itemData["Office"].contains("America"))
  {
    box.$elem.css({
      'background-color': 'grey',
      'border-color': 'grey'
    });
  }
    else if(itemData["Office"].contains("Japan"))
  {
    box.$elem.css({
      'background-color': 'white',
      'border-color': 'white'
    });
  }
});

Best regards
Evgeniy Kovalev
Plumsail Team
User avatar
Evgeniy Kovalev
 
Posts: 55
Joined: Wed Jul 20, 2016 2:13 pm

by ddo@qsr.com.au » Mon Aug 22, 2016 3:09 am

Thanks so much for that as it works. Is there a way to add a legend to explain the color coding on the org chart?
ddo@qsr.com.au
 
Posts: 5
Joined: Fri Aug 19, 2016 12:47 am

by Evgeniy Kovalev » Mon Aug 22, 2016 9:09 am

Org Chart uses the standard CSS color codes.
You could look at this link:
http://www.w3schools.com/cssref/css_colors.asp
There is a table of color names that are supported by all browsers.

Best regards
Evgeniy Kovalev
Plumsail Team
User avatar
Evgeniy Kovalev
 
Posts: 55
Joined: Wed Jul 20, 2016 2:13 pm

by ddo@qsr.com.au » Mon Aug 22, 2016 11:31 pm

Sorry I meant that can I add a legend on the org page that explains green is our EMEA office, blue is our head office etc..Can I add a custom CSS script for that and if so, can you help to provide the codes?
ddo@qsr.com.au
 
Posts: 5
Joined: Fri Aug 19, 2016 12:47 am

by Evgeniy Kovalev » Wed Aug 24, 2016 4:50 pm

You could try to use this solution for your task:
Add this code snippet in "Custom JavaScript" step of the configuration master, after event handlers:
Code: Select all
$(".poch-main-container").append(
  "<table class='colorLegend'>"+
  "<tr><td><div class='colorBox' style='background-color: blue;'/></td><td width='5px'></td><td>Asia Pacific, Head Office</td></tr>"+
  "<tr><td><div class='colorBox' style='background-color: green;'/></td><td width='5px'></td><td>EMEA</td></tr>"+
  "<tr><td><div class='colorBox' style='background-color: gray;'/></td><td width='5px'></td><td>America</td></tr>"+
  "<tr><td><div class='colorBox' style='background-color: white;'/></td><td width='5px'></td><td>Japan</td></tr>"+
  "</table>"
);

And this snippet in "Custom CSS" step of the configuration master:
Code: Select all
.colorLegend {
  position: absolute;
  left: 20px;
  top: 40px;
}

table.colorLegend td {
  height: 17px;
  font-size: 10px;
}

.colorBox {
  width: 20px;
  height: 15px;
  border-color: black;
  border-width: 1px;
  border-style: solid;
}

Best regards
Evgeniy Kovalev
Plumsail Team
User avatar
Evgeniy Kovalev
 
Posts: 55
Joined: Wed Jul 20, 2016 2:13 pm

by ddo@qsr.com.au » Wed Aug 24, 2016 11:04 pm

Thank you so much for this. It worked!
ddo@qsr.com.au
 
Posts: 5
Joined: Fri Aug 19, 2016 12:47 am


Return to Org Chart for Office 365