Power Apps Portals design with VS Code (2020-12-17)

Summary

As Power Apps Portals leverage server side liquid technology, it is not straightforward to use client side development techniques. As a citizen developer I treat the server side part as a "given". Still, designing pages in the Power Apps Platform interface is not well supported and debugging is cumbersome.
This post describes a way to design the pages in Visual Studio code including the server side part by cheating a bit.
A little bit of understanding of the CMS side of Power Apps Portals is needed, but quite fast the particularities can be ignored and regular page design can take place, so that PWA techniques can be used.

The cheating part is to create a bundler page in VS Code which combines component pages to mimick the target Power Apps Portal platform. In these pages the liquid tags are placed inside a custom tag.

<div id="searchInputBox">
<!--search snippet-->
<div bundle-html="indexsearch.html">

{% include 'Search' search_id:'q' %}

</div>
<!--end search snippet-->
</div>

The bundle page replaces bundle-html tags with a piece of HTML copies / pasted from the portal. In the example above, the DIV with the liquid code is replaced with the HTML contents of indexsearch.html for local design. The same html renders the search control for the server when run inside a Power Apps portal page.

The indexbody.html is used to update a custom Web Template and the indexhead.html is kept in sync with a content snippet Head/Bottom. The result is that the server side part on Power Apps Portal can be designed in local VS Code.

Details

Including code on Power Apps portal pages prove to be quite a drag. See my github repo instead. Some general tips and pointers:

  • Storing assets on Azure
    When possible I put assets (images, fonts, scripts) on an Azure storage account. It costs practically nothing and is nicer that uploading blobs to the Power Apps Dataverse. However, you need create a CORS entry on Azure to make it trusted in some (fonts for example) cases. In my particular case GET for all headers is accepted by the storage account from origin https://desktopservices.powerappsportals.com and from 127.0.0.0.1:5500 (my local hosted Live server).
  • Most manifest items, like Android icons, I did upload to the Dataverse. I have not tried whether a different / Azure location would work.
  • My JavaScript development is done separate from the bundle approach. By building different html mock parts, I did not get the loading of script files in the building blocks working right.