How to Change the background color of box based on Subordinate Count

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:

Thank you @Evgeniy , much appreciated . However its not working . Any ideas?

You should use only one "onBoxRendered" event:

Also, it may conflict with other styles:

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.

Hi @Evgeniy , please never-mind, I kind a figured it out: , Thanks again!

1 Like

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.