website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
Form Confirmation Pages
Adding a Progress Bar
Adding Custom CSS To Show Form Submit Process
Dynamic Content in Workflow and Autoresponder Emails
How to output Custom Field Set fields in a Form's Custom Layout
Custom JavaScript Validation for Forms
File Upload Previews
FAQ
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ
COMPANY INFORMATION
Company Information
SITE SEARCH
Site Search
PUBLIC API/ZAPIER
Zapier - Formatting arrays correctly
Public API/Zapier Changelog
MODULES
Module Marketplace
Building Custom Modules
Siteglide Modules
Front-end Submit Modules
DATA STRUCTURES
Automations
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ
CRM
User Details
User Secure Zones
Storing User's Favourite WebApp / Module Items
User's Form Submissions (Cases)
How Users Edit their Email and Password Front End
Editing a User's CRM record Front End with Custom Field Sets
CLI
Introducing Siteglide CLI
CLI Changelog
Secure Zones with CLI
Page Templates with Siteglide CLI
Pages with Siteglide CLI
Includes with Siteglide CLI
Managing Email Templates
Migrate - Manual Form setup
Migrate - Convert existing Forms
Liquid
Accessing Assets
Liquid Dot Notation
Using WebApp Collections- Tutorial
Using the current_user object with Secure Zones
Preventing Duplicate Content with Query Parameters- Canonical URL and Robots.txt
FAQ
GraphQL
Tutorial Overview
About GraphQL
Tutorial 1- Your First Query
Tutorial 2 - Pagination
Tutorial 3 - Filtering the Results
Tutorial 3 - Answers to the First Filtering Challenge
Tutorial 4 - Advanced Filtering
Tutorial 4 - Challenge Answers
Tutorial 5 - Using Liquid to run GraphQL queries on your Site
Tutorial 6 - Variables
Tutorial 6 - Answers to the Variables Challenge
Tutorial 7 - Sorting
Tutorial 8 - Building a Liquid API GET Endpoint Page powered by GraphQL queries
Best Practice and Performance
Module/WebApp Caching
Getting Started with Liquid Caching - to Reduce Server Response time and Improve Performance
Includes
ecommerce/checkout_standard
Frequently Asked Questions
Using Liquid Logic to Check if a field exists, or is empty on the Front End
How do I learn more about Liquid?
How to setup a multi domain start page
Docs powered by archbee 
23min

Tutorial

This Liquid is useful when you are accessing a WebApp 'collection', creating a Categories layout, using a custom GraphQL query and more.

Prerequisites

  • Choose your favourite third party tool for parsing and formatting JSON. Everyone has a different favourite tool, but you can see a third party comparison here to help you get started and find one: https://geekflare.com/json-online-tools/ We'll look at this again below in "Using a Third Party Tool to Visualise Objects"

Introduction

Understanding dot notation is a really useful skill for Developers who are trying to get the most out of Siteglide and the platformOS technology it runs on. This Getting Started Article will cover:

  • What is dot notation?
  • How to find a property of an Object
  • How to chain dot-notation
  • The Data Tree
  • Visualising the Data Tree

You will come across the following terms which might be new:

  • Object
  • Array
  • Key-value Pairs
  • properties
  • Curly Bracket

This Article is intended to be the starting point for a Series of Articles involving dot notation.

  • Advanced Dot Notation- Arrays and Key Maps
  • Using WebApp Collections- Tutorial

What is dot notation?

Normally when you're accessing data on Siteglide, you simply want to access a single value. For example, on a Starter Site (using the WebApp installed by default, Gallery), you might need to output a Title on your Layout: {{this.Title}} 

In this example, this outputs a String: The Latest Music You could use this syntax from memory, or by referring to the Docs, but you're actually already using dot notation. The syntax above takes a variable this which returns an object. .Title  is dot notation which specifies that the Developer wants to access the Title which is a property of this.  Note: Sometimes you may see something like this: {{this['Title']}}  This is the exactly same thing, except this alternative syntax also allows you to add spaces in field names. We'll cover this in more detail in the next Article.

Key Value Pairs

Another important piece of terminology is the concept of a Key-Value Pair. A key is a place where data is stored; a value is the data itself.

In the previous example, this and Title are both keys. The key Titlehas the value The Latest Music. 

Chaining

You can chain dot notation. The following example will output the first name of the User currently signed in to a Secure Zone: {{context.current_user.first_name}}

This accesses the context  object, then accesses its current_user  property and finally accesses the id property of current_user. current_user can be considered an Object, because it has properties of its own, however, id has no properties and is stored as a String.

The Data "Tree"

You can think of objects in pOS and Siteglide as a Tree. The Object you start on like context or this is like the trunk of the tree. Each time you use a dot to access a property, you are going one level down the tree, until you reach the branch of data you needed.

Just outputting this on its own would show you the real JSON Object behind the first example in this Article and all of its properties: {{this}}

This outputs an object of data, which to start with is a little hard to read. That's because whitespace is removed for efficiency reasons. Adding the whitespace back in with a third party tool will allow us to read it more easily (see the next section).

HTML
|

Visualising the Object "Tree"

To make sense of the JSON that the Liquid outputs, you'll need a tool for automatically formatting the JSON data and adding whitespace. Some tools even help you visualise the data in other more advanced ways.

We don't have a favourite JSON parsing tool, but you can see a third-party comparison here: https://geekflare.com/json-online-tools/ Many Code Editing environments also have a tool for prettifying JSON data.

Important Note

We'd recommend when parsing JSON using third party tools that you do not use sensitive Client data. It's best to use test data and publically accessible data when testing and developing dot-notation. We cannot verify that any third party tool will handle your data safely.

Visualising the Data

Here is an example of a tree-view. It's the JSON data with extra whitespace and newlines added for readability (colours too).

Document image

From this view you can make the same observations we made when using the <pre> tag, but it is easier because each level of the tree is indented and all keys are coloured light blue:

  • The first and last character is a curly bracket- this represents the this object we are accessing. 
  • The key id  has no properties, it has a value of 98656 which is stored as a String. this.id will be enough to access it.   
  • The key properties has properties which are accessible by dot notation. You can tell because the properties key is followed by more curly brackets indicating that it is an object. All the properties inside this set of curly brackets are properties of properties. `{{this.properties.name}}` will access the name property of properties.

Here is a chart view from the same tool. It shows more clearly how some objects are nested within others. You can use this to help you chain dot-notation to get the values you need.

Document image

A Special Case - Arrays

You may notice that category_array looks slightly different in the examples above. This is because its value is an array. You can notice an array in your data when square brackets are used around a list of values separated by commas e.g  "category_array":["98479", "111111"] We will cover arrays in the next Article: Advanced Dot Notation: Arrays and Key Maps

Updated 19 Oct 2021
Did this page help you?
Yes
No
UP NEXT
Advanced- Arrays and Key Maps- Tutorial
Docs powered by archbee 
TABLE OF CONTENTS
Prerequisites
Introduction
What is dot notation?
Key Value Pairs
Chaining
The Data "Tree"
Visualising the Object "Tree"
Important Note
Visualising the Data
A Special Case - Arrays