In a previous post, I asked you not to forget about CSS when customizing the user experience of some of the out-of-the-box features of the Dynamics 365 Portal product. In this post I’ll provide another example of using this technique to reduce the number of clicks required to remove a SharePoint document.

Consistency Can Be the Enemy of Simplicity

We all rejoiced when Microsoft added the out-of-the-box SharePoint integration back to the Dynamics 365 Portal product. For some technical reasons, the SharePoint integration wasn’t available when the product first moved from Adxstudio to Microsoft, but thankfully as part of the October ’18 release, it is now back.

I was using this integration in a project recently when the client asked me if I could make one of the user experiences a bit cleaner. Specifically, they wanted to know if it was possible to make the Delete button that appears within the row of a document appear directly in the table, without have to click the drop down arrow.

I knew that I could probably do this with JavaScript (because you can pretty much do anything with regards to the interface with JavaScript), however my goal was to try to do it using only CSS.

Now, it may seem like a bit of an odd user experience to have to click the drop down to get to the Delete button, and that’s because it is. But it’s not really intentional. It’s because Microsoft uses the same user interface elements across the Portal. What you’re seeing for the SharePoint documents is pretty much the same as you’d see for an Entity List. Reusing this code means less to maintain for Microsoft, and also means a consistent experience for users of the Portal – all generally good things. However, in this particular case, it means an extra unnecessary click, which my client wanted removed, especially since we aren’t leveraging this type of interface anywhere else on the project, so there wasn’t anything else that would make consistency important.

CSS to the Rescue!

I’m not going to rehash the reasons I like CSS in this post, but there is one particular reason in this case that using CSS makes our life a lot easier, and that’s due to the dynamics nature of the SharePoint documents table.

If we were to use JavaScript in a situation like this, that generally means we are manipulating the DOM, moving things around to get them to show up as we want. Often that is done when the page loads. However, the SharePoint documents table can be constantly changing – users can add and remove documents without the page refreshing. If we were to use JavaScript, we’d have to handle all of those events to make sure our Delete button is always consistent. It would be a pain.

Instead, since CSS is “always on”, we don’t have to worry about handling when the table changes – our CSS will automatically get applied.

Another reason we try to avoid manipulating the DOM is that if you don’t do it right, you can lose the events that are attached to the elements. For example, there is JavaScript code that run when the Delete button is clicked. If we start moving the button around, you can possibly lose that functionality. There’s no point removing clicks to get to a button if the button doesn’t work! Again, it’s possible to move the button and keep the events, it just another thing that makes it tricky.

Now, depending on how Microsoft had chosen to implement that functionality, a pure CSS option may not have been possible. If the Delete button had been added to the page in response to the click event on the drop down arrow, then we wouldn’t have anything to target with our CSS until the user clicked on the button. Thankfully, however, the Delete button is always on the page, just hidden until the user click the arrow to show it.

Since the markup for the button is always on the page (just hidden), we can get to where we want to go in two easy steps:

1. Always hide the drop down arrow
2. Always show the delete button

Using the browser developer tools allows us to find how to target both of these elements.

To hide the drop down arrow:

.sp-item .toolbar > a {
    display: none;
}

To always show the Delete button:

.sp-item .toolbar .dropdown-menu {
    display: block;
    position: relative;
    border: none;
    background: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

You’ll notice I’ve added a few more styles in there to make the button fit in a bit better with the table.

Just add this CSS to your Web Page, or Web Template, and you’ll get:

With just a few lines of CSS, we’ve improved the user experience quite a bit by saving the user an unnecessary click!

As mentioned above, Entity Lists use similar markup – with just a few tweaks, you could apply the same technique to show the action buttons inline in the table. In fact, these drop down arrows are a standard Bootstrap feature used throughout the Portal, so there are probably quite a few different places you could do this if you wanted.

Bonus: Hiding the Modified Column

You may have noticed that in my screenshots, the Modified column wasn’t visible in the SharePoint documents table – this was another request from my client, as it was not important for the users to see. Again, CSS makes this very simple:

.sharepoint-data tr th:nth-child(2), .sharepoint-data tr td:nth-child(2) {
    display: none;
}

This CSS targets the second child of both the header row and the body rows of the table used to display SharePoint documents, and then simply hides them using display: none;.

It is important to note that the markup still exists on the page, meaning an advanced user can still find out what the dates are. So don’t use this technique to hide information you consider to be confidential.

Double Bonus: Hiding the New Folder Button

Another request was to hide the button that allows the user to create a new folder. This simple CSS accomplishes that task:

.add-folder {
    display: none;
}

Again, an advanced user could easily unhide the button using developer tools, so this is about user experience, not security.