Pin user in Visual Task Boards

I’m happy with my name.

I’m happy with Visual Task Boards.

But they don’t get on with one another.

My user is usually buried in the list of VTB members and it requires 2 clicks each time I want to filter my tasks.

I want to pin my user at the top of VTBs, always in the same position, so I don’t waste a single second looking for it!

Changing my legal name to AAARubén would probably work, but I’m not ready for that yet.

Requirements

My name must always be visible.

The solution must work on all Visual Task Boards.

It must work in all ServiceNow instances.

It must not require any customisation in ServiceNow.

It must not affect other members.

Expected result

Solution

1) Install a plugin to manipulate styles in your browser.

I’m using Chrome and Stylebot. You can probably find something similar for your browser of choice.

2) Create a style to apply it to all ServiceNow instances using the wildcard: *.service-now.com

3) Click on “Edit…” and paste this CSS code:

/* Allow inner elements to be repositioned */
div.vtb-quick-panel-content {
    display: flex;
    flex-flow: wrap;
}

/* Move your user to the first position of the list, even before labels 
 * Highlight your name in red */
.vtb-filter-pill.vtb-filter-pill_user[aria-label="Rubén FERRERO user filter"]{
    order: -1;
    color: red;
}

/* 🐈‍⬛ This is not really needed, but everything looks nicer with emojis 🐈‍⬛ */
.vtb-filter-pill-wrapper[data-original-title="Rubén FERRERO"] > .vtb-filter-pill-label::after {
    content: " 📌";
}Code language: CSS (css)

4) Don’t forget to replace my name with yours 😄

Warning: This will probably stop working at some point if ServiceNow changes the HTML. But remember that this is just for you and you can fix it easily!