Design liquid pages in VS Code

Chapters

References

Introduction

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">' | escape }}
{{ '<!--search snippet-->' | escape }}
{{ '<div bundle-html="indexsearch.html">' | escape }}

{% raw %}

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

{% endraw %}

{{ '</div>' | escape }}
{{ '<!--end search snippet-->' | escape }}
{{ '</div>'| escape }}

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.

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.

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.

Git Readme

Power Apps Portal Mock

Various steps taken to create a local hosted live server which mocks Power Apps Portal by substituting liquid code with server side generated html. This way the designing of Power Apps Portal pages can take place in a simple local hosted web server. Log of the configurations and files created:

Initialize GIT

  1. Install / upgrade git: git update-git-for-windows
  2. Create repository on github: logon github, new repository, power-apps-portals-mock
    1. Add a readme, a npm git ignore, GNU licence
  3. In VS Code
    1. Check git enabled setting (gear icon, settings, search git enabled
  4. In terminal, git clone https://github.com/MJBoes/power-apps-portals-mock.git "D:\Data\Desktop Services\Solutions (Desktop Services) - Documents\2020\20201221PowerAppsPortalMock"
  5. Commit changes in readme.md

Create folder structure

  • bundleblocks
  • css
  • fonts
  • img
  • js

Create favicon_package (https://favicon.io/favicon-converter/)

Place the files in the root directory of your website.

  • android-chrome-192x192.png
  • android-chrome-512x512.png
  • apple-touch-icon.png
  • favicon-16x16.png
  • favicon-32x32.png
  • favicon.ico
  • site.webmanifest

Header

In the bundleblocks folder, create an HTML file with the contents of the head section. The content of this file will end up in a Header/Bottom content snippet in the Power Apps Portal.

<head>    <!--Super weird: to get this actually in the head in Power Apps Portals, a Head/Bottom content snippet is added -->    <!-- see https://oliverrodrigues365.com/2020/06/14/power-apps-portals-adding-head-meta-tag/ -->    <meta charset="utf-8">    <title>Desktop Services - Power Apps Portals</title>    <meta property="og:title" content="Desktop Services - Power Apps Portals">    <link rel="shortcut icon" href="https://stpowerappsportals.blob.core.windows.net/assets/img/dts-favicon.ico">        <meta name="viewport" content="width=device-width, initial-scale=1.0">    <script src="https://content.powerapps.com/resource/powerappsportal/dist/preform.bundle-dc32bcb8fb.js"></script>    <script src="js/dts-jquery-custom.js"></script>    <link rel="stylesheet" href="bootstrap.min.css">    <link rel="stylesheet" href="/css/DTS-portal.css">    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">    <link rel="manifest" href="/site.webmanifest">    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#993300">    <meta name="msapplication-TileColor" content="#da532c">    <meta name="theme-color" content="#993300"></head>

The assets (scripts, icons etc.) are hosted on Azure. This is a choice, as these items can be added as web resources in the Dataverse as well. Updating the files in the Dataverse takes more actions though, so here an Azure storage account is used.

Body

Also in the bundleblocks folder, a HTML file is created for the body. The contents of this file will end up in a custom web template in the dataverse. Creation and sync of this content is no more fancy that a copy / paste action in the Portal Management App in Power Apps.

<body>    <header>        <div class="container">            <div class="row">                <div class="col-md-8 col-sm-8">                    <div id="logo">                        <!--logo snippet-->                        <a href="/"><img                                src="https://stpowerappsportals.blob.core.windows.net/assets/img/DTS-sitelogo.png"                                alt="" /></a>                        <!--end logo snippet-->                    </div>                    <div class="tagline">                        <h2><span>Solutions</span> Subjects</h2>                        <h2><span>Applications</span> Services</h2>                    </div>                </div>                <div class="col-md-4 col-sm-4">                    <div class="searchbox">                        <div id="searchInputBox">                            <!--search snippet-->                            <div bundle-html="indexsearch.html">{% include 'Search' search_id:'q' %}</div>                            <!--end search snippet-->                        </div>                    </div>                </div>            </div>        </div>        ...</body>

Note here the div bundle-html="indexsearch.html" tag. What will happen, is that this code renders a liquid tag in Power Apps Portals, but locally it will be replaced with an HTML file. This way the design can be created localy and the resulting css and html works on Power Apps Portals. The content of these bundle-html files is copied from the generated HTML from these liquid tags.

Bundler

The html blocks are combined in bundle.html in the root of the project.

<html>    <head bundle-html="indexhead.html">    </head>    <body bundle-html="indexbody.html">    </body></html><script>    function BundleHTML() {        var z, i, elmnt, file, xhttp;        /* Loop through a collection of all HTML elements: */        z = document.getElementsByTagName("*");        for (i = 0; i < z.length; i++) {            elmnt = z[i];            /*search for elements with a certain atrribute:*/            file = elmnt.getAttribute("bundle-html");            if (file) {                /* Make an HTTP request using the attribute value as the file name: */                xhttp = new XMLHttpRequest();                xhttp.onreadystatechange = function () {                    if (this.readyState == 4) {                        if (this.status == 200) { elmnt.innerHTML = this.responseText; }                        if (this.status == 404) { elmnt.innerHTML = "Page not found."; }                        /* Remove the attribute, and call this function once more: */                        elmnt.removeAttribute("bundle-html");                        BundleHTML();                    }                }                xhttp.open("GET", ("bundleblocks/"+file), true);                xhttp.send();                /* Exit the function: */                return;            }        }    }    BundleHTML();</script>