I would like to change the Background color of a box if the employee's direct subordinate is more than '0' (PochSubordinateCount > 0) , basically we are trying to identify the employees who is manager (who has direct reports).
Thanks in advance.
Hello Moses! Please use the custom code and styles as per below.
JavaScript:
renderer.onBoxRendered(function (event, box, itemData) {
//Box rendered event
renderer.dataProvider.getBoxGroupItemDataById(itemData["ID"], function (dataItem) {
let subordinates = dataItem.DirectReportIds;
if (subordinates.length > 0) {
box.$elem.addClass("manager");
}
});
});
CSS:
.manager {
background-color: green !important;
}
Result:
Thanks again,, @Evgeniy , I did following things now,
I created a Brand new OrgChart and just added the JS and CSS you provided and yet same result. is there is any configuration I need to check?
There are all in the field names in the Custom JavaScript section:
AboutMe (About me)
AccountName (Account name)
ADGuid (Active Directory Id)
SPS-Responsibility (Ask Me About)
Assistant (Assistant)
SPS-Birthday (Birthday)
SPS-ClaimProviderID (Claim Provider Identifier)
SPS-ClaimProviderType (Claim Provider Type)
SPS-ClaimID (Claim User Identifier)
SPS-DataSource (Data source)
DelveFlags (DelveFlags)
Department (Department)
SPS-DisplayOrder (Display Order)
SPS-DistinguishedName (Distinguished Name)
SPS-DontSuggestList (Don’t Suggest List)
SPS-Dotted-line (Dotted-line Manager)
SPS-EmailOptin (Email Notifications)
Fax (Fax)
FirstName (First name)
SPS-HireDate (Hire date)
HomePhone (Home phone)
UserProfile_GUID (Id)
SPS-Interests (Interests)
SPS-JobTitle (Job Title)
SPS-LastColleagueAdded (Last Colleague Added)
SPS-LastKeywordAdded (Last Keyword Added)
LastName (Last name)
Manager (Manager)
SPS-MasterAccountName (Master Account Name)
SPS-MemberOf (MemberOf)
CellPhone (Mobile phone)
msOnline-ObjectId (msOnline-ObjectId)
SPS-MySiteUpgrade (My Site Upgrade)
PreferredName (Name)
SPS-ObjectExists (Object Exists)
Office (Office)
SPS-Location (Office Location)
OfficeGraphEnabled (OfficeGraphEnabled)
SPS-OWAUrl (Outlook Web Access URL)
SPS-PastProjects (Past projects)
SPS-Peers (Peers)
PersonalSpace (Personal site)
PersonalURL (Personal URL)
SPS-PhoneticDisplayName (Phonetic Display Name)
SPS-PhoneticFirstName (Phonetic First Name)
SPS-PhoneticLastName (Phonetic Last Name)
PictureURL (Picture)
PreferredDataLocation (PreferredDataLocation)
SPS-ProxyAddresses (Proxy addresses)
PublicSiteRedirect (Public site redirect)
PulseMRUPeople (PulseMRUPeople)
QuickLinks (Quick links)
SPS-ResourceAccountName (Resource Forest Account Name)
SPS-ResourceSID (Resource Forest SID)
SPS-SavedAccountName (Saved Account Name)
SPS-SavedSID (Saved SID)
SPS-School (Schools)
SID (SID)
SPS-SipAddress (SIP Address)
SPS-Skills (Skills)
SPS-SourceObjectDN (Source Object Distinguished Name)
SPS-AdjustHijriDays (SPS-AdjustHijriDays)
SPS-AltCalendarType (SPS-AltCalendarType)
SPS-CalendarType (SPS-CalendarType)
SPS-ContentLanguages (SPS-ContentLanguages)
SPS-Department (SPS-Department)
SPS-FeedIdentifier (SPS-FeedIdentifier)
SPS-FirstDayOfWeek (SPS-FirstDayOfWeek)
SPS-FirstWeekOfYear (SPS-FirstWeekOfYear)
SPS-HashTags (SPS-HashTags)
SPS-HideFromAddressLists (SPS-HideFromAddressLists)
SPS-Locale (SPS-Locale)
SPS-MUILanguages (SPS-MUILanguages)
SPS-MultiGeoFlags (SPS-MultiGeoFlags)
SPS-O15FirstRunExperience (SPS-O15FirstRunExperience)
SPS-PersonalSiteCapabilities (SPS-PersonalSiteCapabilities)
SPS-PersonalSiteFirstCreationError (SPS-PersonalSiteFirstCreationError)
SPS-PersonalSiteFirstCreationTime (SPS-PersonalSiteFirstCreationTime)
SPS-PersonalSiteInstantiationState (SPS-PersonalSiteInstantiationState)
SPS-PersonalSiteLastCreationTime (SPS-PersonalSiteLastCreationTime)
SPS-PersonalSiteNumberOfRetries (SPS-PersonalSiteNumberOfRetries)
SPS-PictureExchangeSyncState (SPS-PictureExchangeSyncState)
SPS-PicturePlaceholderState (SPS-PicturePlaceholderState)
SPS-PictureTimestamp (SPS-PictureTimestamp)
SPS-PointPublishingUrl (SPS-PointPublishingUrl)
SPS-PrivacyActivity (SPS-PrivacyActivity)
SPS-PrivacyPeople (SPS-PrivacyPeople)
SPS-RecipientTypeDetails (SPS-RecipientTypeDetails)
SPS-RefreshToken (SPS-RefreshToken)
SPS-RegionalSettings-FollowWeb (SPS-RegionalSettings-FollowWeb)
SPS-RegionalSettings-Initialized (SPS-RegionalSettings-Initialized)
SPS-SharePointHomeExperienceState (SPS-SharePointHomeExperienceState)
SPS-ShowWeeks (SPS-ShowWeeks)
SPS-TenantInstanceId (SPS-TenantInstanceId)
SPS-Time24 (SPS-Time24)
SPS-UserPrincipalName (SPS-UserPrincipalName)
SPS-UserType (SPS-UserType)
SPS-WorkDayEndHour (SPS-WorkDayEndHour)
SPS-WorkDays (SPS-WorkDays)
SPS-WorkDayStartHour (SPS-WorkDayStartHour)
SPS-StatusNotes (Status Message)
SPS-TimeZone (Time Zone)
Title (Title)
UserName (User name)
WebSite (Web site)
WorkEmail (Work e-mail)
WorkPhone (Work phone)
I am sorry, I did not specify that the sample was prepared for the list data source. Please try the code below if you use the user profiles as the latter.
renderer.onBoxRendered(function (event, box, itemData) {
//Box rendered event
renderer.dataProvider.getBoxGroupItemDataById(itemData["AccountName"], function (dataItem) {
let subordinates = dataItem.DirectReportIds;
if (subordinates.length > 0) {
box.$elem.addClass("manager");
}
});
});
1 Like
Perfect @Evgeniy , it worked. Thanks
One final question: Would it possible to replace the green color with some other color ONLY for both Rootnode level 1 (CEO) and his/her direct reports . However we would like to keep the green for all the managers with direct reports aka subordinates. Your help is simply outstanding.
Moses, thanks for the update and sharing!
Just one note: I would advise you not to repeat the "onBoxRendered" event several times but rather put all the conditions into one event.