This Article will show how to use custom fields to fetch dynamic content in a WebApp Layout.

Introduction

Partners often ask us about outputting Liquid from a Rich Text Editor in their WebApps. Unfortunately it's not currently possible to do this- but here we'll explain a little about why- and a technique you can use to achieve the same effects.

Answer

Currently platformOS doesn't allow Liquid code to be executed within Liquid Fields (such as a Blog's description field). This policy improves security, by making sure it's impossible for user-submitted content to inject malicious Liquid code into your Site- giving you peace of mind that any Liquid code you write is for your eyes only.

We're working on a secure method to allow something like this in the future, but in the meantime, this Article will show you how to use custom fields to fetch dynamic content in the Layout- either above or below your Rich Text field output.

In this example, we'll be adding a Form below the WebApp rich text field.

Step 1) Add custom fields

You'll need to add the following fields to your WebApp structure:

• Show Form - Checkbox containing values True & False.

• Form ID - String field containing the ID of the Form you'd like to output.

• Form Layout - String field containing the name of the Forms Layout.

Step 2) Add data to a WebApp Item

Now the fields we'll be using have been defined, add the relevant information to the fields.

Step 3) Add Liquid to the WebApp Layout where the content will be displayed

Next, locate the WebApp Layout Folder where the Form will be outputted.

Here we can output the Form using the fields that have just been set- wrap the whole include within an IF statement checking whether "Show Form" is "true" if so the Form will be outputted (with the parameters being pulled in from our WebApp). In our example, the Form will be added underneath a Rich Text field.

Example
javascript
Copy
<p>{{this['Rich Text Field Example']}}</p>
{% if this['Show Form'] == "true" %} 
    {%- include 'form', id: this['Form ID'], layout: this['Form Layout'] -%}
{% endif %}

Now the fields within the WebApp control whether a Form is outputted for each item.

Alternative options for moderating which content the Client can add

*Hardcoding parameters *If you only wish the Client to be able to display a single type of Form, you could hardcode the ID and Layout name of this Form straight to the WebApp Layout.

The Client would have control over whether or not to show a Form, but the Form type would always be the one you approved.

*Using Content Sections *Content Sections and Code Snippets can also be outputted depending on ID and could provide a range of ready-built content which you could allow the Client to add into their WebApp items.

*Expanding the Logic *You could use Liquid Logic in the Layout to only allow certain Form / Content Section IDs to be displayed and forbid others. In this example, Form 2 will never be displayed, even if it is selected:

Example
javascript
Copy
{% if this['Show Form'] == "true" and this['Form ID'] != "2" %}
    {%- include 'form', id: this['Form ID'], layout: this['Form Layout'] -%}
{% endif %}

You can also use GraphQL queries and mutations to modify and read Pages and Partial files containing Liquid. If you are creating a module and wish for users to be able to organise, store and execute Liquid, this may be a viable method to make this possible safely.

Advanced - Spotting Liquid or other patterns with RegEx and safely running Liquid code

Liquid code in the rich text field won’t evaluate for the security reasons mentioned above, but it can be spotted as a safe pattern and you can decide to allow specific non-dangerous actions to then be run as a result of spotting that pattern.

Taking the example above, what if we wanted to allow the user to nest the form within the middle of their paragraphs, by outputting an agreed syntax (rather than a Liquid syntax, let’s use HTML comments; that way if our code fails, at least no errors will display to the end user):

Example
HTML
views/pages/example.liquid
Copy
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

<!-- include_form -->

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

In the example, a replace_regex filter is used instead of replace, so we can be lenient about the amount of whitespace allowed in the syntax. You can test Liquid flavoured regex here:

https://rubular.com/

You can write more advanced versions of regex_replace, which can allow the user to pass parameters and modify the behaviour of the form you output. However, it’s important to be realistic about what the user will be able to learn, and to be careful you do not introduce security flaws which allow malicious users to include Liquid files they should not have access to.