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

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

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

Click + New Page 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

Click + New Web Page

Enter the following details and click Save

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 table for future reference

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: