Skip to main content

This post is a continuation of the first post found at the following link.

Information found at that link is still valid but there is a new twist in the plot and so I decided to start a new thread to cover that scenario.

Highlights From First Episode

Managers have a team and they have an option to give team members the boot both individually, and when multiple folks are selected, en masse. We removed those options with CSS. HR is happy.

Second Episode Teaser

As the manager - you find out that your boss, can still give your team members the boot even though you cannot. You inform HR and the tension in the room becomes palpable.

Discussion

Information at the link above works fine when your organizational structure is only one manager deep. This is due to the fact that Direct Managers have a few more options with their teams than the Functional Manager one level up does. This results in the “Remove From Team” option appearing at different positions in the pop-up menu.

Two Level Management Structure

Below you can see the view from the Functional Manager perspective. Deanna Tester is a part of the Functional Manager’s team and Paul Tester is a part of Deanna Tester’s team. You’ll see that in the lower left, the Functional Manager has the ability to drill down into Deanna Tester’s team.

As the Functional Manager looking at my direct team - notice I have five options, but when I drill down another level, I lose the ability to enroll those folks. As a result, we see “Remove from Team” at the fourth position in the list for direct team members but at the second position in the list for the additional subdivision.

The Problem

In the first episode, we removed the option to “Remove from Team” from the list with some CSS code.

.team-member-card__actions div.ui-button-dropdown-menu.ui-shadow-md ui-button-dropdown-option:nth-child(4){
display: none;
}

Notice part of the code reads  nth-child(4) . That is where we address that fourth item in the list.

However - there is no fourth item in the menu for the team member two levels down.

The CSS is essentially the same for these two menus and so I can effectively remove the “Remove from Team” option from that list as well by simply re-using the same code and changing the 4 to a 2 like so…  nth-child(2) .

Unfortunately, this will affect the list of the direct team as well and remove the ability for the direct manager to enroll their team members to courses. If that is not a problem for you - we’re done here.

But if that is a problem - how do we get that ability back and still hide the option to remove team members for the Functional Manager?

Troubleshooting

Digging into this at first, I ultimately wanted a way to address the two menus separately and call it good but that was not in the cards - at least not that I was able to determine.

So I had to try something a little less than ideal.

I noticed that the menu items each had an ID - which means I should be able to address only that element by using it.

So after hiding nth-child(2) - I went back in to CSS for the Direct Manager and chose to show that specific element 

#ui-button-dropdown-8-1 {

display: block;

}

which should then reveal the “Enroll to Courses” option for the Direct Manager while keeping the “Remove from Team” option still hidden on the team member even though they are both in the second position.

It didn’t work.

Go back and inspect.

What!!?

The ID of the same element had changed…

Further examination revealed that all of those menu options had IDs that incremented every time I drilled down to the team and back to the direct manager.

How was I supposed to nail that down?#!@%?

I didn’t

I ended up refreshing the screen and looked again at my Direct Manager level card.

The count seemed to start over and this represented my baseline for this card.

Resolution

So I finally ended up with something that works but is truly not very elegant and it will require some additional research for each of you who needs to implement this and the amount of work will depend on the size of your organization and the number of direct managers you have under another functional manager.

So two main things here and why this is not ideal. It will become tedious at best.

  1. You will need to dig into the code with the browser console to find the direct manager’s card ID for the Enroll to Course option. It will need to be done for EVERY direct manager you have. Simply copy the code for restoring that below and paste it - then change the ID
  2. Because the ID changes - make sure you have the baseline for each direct manager and then be sure to train your direct managers to remember to refresh the browser if that option does not appear in their list.

So here it is.

/** Hide the Remove from Team option from cards **/

/** This option hides the Remove from Team option from Functional Manager view **/
/** This also hides the Enroll to Courses option from the Direct Manager view **/
.team-member-card__actions div.ui-button-dropdown-menu.ui-shadow-md ui-button-dropdown-option:nth-child(2){
display: none;
}

/** This option hides the Remove from Team option from Direct Manager view **/
.team-member-card__actions div.ui-button-dropdown-menu.ui-shadow-md ui-button-dropdown-option:nth-child(4){
display: none;
}

/** This hides the Remove from Team option from pop up menu **/
/** Pop-up menu is only available when multiple team members are selected. **/
a.action-can_remove_relation {
display: none !important;
}

/** This restores the Enroll to Courses option for the Direct Manager **/
/** You will need to inspect the Code to find each Direct Manager card number **/
/** This must come after the code to hide found above **/
#ui-button-dropdown-2-1 {
display: block;
}

Final Plea

Here is the idea for all to vote on.

My solution, while functional, is not ideal. It will require maintenance.

@Marco.T - Perhaps this will serve as some more useful feedback and support for the idea linked above.

 

At any rate - please let me know if there are any questions about the option.

will be trying it for sure. Thanks again!


I like this for no other reason than the idea had been closed as exists in platform! Clearly this is not :)


Yeah - I would echo that a CSS workaround is not the same as “Exists in Platform”.


@gstager - good aftenroon. I ran into what you suggested in this post - that the DM (direct manager) and drilling +1 into subordinates subordinate being able to remove from the team. Most of our hierarchies at our gig are deep so I am kind of stuck because I do want leadership to be able to reach down and get people into courses and avoid problems with removing teams - so I am just going to bring it back and call it quits to avoid confusion.

Our integration that runs overnight constantly maps people - we will have to live with that as a solution to a person mistakenly removing a sub….unless it is an emergency. We can then support the map by hand.

Thank you though for this write up and confirming this.

@Marco.T - please work with us and add an option to remove the remove from team option..Greg found cracks and this is going to impact us on my side.


Thanks so much for continuing this thread. I have sent the link to this page to my Docebo tech rep. Clearly this needs to be an In Platform function.


Hey @gstager! I was working on this recently and came across your post as part of my research. I think I may have some CSS that might be helpful in removing the “Remove from team” option in the sub-pages of the My Team page:

/* Hide the "remove from team" option in My Team on team member sub-pages */

doc-layout:has(ahhref="/manage/my-team;isTeamMemberPage=true"]) mng-team-member-card ui-button-dropdown-option:nth-child(2)

{

display: none;

}

It works by targeting the URL of the “My Team” link in the breadcrumb bar which happens to be different from the initial page but static across the sub-pages for My Teams. You may need to change the value in the parentheses of the :nth-child(2) psuedo-class depending on where the “Remove from team” option appears in the menu based on the options you have configured in advanced setting for teams and managers for your platform.

Hope this helps making manage this a little easier!


Thanks, @mj_ 

I have made use of the new :has selector a couple of times but not sure I have visited this topic since that became available.

Could certainly help make this easier.

That said - I will hold to my statement that a CSS workaround is not the same as “Exists in Platform”.

Hopefully - more GUI native options to improve this are on the horizon.


Reply