Vacant spaces & targeting them for styling

by Saavan » Wed Apr 29, 2015 11:42 am

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/.

Code: Select all
//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:

Code: Select all
  if(itemData["Assistant"].contains('')){



Thanks for the assistance.

Regards,
Saav.
Saavan
 
Posts: 6
Joined: Wed Apr 29, 2015 8:24 am

by Anton Khritonenkov » Thu Apr 30, 2015 11:07 am

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:

Code: Select all
.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:

Code: Select all
{{#if ../IsAssistant}}assistant-fields{{/if}}


Complete example is below:

Code: Select all
<div class="pl-item-photo">
  {{#if PhotoUrl}}
    {{#detailsTooltipLink}}
      {{safeImage PhotoUrl}}
    {{/detailsTooltipLink}}
  {{/if}}
</div>
<div class="pl-item-fields {{#if ../IsAssistant}}assistant-fields{{/if}}">
  <div class="field-container header-field">
    {{#detailsTooltipLink}}
      {{Title}}
    {{/detailsTooltipLink}}
  </div>
  <div class="field-container ">
    {{JobTitle}}
  </div>
  <div class="field-container ">
    {{Department}}
  </div>
</div>


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: Select all
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'
    });
  }
 
});
User avatar
Anton Khritonenkov
 
Posts: 212
Joined: Wed Nov 12, 2014 1:33 pm

by Saavan » Fri May 08, 2015 3:15 pm

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.

Code: Select all
//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);
  } 
});


Code: Select all
//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'
    });
});


Code: Select all
//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'
    });
  }
});


Code: Select all
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.
Saavan
 
Posts: 6
Joined: Wed Apr 29, 2015 8:24 am

by Anton Khritonenkov » Fri May 08, 2015 3:34 pm

Hi Saav,

Thank you for sharing your results. Do you have any additional questions about applying CSS?
User avatar
Anton Khritonenkov
 
Posts: 212
Joined: Wed Nov 12, 2014 1:33 pm


Return to Org Chart for SharePoint 2013