Customizing Power Apps Portals - Basic Liquid Templating Building Left Side Navigation

Objectives:

• Identify where Liquid code documentation is located and navigate documentation
• Understand some liquid basics, where Liquid Code can be applied and how
• Build a custom Web Template using an example from the online documentation

Use Case:  You have started using PowerApps Portals and have heard about Liquid Templating.  You would like to learn a little more about it and explore using some Liquid in a Dev Environment.  You find the Left Navigation example and decide to give it a go.

Where does my Liquid Code go?   In the PowerApps Portals Liquid code can be used in the following places.

• Web Page Copy Section
• Custom JavaScript Section of
  • Web pages
  • Lists
  • Basic Forms
  • Advanced Forms
• Web Templates (Some “Intellisense” shows up only in Web Templates)
• Content Snippets

Liquid Basics

• Liquid Code executes Server-Side vs Client-Side
• Liquid code is encapsulated in mustache brackets with % signs
  • For example
  • {% assign myVariablePi = ‘3.14’ %}
• Tags, Objects & Filters

How do I get started with Liquid?   An easy place to start with Liquid is the web page copy section.  A simple addition of liquid customizes your home page.

Did you know? 

Liquid was originally developed by Shopify, if you search Liquid on the web, you will find a host of documentation for Liquid.  The PowerApps documentation contains PowerApps Portals implementation of Liquid and is the best place on the web for Liquid Documentation for PowerApps Portals in my opinion.

Building Left Hand Navigation

We can follow the example exactly as written here 

Create a custom page template - Power Apps | Microsoft Docs

Step 1:  Create Two Column Web Template

Step 2:  Create Left Nav Web Template

Step 3:  Create Left Nav Page Template that points to Left Nav Web Template

Step 4:  Create a web page and use the Left Page Page Template, modify web page navigation to use ‘Primary Navigation’

Step 1:  Create Two Column Web Template

Step 2:  Create Left Nav Web Template

Step 3:  Create Left Nav Page Template that points to Left Nav Web Template

Step 4:  Create a web page and use the Left Page Page Template, modify web page navigation to use ‘Primary Navigation’