Luke Wakefield

Studio Liquid and JS Functions

Studio Liquid Functions

In this section of the documentation, we'll cover some common Liquid functions which Studio adds into Layouts so you can understand what this code is doing and, if you like, use them yourself.

A form case is the database entry created whenever a CMS form is submitted, storing the snapshot of the user's field entries. This function returns the case data in an eCommerce setting when you have the order ID; it can be used to display the user's data in a confirmation alongside order information.

Form Case From Order ID

This helper function can be useful to avoid linking to a detail page view which will 404

Detail Page Valid

This function fetches the configuration file which Siteglide uses to store metadata about the WebApp or Module.

Get Table Config

Studio Liquid Includes

Helper JavaScript functions for use in any library.

Studio Helper JavaScript

Pagination

Feedback

Roadmap

Changelog

www.siteglide.com

Get Started

Quickstart Guides

Manage Sites, Users, Domains, Billing and more

Portal

Billing

Siteglide Billing

Billing Setup

Automatic Site Upgrades

Subscriptions and Changes

Invoices

Agencies

Agency Account

Clients

Site Copies

Add your own branding to the Siteglide Admin

Agency Whitelabelling

Users

Introduction

Invite & Manage Users

User Roles

Sites

Introduction to Sites

Site Backups and Disaster Recovery

Go Live

Install & Manage Modules

Site Details

Site Users

Quickstart: Create a Site

Site Subscription

Domains

Introduction to Domains

Add a Fully Delegated Domain

Add an External Domain

Add an External Subdomain

Add a Subdomain to another instance

How to setup a multi domain start page

Legacy AWS External Domains

Your Siteglide Account

Marketplace

Log and Manage Support Tickets in Siteglide

Tickets

Matt Jones

Developers

Install, and get started with our CLI. With it, you can make changes to your site's code, directly from your machine. 

Quickstart: CLI

Introduction to the Command Line Interface (CLI)

About CLI

Give AI the right tools, access, skills and guardrails to help you achieve top results

Siteglide MCP (Alpha)

Once CLI is installed, you need to make connections (sometimes called an environment) between a folder on your machine and a specific Siteglide site.

CLI Site Setup

Creating WebApps via CLI

The main commands you'll need when using Siteglide CLI

CLI Command Reference

CLI Troubleshooting

Liquid

How to use Liquid to get the most from Siteglide

Introduction to Liquid

The context object is a rich source of data about the environment where you are writing Liquid, whether that is a Page, Email etc. This article goes into detail about the different properties and how you can use them.

Reference - Exploring the Context Object

Learn to recognise different types of Liquid syntax

Liquid Tutorial 1 - Recognising the syntax of tags, outputs and filters

Liquid Tutorial 2 - Liquid variables and types

The parse_json tag can be used to create objects from a JSON string. These allow you to represent complex entities with properties, instead of using a bunch of separate variables. Dot notation is a useful way to access those properties later. 

Liquid Tutorial 3 - Creating Liquid objects and accessing their properties

How to use Liquid For Loops and Indexing to handle arrays. Also, how to use a key to access key maps, using categories as an example.

Liquid Tutorial 4- Creating and accessing arrays, including looping

So far we have created variables to store data manually and accessed that data, but often we want to access data that has been provided by external sources. A good place to start is looking at information about the URL and the current Page.

Liquid Tutorial 5 - Accessing data from the page and URL

Use if statements and case statements to control what happens based on context

Liquid Tutorial 6 - Logic

Using Categories from the context object as an example, we look at a special kind of object (maps) and how to access their properties.

Liquid Tutorial 7 - Looping over an object's properties

With the powerful include and render tag, you can use Liquid to pull in other Liquid files into the file you're working in. This allows you to access oven-ready Siteglide functionality and efficiently re-use your own content across your site.

Liquid Tutorial 8 - Joining Liquid files together with include/render

Liquid Tutorial 9 - Using WebApp and Module collections - Coming Soon

Improve the accuracy of your if statements by using the blank keyword to catch a range of falsy states.

Liquid Tutorial 10 - Truthiness in Logic: using Liquid to determine if a field is empty or blank

We have often been asked if we can add a feature where customers can directly add Liquid code to rich text fields, and have it evaluated and run on the Page. For major security reasons, this is not possible; it would make it so easy for malicious users to POST form data to your site and have a high level of access to critical information. However, you can allow certain Liquid-based functionality in a safe and controlled manner. 

How to safely trigger Liquid functionality when parsing a rich text field

GraphQL

About GraphQL

Tutorials

Tutorial 1 - Your First Query

Tutorial 2 - Pagination

Tutorial 3 - Filtering the Results

Tutorial 3 - (Answers)

Tutorial 4 - Advanced Filtering

Tutorial 4 - (Answers)

Tutorial 5 - Using Liquid to run GraphQL queries on your Site

Tutorial 6 - (Answers)

Tutorial 6 - Variables

Tutorial 7 - Sorting

Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries

Tutorial 9 - Using Mutations to Create New Records

Tutorial 10 - Using Mutations to Edit a Record

Tutorial 11 - Using Mutations to Delete an Item

Tutorial 12 - Related Records and Datasources

Site API

Siteglide API: Introduction

Configuration

Custom Field IDs

Field Types

Zapier Integration

Developer Marketplace

About Building Modules

Adding Payment to a Module

Create Folder Structure

Data & UI Module Example

Module Setup

File Structure

In this section, we'll add reference code which is relevant across Modules. Specific Modules may have further relevant reference material in their own sections of the docs.

Modules Reference

Site Template Modules - and How to Make Your Own

Submit Module for Approval

Theme Module Example

Updating Modules

Bring some of the user-experience of a JavaScript framework into your server-powered Siteglide pages. With the live-updates API, applications can respond to user-input and refresh their content efficiently to display filtered, sorted or searched versions of lists. 

This is an advanced feature, but made to be highly customisable and simple to maintain.

The JS API is designed specifically for Siteglide, allowing the developer to set secure rules about what kind of content can be requested; this prevents malicious users from using the API to "explore" your data. 

Many Studio Dynamic Sections will use this out of the box to achieve interactive functionality in a consistent, documented way.

Live Updates JavaScript API

This article is your starting point for learning about the problems the Live Updates API was designed to solve, helping you to decide whether it could help you in your website project.

Introducing the Live Updates API

All versions of the Live Updates JavaScript will continue to be present and usable on the module, so existing sections can continue to use older ones. When creating or installing new sections, we recommend the newest version.

Live Updates Changelog

A step-by-step guide to taking a module/webapp dynamic section layout and adding Live Updates markup to enable advanced interactivity for the end-user.

Adding Live Updates to a dynamic section

Live Updates Markup Example

Live Updates allows the end-user to filter the items from the database, but what if there is some content you don't want all users to see? For example, maybe you only want the user to access items which are assigned with a datasource to the same company webapp as them? This article shows how you can lock down some filters with liquid logic, 

Live Updates Example - Enforcing Filters

Steps to Use Live Updates Methods

Live Updates Troubleshooting

Steps to Initialise Live Updates with JS

If you want the convenience of the Live Updates JavaScript API to handle event listeners, but wish to customise the kind of content which is re-rendered, you can use a combination of Content Section includes and GraphQL to do this.

Using Live Updates with Custom Includes and optionally GraphQL

A Quick Summary of the Live Updates API when you need to look up a data-attribute, parameter, event or method.

Live Updates Reference

The SiteBuilder module is being replaced by the Studio module. SiteBuilder features are either no longer needed, or have already been moved to the Studio module. We're updating the docs to reflect features which have been adopted by Studio.

SiteBuilder (Deprecated)

Get started with SiteBuilder in a few simple steps

Quickstart: SiteBuilder - deprecated

About SiteBuilder and how it can help you rapidly build websites and applications

About Sitebuilder - deprecated

Reference - deprecated

Field Mapping

The cookie settings JavaScript is a lightweight script designed to support Studio Layouts which modify a cookie in order to store the user's cookie preferences.

Cookie Settings JS - Deprecated

Site Setup

Note, if you're looking for SiteBuilder front-end JS and Liquid functions, the docs for these have been moved to Studio since SiteBuilder is now deprecated. 

Advanced Features

Extend SiteBuilder

Layouts

Styling

Studio

Introduction to Studio

Get Started with Studio

Setup Studio

StudioKit Site Template

Install Studio Module

You can install a Studio library (e.g. StudioKit) on an existing or a brand new site. This gives you all the tools you need to build out a great site with a slick editing experience. 

Install a Studio Library

You can change Theme while keeping the same sections meaning you can redesign a site quicker than ever. 

Library Themes

Library Sections

Using Studio

Navigating Studio

Studio Page Editor

One of the most powerful features of Studio is being able to take a static content section and make it dynamic by bringing in data from Siteglide Modules or WebApps and controlling the output.

Datasource Mapping

Studio AI Section Builder

An introduction to Studio Libraries (previously called themes)

Studio Libraries

Studio Page Templates

Studio User Roles

Get more out of Studio using Siteglide CLI

Studio AI Skills with Siteglide CLI

For Developers to extend and customise Studio

Studio Developers

Studio Library Publisher

Using licensed code in your Studio library

In the 2.0.0 update, themes were renamed to libraries, and the new libraries were given powerful new features. It's actually quite easy to upgrade, but you'll need Siteglide CLI.

Migrating from <2.0.0 themes to libraries

Instructions for migrating from using SiteBuilder helper functions and includes to Studio.

Migrating helper functions and includes from SiteBuilder

Dynamic sections allow much richer experiences for the end-user of the website, as they can be given choices about filtering, sorting and pagination. Combining this with the Live Updates API can make the transition between user-interaction and the website's response seamless.