Vacant spaces & targeting them for styling

Org Chart SharePoint 2013/2016 version
1

Is it possible for a chart that is using User Profile Service data to display vacant positions in a hierarchy? Long shot, I know. I feel it may be easier to do when using a list as the data source. Is there functionality for this when using UPSS?

In the case that there is, is there also a way to then target that particular box for custom CSS/JavaScript styling? Additionally how do I target ‘Assistant’ boxes for styling?

I believe the first example in “Events” should help me with this http://plumsail.com/sharepoint-orgchart/docs/javascript-framework/.

//Changes background of boxes for all employees //from marketing department renderer.boxRendered(function(event, box, itemData){ if(itemData["Department"].contains('Marketing')){ box.$elem.css({ 'background-color': 'red', 'border-color': 'red' }); } });

Having trouble with this line:

  if(itemData["Assistant"].contains('')){

Thanks for the assistance.

Regards,
Saav.

2

Hi Saavan,

Thank you for your question. Currently Org Chart doesn’t support vacant positions for User Profiles data source. You are right, you can easily achieve this with SharePoint list as a data source. If you need this functionality for user profiles you can send request for paid support to support@plumsail.com and we will provide estimation. It can be separate list with vacancies mapped to structure from user profiles.

Regarding styling assistants with JS\CSS.

It is easy to do with CSS. There is CSS class “poch-assistant”. You can use it to apply styling to assistant box only. Please find the example below:

.poch-assistant .pl-item-template { background-color: red; }

You also can detect if current box is assistant in HTML template of the box and add custom markup for assistant only. In the example below I added new CSS class to fields DIV. Pay attention to:

{{#if ../IsAssistant}}assistant-fields{{/if}}

Complete example is below:

[code]


{{#if PhotoUrl}}
{{#detailsTooltipLink}}
{{safeImage PhotoUrl}}
{{/detailsTooltipLink}}
{{/if}}
{{#detailsTooltipLink}} {{Title}} {{/detailsTooltipLink}}
{{JobTitle}}
{{Department}}
[/code]

You can put any markup inside {{#if …/IsAssistant}} {{/if}} and it will appear inside assistant box only.

Find more information about templating in the documentation.

There is no direct way to detect if current box is an assistant from JavaScript event, but you can check if there is parent tag with class “poch-assistant” as workaround. The example is below:

[code]renderer.onBoxRendered(function(event, box, itemData){

var isAssistant = box.$elemContainer.parent(".poch-assistant").length > 0;
if(isAssistant){
box.$elem.css({
‘background-color’: ‘red’,
‘border-color’: ‘red’
});
}

});[/code]

3

Hi Anton,

Thanks for the update.

It seems I wasn’t able to get the CSS working to change the colour of the boxes. Instead I wrote this work around before I read your reply.

//Script for dynamically loading person based on 'accountName', leaving the breadcrumb and drilldown intact.
var isFirstLoad = true;
var accountName = "000\\AAAAAA";

renderer.onLoadingFinished(function(){
  if(isFirstLoad){
    isFirstLoad = false;
     renderer.drillDown(accountName);
  }  
});
//On render, apply a custom colour to all boxes and their borders.
renderer.onBoxRendered(function(event, box, itemData){
    box.$elem.css({
      'background-color': '#006652',
      'border-color': '#006652'
    });
});
//On render for those boxes that have a value in 'Assistant', change their styling.
renderer.onBoxRendered(function(event, box, itemData){
  if(itemData["Assistant"]){
    box.$elem.css({
      'background-color': '#00ad93',
      'border-color': '#00ad93'
    });
  }
});
renderer.onSearchResultRendered(function(event, searchResult, itemData){
  //Search result rendered event
    if(itemData["Assistant"]){
    searchResult.$elem.css({
      'background-color': '#00ad93',
      'border-color': '#00ad93'
    });
  }
});

I shall try using your examples to further customise. Thanks again for the help.

Regards,
Saav.

4

Hi Saav,

Thank you for sharing your results. Do you have any additional questions about applying CSS?