Introduction to Power Apps Portals

To increase the availability of portal software, Microsoft has recently replaced their older Dynamics 365 Portals with the new Power Apps Portals. The new program is designed to be an easier to use option with less coding needed for companies that want to create portals for their customers to access information Power Apps Portals can be used for a wide variety of purposes. Because it connects natively with Microsoft’s Common Data Service, Power Apps Portals can provide any information stored on the Microsoft Dynamics suite. This blog is intended to be a short guide on how to get started with a Power Apps Portal environment for those who are completely unfamiliar with the anatomy of the program.

To create a Power Apps Portal, navigate to Power Apps and select the Create option on the left-hand bar. Selecting the Portal from blank option will prompt the user to choose a name for the new portal and the actual web address that the portal should be located at. Clicking Create will begin the process of provisioning the new portal. During this time, Power Apps will automatically set up a new website under the portal address that was chosen. It will create and run all the back-end functions that are required to get the portal up and running.

For users who have experience with portals in the past, this may seem far easier than most setups since there is no hassle with server architecture or any .NET scripts that may get in the way. The process to create the new portal may take some time to finish but typically finishes within twenty minutes. Once the provisioning is over, Power Apps may have several new programs that can be used depending on whether the environment is new or has been used previously. There should at least be two options - the portal with the name that was chosen before, and the Portal Management app. The Portal Management app is primarily used to modify entities in Power Apps Portals and requires significant understanding of Power Apps Portals, the Common Data Service, and the overall Dynamics 365 entity architecture. For the purposes of this blog, and for general users of Power Apps Portals, the Portal Management App is not important.

To view the newly created portal as a user might view it, double click the portal. It is also possible to navigate to the portal by following the URL that was created when the portal was provisioned. The newly created portal is relatively well detailed when it is first created. It may be prudent to play around on this portal to see what is already available. The portal automatically creates multiple pages and includes a pre-built contact form and some sample authentication logic for external users. For some, the functionality in the base portal may already be enough.

When ready to proceed to customization, exit the portal and return to Power Apps. Next to the portal’s name, there are a set of ellipses. Click these and select Edit. Modification of the Power App is done here. The farthest left-hand bar contains the Pages of the portal, additional components, which may be added to any of the respective pages, Themes, which may be applied using CSS stylesheets, and Template pages which each have their own function and can be created from here. To close the left-hand navigation, click out of it.

Pages consist of a variety of different component that can be created and modified by the user. There are seven different kinds of components in Power Apps Portals. The Text component is merely a text box that can be resized and contain different font sizes within it. The right-hand bar can change the font color and alignment of the text within the Text component. The Image component creates a box that can be resized which contains an image to be uploaded or hosted. To upload an image, or use an external URL of an image, use the right-hand bar.

The Iframe component is a resizable component which allows a browser to load another website within the allotted space. This defaults to Bing,com, but can be modified on the right-hand bar to link to any external website.

The Form component provides a form for an external user to submit directly to the company that is hosting the portal. To create a new form, fill out the information on the right-hand bar.. To modify the form, select edit form, which will begin the process of creating in-depth forms that will automatically create the entity which is being selected.

The List component allows for a list of Dynamics entities to be displayed to the external user. Like the Form component, selecting the desired entity and a view of the data will display the data for that external user. Permissions may also be assigned so that the external user may be allowed to modify or create new entries on the List.

The Breadcrumb component is used to display a set of links to pages on the website for navigation purposes. These are customized entirely through custom coding.

The final component is the Power BI component which creates a direct link to an existing Power BI report. This can be incredibly useful for displaying data easily. To enable Power BI reports, navigate to the portal admin center.

To make full use of Power Apps Portals, or to implement extensive customization of the portal, custom code is available. Power Apps Portals uses both standard browser languages and a relatively new and simple language called Liquid. Microsoft provides several guides for getting started with Liquid in their Power Apps documentation. Liquid works very well with existing Dynamics 365 architecture so that elements and entities of Dynamics can be brought into Power Apps relatively easily. To add custom code to the portal, navigate to the bottom of the screen and select the code symbol () next to the save function. This will open up the page’s basic code which can have custom JavaScript, CSS, or HTML embedded into it. To use JavaScript or CSS, simply use the script and style tags as is common in web development. When a new component is created on the page, the component’s interactable code will be automatically generated at the bottom of the file. It can then be modified like any other element. Interestingly, this code editor allows for both Liquid coding and the browser languages simultaneously. It is highly likely that there will be several sections of Liquid and browser language on a given page’s code.

Power Apps Portals is a very useful tool despite its relative youth. Microsoft is committed to providing businesses with the ability to connect with their clients with relatively little hassle or extra costs that may be associated with normal portal maintenance. It is likely that there are more features and updates coming to the platform to allow portals to fulfill a wide variety of business applications.