ENGINEERED CODE BLOG

Dynamics 365 Portal & SharePoint: Using CSS To Save Some Clicks

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.

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.

Dynamics 365 Portal: Customizing Portal User Registration Process – Part 4

In my last post in this series on creating a custom registration form for a Dynamics 365 Portal implementation, I discuss some optional minor user experience enhancements.

In my last post in this series on creating a custom registration form for a Dynamics 365 Portal implementation, I discuss some optional minor user experience enhancements.

In my previous post I completed the process for creating a custom user registration form. However, with a bit more effort, it is possible to enhance the user experience for anyone going through this process.

Cleaning up the Invitation Email

As I mentioned in my last post, it is important to customize the email that appears in the Send Invitation workflow, including:

  • Updating the From address to ensure that the email will actually be sent.
  • Updating the body of the email to ensure it is both on-message and on-brand for your organization.
  • Updating the link in the body of the email to ensure that it points to your Portal.

Customizing the Invitation Code Redemption Screens

Because we’re using the invitation code model for something a bit different, some of the out-of-the-box language on the screen when redeeming might be a bit confusing for users. If you only plan on using invitation code for this registration process, you could update the language to be very specific – otherwise maybe make it a bit more generic. Some of the elements you may want to customize include:

  • Authentication/Registration/OpenRegistrationEnabled Site Setting: setting this to false will hide the out-of-the-box registration so that you don’t confuse users (but will still allow users to use invitation codes).
  • Account/Redeem/InvitationCodeFormHeading Content Snippet: this is the header that appears above the invitation code form – you could set this to Confirm your code to setup your credentials.
  • Account/Redeem/InvitationCodeFormButtonText Content Snippet: controls the text of the button on the first invitation code page – you could set this to Confirm.
  • Account/RedeemInvitation/PageCopy Content Snippet: this can be used to add language to invitation code page. In our case, we’ll use it to add some CSS to hide the check box that asks if they have an existing account (which they shouldn’t), and the subnavigation that includes a link to the sign in page, which I feel will just confuse users:
    <style type="text/css">
    .page-content .checkbox, .nav-account {
        display: none;
    }
    </style>
    
  • Account/Register/PageCopy Content Snippet: this can be used to add language to page where the user selects their authentication type. In our case, we’ll use it to add some CSS to hide the subnavigation that includes a link to the sign in page, which I feel will just confuse users:
    <style type="text/css">
    .nav-account {
        display: none;
    }
    </style>
    

Remember that if any of these settings or snippets don’t already exist in your environment, simply create them with the appropriate name. After making these changes, users will see a screen like this when clicking the link from their email:

This is a more streamlined version that I think will lead to less confusion.

That brings to a close this series of posts – I hope you found them helpful. As I mentioned, the user registration process is an area that usually generates a lot of questions, so if you have another approach you’ve used successfully, please share with the community!

Contact

Engineered Code is a web application development firm and Microsoft Partner specializing in web portals backed by Dynamics 365. Led by a professional engineer, our team of technology experts are based in Regina, Saskatchewan, Canada.