website logo
⌘K
Introduction
PORTAL
Agency Whitelabelling
PAGES
Pages - Accessing Page Data
Pagination Layouts
Page Templates
FORMS
CATEGORIES
Filtering WebApps and Modules by Categories
Outputting Categories on WebApp / Module / eCommerce Layouts
Outputting Category Fields in any Location
Category Detail Layouts
FAQ - Categories
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
Creating WebApps from the CLI
Field Types
WEBAPPS
Front-end Submit WebApps
Layouts
Search and Filtering
Understanding Custom Field Names and IDs
FAQ - WebApps
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 - Liquid
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 

Tutorial 6 - Answers to the Variables Challenge

20min

Last Time we challenged you to pull together everything you'd learned to create some Pagination Buttons powered by Graph. Answers here!



Document image


Challenge Objective

For this challenge, we'd asked you to set up your own simple Pagination controls. This combined several of the skills you've learned so far. As usual, don't worry if you need to check these answers before completing the challenge on your own. On a new Page you create, the User should be able to see the first three Items in the Gallery WebApp.

Then, when they press the Page 2 button, the Page should refresh and they should see the second Page of Results.

Step 1) Writing the Graph Query

Firstly, here's the query without variables.

GraphQL
|
query gallery_by_page {
  models(per_page: 3, page: 1, filter: {model_schema_name: {value: "webapp_1"}}) {
    page #optional
    results {
      properties
      id
    }
  }
}


Now let's add the variables:

GraphQL
|
query gallery_by_page($page: Int) {
  models(per_page: 3, page: $page, filter: {model_schema_name: {value: "webapp_1"}}) {
    results {
      page #optional
      properties
      id
    }
  }
}


Notes: 

  • The most difficult part here might have been working out the type. Here the query expects Page to be an integer. The documentation panel confirms this:
Document image

  • From the documentation panel, you can also see "= 1" after the type. This is a default, which means if no variable is passed through, the variable will be given a default value of 1. Not all variables will have defaults.
  • The type here does not have an exclamation mark ! so the query won't deliberately fail if no value is passed in.
  • We set per_page to 3 

Step 2) Sync the Query to the Site using Siteglide-CLI

Document image


Refer back to Tutorial 5 to refresh these steps.

Step 3) Adding the HTML Controls

We gave you these in the tips. You'll have needed to add them on a Page of your choice.

HTML
|
<ul>
  <li><a href="{{context.headers.PATH_NAME}}?page=1">1</a></li>
  <li><a href="{{context.headers.PATH_NAME}}?page=2">2</a></li>
  <li><a href="{{context.headers.PATH_NAME}}?page=3">3</a></li>
</ul>


Pressing one of the buttons will redirect us to the same Page, but will be adding a page query parameter to the URL. This is the easiest way to pass variables to Liquid- because Liquid runs before the Page loads, and the URL is one of the only available sources of dynamic information at this point. It's also possible to pass information to Liquid on another Page via an XHR request. This can lead to smoother UX, but is more challenging and will be covered in a future tutorial.

Step 4) Reading the URL Parameters

Let's say we pressed the second button, our relative URL will now be:/my-page-slug?page=2

As we showed you in the tips, Liquid can read this parameter at the following dot-notation path. This will output the value on the Page: {{context.params.page}} Or you can store this in a variable, which we'll need to do here: {% assign current_page = context.params.page %} By the way, the keys in context.params are dynamically generated for any query parameter in the URL, so you can pass through any variable you like with this method.

Step 5) Feeding the Variables into the Query

a) First, let's set a default value, just in case a User arrives at the Page without setting the Parameter: {% assign current_page = context.params.page | default: 1 %} b) The query is expecting an integer, so let's apply an Integer filter that will change the type to an Int without changing the value: {% assign current_page = context.params.page | default: 1 | plus: 0 %}

c) Let's add the graphql tag with the variable parameter.

HTML
|
{% assign current_page = context.params.page | default: 1 | plus: 0 %}

{% graphql my_result = "gallery_by_page",
page: current_page
%}


Step 6) Output the Results

We can output the results using the variable name we defined in the graphql tag.

HTML
|
{% assign current_page = context.params.page | default: 1 | plus: 0 %}

{% graphql my_result = "gallery_by_page",
page: current_page
%}

{{my_result}}


If pressing the HTML anchors changes the results by fetching different "pages" of JSON results, you've been successful. Congratulations.

If you're having difficulty with any of these steps still, please don't hesitate to ask for help on the Forum. 

Full Code

Liquid

HTML
|
{% graphql my_result = "gallery_by_page",
page: current_page
%}

<pre>{{my_result}}</pre>

<ul>
  <li><a href="{{context.headers.PATH_NAME}}?page=1">1</a></li>
  <li><a href="{{context.headers.PATH_NAME}}?page=2">2</a></li>
  <li><a href="{{context.headers.PATH_NAME}}?page=3">3</a></li>
</ul>


GraphQL

GraphQL
|
query gallery_by_page($page: Int) {
  models(per_page: 2, page: $page, filter: {model_schema_name: {value: "webapp_1"}}) {
    current_page #optional
    results {
      properties
      id
    }
  }
}


Optional- Taking this further

The next steps give you ideas for how to take this further. They are not part of the initial challenge!

Step 7) Output a Layout (Optional)

These JSON results don't look great. Remember, you can use Liquid to pass the results into a Layout- if you can find that Layout's relative path in Code Editor. 

HTML
|
{% assign current_page = context.params.page | default: 1 | plus: 0 %}

{% graphql my_result = "gallery_by_page",
page: current_page
%}

{% assign result_array = my_result.models.results %}

{% for this in result_array %}
  {% include 'layouts/webapps/webapp_1/list/my_layout_name', this: this %}
{% endfor %}


However, you won't have access to the user-friendly names for fields in that Layout, because GraphQL will output the raw database IDs for fields. 

You'll want to target fields in this Layout with syntax like:{{this.properties.webapp_field_1_2}} 

You can view the database IDs for fields in the Admin using the toggle in the top-right of the screenshot, or you can look at the keys in the JSON results.

Document image


Step 8) Use the Results of the Query to only show buttons you need. (Optional)

By returning total_pages from the query, we'll know exactly how many Pagination buttons to display:

GraphQL
|
query gallery_by_page($page: Int) {
  models(per_page: 3, page: $page, filter: {model_schema_name: {value: "webapp_1"}}) {
    current_page
    total_pages
    results {
      properties
      id
    }
  }
}


You can then use this to manipulate the HTML pagination controls:

HTML
|
<ul>
  {% for page in (1..my_result.models.total_pages) %}
    <li><a href="{{context.headers.PATH_NAME}}?page={{page}}">1</a></li>
  {% endfor %}
</ul>


Next Time

Next time, we'll learn how to sort the results of your Query.

Let's go!

Updated 03 Mar 2023
Did this page help you?
Yes
No
PREVIOUS
Tutorial 6 - Variables
NEXT
Tutorial 7 - Sorting
Docs powered by archbee 
TABLE OF CONTENTS
Challenge Objective
Step 1) Writing the Graph Query
Step 2) Sync the Query to the Site using Siteglide-CLI
Step 3) Adding the HTML Controls
Step 4) Reading the URL Parameters
Step 5) Feeding the Variables into the Query
Step 6) Output the Results
Full Code
Optional- Taking this further
Step 7) Output a Layout (Optional)
Step 8) Use the Results of the Query to only show buttons you need. (Optional)
Next Time