Power Platform Community Forum Thread Details

Healthcare patient portal - difficult to work with

Hi all,

I'd be curious to hear from anyone who has implemented a Healthcare Portal and tried to customize any of its features, in particular the user interface.

I have found it to be quite difficult. The HTML, CSS and Content Snippets are very complex; much more so than a typical Customer Self Service portal. The CSS doesn't cascade. There are many errors in the code.

Personally I am amazed Microsoft have released code of such poor quality to the public.

thanks,

Jady

Categories:

General topics

Here are a few learnings to help anyone intending to customize a Healthcare Patient Portal.

By "customize" I mean implement any changes to the out of the box UI, for example changing the style of tiles, cards, lists and forms. The reason for this is all customers I've worked with want custom UI styling and branding. Perhaps your customers do not want custom UI styling. If so, you can happily ignore this post.

By the way, please note Healthcare Patient Portal doesn't open in the Power Pages Editor. I really hope Microsoft are working on a future version of Healthcare Patient Portal using Bootstrap 5x, with properly structured code.

Healthcare Patient Portal seems to be built in such a way that it uses few of the Basic Portal components that you're probably accustomed to in Customer Self Service Portal and other standard templates. Bootstrap & theme.css provide a framework, but the majority of code in Healthcare Patient Portal is contained in a large number of Content Snippets and Web Templates prefixed with "Patient Portal -". There is an astonishing amount of duplicate code in these files, particularly unstructured CSS. Plus, a large number of errors. Weblint is probably your first step or cast a discerning eye over the CSS (VS Code editor with Power Platform extension has excellent error checking capability for CSS and JS).

I found it takes so long to untangle the duplicated, non-cascading CSS packaged with this solution that next time I work on a Healthcare Patient Portal, I intend to simply delete all of this CSS, start from nothing and build all the screens with clean code. It is an incredibly frustrating experience to work with the code provided in Healthcare Patient Portal.

Tips:

Configure navigation to use Primary Navigation web link set. Copy the code from "Patient Portal - Header" web template into the "Patient Portal - Side Navigation" content snippet, then modify it to display a vertical list of navigation links and you can then utilize "Primary Navigation" web link set for your main navigation links, instead of the hard coded HTML in that content snippet. Set this navigation to display for desktop only.
The traditional Portal navigation menu in the Header is hidden for phones and tablets. Why? Reset this to display for mobiles and tablets to get a nice navigation menu under the hamburger menu.
Footer is also hidden in Healthcare Patient Portal. It is easy to display by modifying its display attribute in CSS.
For a better responsive UI, add ".table-fluid" CSS class into your Lists so they actually display in a usable way for mobile devices.
Replace the .png image-based icons provided by Microsoft with Fontawesome or even Glyphicons for better display; customize them with CSS.

This is by no means an exhaustive list; just a minimal few ideas to get started. Every project is different. But why Microsoft released a Portal solution with such awful code is beyond my imagination.

Cheers,

Jady

Quick Links