Introduction

Ready to give liquid templating a go but not sure where to start? Exciting times!… and good news, you’re in the right place. This is going to be an awesome journey. Let’s get started together…

Here’s what we’ll need:

  • A Web Template
  • A Page Template
  • A Web Page

Here’s what each component brings to the table:

The Web Template is where you’ll do your coding; liquid, HTML and (if applicable) template-specific JavaScript & template-specific CSS.

So what does the Web Page do? For the purpose of this getting started tutorial, the point of our web page is to determine where in the site hierarchy this piece of content appears. We do so by specifying a partial URL e.g. my-example-page and choosing which existing page this should sit under. There’s more to web pages that we’ll cover in later tutorials… You can specify the partial URL, provide translations, add page-specific CSS and page-specific JavaScript and  set up access control rules (security trimming a page to a given web role). I’ve covered these briefly in the table at the end of this post

So we know we need a web page in order to surface our content on the portal at a given address. However, there’s no direct relationship between a web template and a web page. This is where a Page Template comes in. The main thing we’ll do here is specify the Type as Web Template. Note – depending on its purpose, one page template could be used for many web pages. For example the out-of-the-box Full Page template is used on various pages throughout the starter portals.

Hands-on: Create some content and publish it to the portal

Now we have an understanding of the various records we’ll need, let’s get our hands dirty and create a web template outputting the current time and the user’s name…

Open the Portal Management app and go to Web Templates > Add New

Screenshot demonstrating step - Portal Management App > Web Templates > Add New

Set the Name field as Liquid Sandbox

Select your portal in the Website field

In the Source field, type / copy and paste the following:


Hello, {% if user %} {{ user.firstname }} {% else %} World {% endif %}.
I loaded this for you at {{ now }}

Don’t worry, we’ll cover how to write liquid in more detail later in the series. Hopefully you can see here that liquid is pretty easy to read, even for the uninitiated 🙂

Click Save

Screenshot creating a Web Template in the Portal Management app

We’ll now create a page template to make this web template available for use on web pages…

From the Web Template, open the Related menu and choose Page Templates

Screenshot demonstrating navigation from a web template to related page templates

Click + New Page Template

Screenshot showing New Page Template option from Web Template

Set the Name to Liquid Sandbox

Select your portal in the Website field

Set the Type to Web Template

In the Web Template lookup, select the Liquid Sandbox web template we just created

Leave the Use Website Header and Footer field set to Yes

Click Save

The last record remaining is the Web Page…

From the Page Template screen, open the Related menu and select Web Pages

Screenshot of navigation from a Page Template to related Web Pages

Click + New Web Page

Screenshot showing New Web Page button from Page Template related records

Enter the following details and click Save

Screenshot showing Web Page creation options

About that Parent Page field:

This determines where in the site map / hierarchy of pages that this web page belongs. Every page other than the home page will need a parent page. This hierarchy allows you to build ‘sections’ within the website

Examples:

Let’s say the portal URL is https://myportal.com

The resulting URL for a web page with a parent page of home and a partial url of my-applications would be e.g. https://myportal.com/my-applications

The resulting URL for a web page with a parent page of meet the team and a partial url of franco-musso might be https://myportal.com/meet-the-team/franco-musso

 

Finally, refresh the cache

 

You should now see something along the lines of this:

For logged in visitors:
Hello Franco. I loaded this for you at 19/01/2021 1:15:35 PM
For anonymous visitors:
Hello World. I loaded this for you at 19/01/2021 1:15:35 PM
Of course it looks horrible, but we can take care of that. In a future post, we’ll cover how to use extends and block to leverage the layouts from existing web templates and just override the parts we wish to replace- much easier than starting from scratch!

 

Bonus: Further information on the Web Page entity for future reference

Name

A user-friendly name for the web page

Website

In case there are multiple portals running on this model driven app / this instance of Dynamics, which website (portal) does this web page belong on?

Parent Page

Where in the site this web page belongs. Every page other than the home page will need a parent page. This hierarchy allows you to effectively build ‘sections’ within the website

Examples:

Let’s say the portal URL is https://myportal.com

The URL for a web page with a parent page of home would be https://myportal.com/my-applications

A web page with a parent page of meet the team might be https://myportal.com/meet-the-team/franco-musso

Partial URL

A URL-friendly version of the web page name (similar to a permalink in WordPress)… no spaces or special characters, just letters, hyphens and numbers e.g. my-cases

Page Template

The page template to use for this web page (this determines the content – whether that’s making use of a web template or for backwards compatibility, a re-write template)

Publishing State

Published (make this live to external users) or Draft (only visible to admin users)

Note – you also have the option to schedule the publishing of this web page using the Display Date, Release Date and Expiration Date fields.

Web Form

Select a web form to embed in this web page

Entity List

Select an entity list to embed in this web page

Entity Form

Select an entity form to embed in this web page

Custom JavaScript

This will be output in script tags at the end of the body tag

Custom CSS

This will be output in style tags after the theme.css file at the end of the head tag

Is Root?

Is this the ‘main’ page (in which case this field would be set to Yes) or is this a localised translation of the page (In which case the field would be set to No)

 

Internationalisation

For each web page you create, there will be at least 2 records:

1 ‘root’ web page (IsRoot=Yes)

1 ‘localised’ web page (IsRoot=No) for each language set up on the portal. This is where you can store translated versions of the web page content if you have an international customer base

You can also use the web page to output HTML and rich text using the following fields:

Please note that these are only available on localised pages:

Title

This will be:

Output in the title tag which will be used as the browser tab’s title

Output within a heading 1 tag in the page header

This text will be used in web links pointing to this webpage

Copy

Output at the start of the page – below the title and above any entity lists, entity forms or web forms

Summary

Not something I use. Here’s what ADX Studio says, “A short description for the page, this value will generally be used to add a description of the page to portal navigational elements that render a link to the page.”

Franco Musso

You may also like

Leave a reply

Your email address will not be published. Required fields are marked *