Ready to build or manage menus?

Want to understand Menus better?

This will show you how and help you decide if using a dynamic single Form or multiple Forms is right for your Use Case.

Prerequisites

• This Article is written for Secure Zones version 1.2.0. Some of the contents may not apply to earlier versions.

Introduction

Secure Zones are a useful tool for managing which Users will have access to content on a Site.

To give a User access to one or more Secure Zones, you can attach Secure Zones to a Form. The default behaviour is that a Form will Sign Up a User to all the Form's Secure Zones.

However, it is possible to change this behaviour using a hidden field on the Form Layout. This hidden field's value will by default contain all Secure Zones attached to the Form, but can be modified to contain only a sub-set of those Secure Zones.

Continuing to Apply the Exact List of Secure Zones Attached to the Form

If you wish to add single or multiple Secure Zones to a Form and have all those Secure Zones applied to the User with a single Form submission, this continues to be default behaviour and you don't need to do anything different.

You can also remove the hidden field from your Form to keep the default behaviour and avoid any front-end changes: <input id="s_sz_id" value="55665" type="hidden">

An Example Use Case

In this example, let's assume you have the following Secure Zones on your Site:

• Public UK

• Public USA

• Private Employees Only

In this example, we want any Users to be able to complete the "Public Sign Up" Form.

Users filling out this Form will choose their location and we'll automatically change the Secure Zone to match either "Public UK" or "Public USA" depending on their preference.

We do not want ordinary Users accessing the "Private Employees Only" Secure Zone, so we want to be able to exclude this from the options and prevent malicious Users from manipulating the Front End code and gaining access.

Step 1) Setting Up the Sign Up Form in Admin to Create an Allowed List

In the configuration for the "Public Sign Up Form" in the Siteglide Admin, we can attach the public Secure Zones to the Form: "Public UK" and "Public USA".

By default, the Form will assign Users to both these Secure Zones, but we'll change that later.

A Note on Security

The important thing at this stage is that we have not added "Private Employees Only" to the Allow List.

Thanks to this choice, malicious Users with knowledge of developer tools and JavaScript will not be able to manipulate the Public Form to add them to the "Private Employees Only" Secure Zone.

A malicious User from the USA may use Front End code to Sign themselves up to the "Public UK" Secure Zone, just as a malicious User could be untruthful on a Form. But by attaching both Secure Zones to the Form, the Partner or Client is making a clear decision that these "public" Secure Zones are both safe. By safe, we mean nobody will see content they shouldn't if they complete this Form- even if they switch to another zone.

It is the responsibility of Partner and Client to make sure that if a User has access to a Form, that Form only has Secure Zones attached that it would be safe for that User to access.

Step 2) Adding User Input

In this example, we'll use a Form Field to provide User Input which will change the active Secure Zone dynamically. This is optional, as you may have other reasons for assigning a particular Secure Zone.

Step 3) Creating a Custom Form Layout

In order to dynamically assign Users to the correct public Secure Zone, we'll need to create a custom Form layout.

A quick tip for setting up the Custom Layout quickly is to start by copying and pasting the content of the default Layout.

Step 4) Add the Form to a Page

Step 5) Adding JavaScript to the Custom Form Layout

In the code from the default Layout that we've copied, we can see the dropdown field that my Users will use to select their location (and thanks to the code we will write now, their Secure Zone).

We can also see the hidden field that we must change the value of in order to change the active Secure Zone: <input id="s_sz_id" value="743,744" type="hidden"> Note- this includes the IDs of the Secure Zones, not their names, so Admin should be referenced so that you know which is which.

The JavaScript will need to select the "#form_field_12_1" element, watch for a change event and then select and change the value of the "#s_sz_id" element.

Create a nested Menu Structure using the Pages you've built and customise its layout

Menu Builder automatically displays existing pages on the left-hand side for you to add to the menu, which is on the right hand side. To add menu items that link to WebApp items, or to external links; add an existing page and click on the link icon to edit the fields. You can fully customise all fields from here.

Syntax

{%- include 'menu'
    id:'6560'
    layout: 'default'
    name: 'Main Navigation' 
-%}

Parameters

• id - the Menu's ID

• layout - default is /default/ - 'layout' values are relative to the folder: layouts/modules/menu (module_2)/[layout name]

• name - name of the Menu

Liquid Tags

| outputs all top level menu items with li. Should be used in wrapper.liquid | | Current Level Name | {{ this\['link\_name'] }} | outputs Menu item name. Should be used in item.liquid | | Current Level URL | {{ this\['link\_url'] }} | URL of the item | | Current Level custom class | {{this\['link\_class']}} | Class field contents for current item | | Sub Levels Menu Items || outputs all sub level menu items with the current layout applied. Should be used in item.liquid. This essentially creates a loop until it reaches the bottom level of your menu | | Mark As Parent | {{ this\['is\_parent'] }} | an invisible field used to define if an item has sub-items or not. If item has sub items it's value will be: true if an item does not have sub items it's value will be: false |

Layout Files

Menu Builder Module layouts are stored in the following folder structure, which you can view via Code Editor: layouts/modules/Menu (module_2)/

Within this module folder you will find the following layout folders:

• default/ - the layout folder

  • item.liquid - menu item file

  • wrapper.liquid - menu item wrapper file

Example - wrapper.liquid

The wrapper file is used to wrap the menu item output and should contain the liquid for outputting the menu items. You can wrap your menu with any content you'd like, such as a plain <ul> tag, or a section wrapper with a title.

<ul>
	{% include 'modules/siteglide_menu/get/get_items'
		item_layout: 'item' 
	-%}
</ul>

Example - item.liquid

The item file is the chosen output for our items. In this example we've got two cases being used.

{% if this['is_parent'] -%}
  <li>
    <a href="{{this['link_url']}}">{{this['link_name']}}</a>
    {% comment %} Wrap children in ul, set the next level, and then get the children {% endcomment %}
    <ul>
      {% assign _next_level = _level | plus: 1 -%}
      {% include 'modules/siteglide_menu/get/get_items'
         level: _next_level
         parent_id: this['forced_id']
         item_layout: 'item' 
      -%}
    </ul>
  </li>
  {% comment %} Else just output the item by itself {% endcomment %}
{% else -%}	
  <li>
    <a href="{{this['link_url']}}">{{this['link_name']}}</a>
  </li>
{% endif -%}

1. The item is a parent, so has sub items.

• This means we output the item, and then increment the 'level' value in order to output this item's sub-items.

• In this case, we use the same item output for every level. You may want a different file for each level. To do that, on line 8 you should set the item_layout as 'level2' for example. Then you should create a new copy of this 'item' file called 'level2' and put your new layout for the second level there. Alternatively, you can target each level in an

statement, but we suggest using new files to separate the layouts more easily.

• Since we use this same layout for every level, it loops until the bottom level, where the item is no longer a parent.

2. The item has no sub-items

• This means we simply output the item, and nothing else.

We provide the Liquid for Sign Up, Login and Password Reset Forms and for checking if the current User is signed in

Introduction

In this Article we'll provide the Liquid which can be used to manage access to . It can be used across most Liquid Files (excluding emails).

Syntax

Log In

<div data-gb-custom-block data-tag="-" data-0='login_form' data-1=', layout: ' data-2='default' data-3=', redirect: ' data-4='/'></div>

Log In / Sign Up

<div data-gb-custom-block data-tag="-" data-0='form' data-1='form' data-2='1' data-3='1' data-4=', layout: '></div>

This is the same syntax for inserting a custom Form, where the id parameter should be the id of your Form. See the section to learn more.

Once you have created a Form, you can select the Form from Toolbox and it will dynamically fill in the ID for you.

Log Out

<div data-gb-custom-block data-tag="-" data-0='logout_button' data-1=', layout: ' data-2='default'></div>

Recover Password Flow

Recover Password Form

The recover password form is the first step in recover password flow. Users should be presented with this form as they first realise they've forgotten their password. Completing the form sends an email to the provided address containing next steps.

By default, a system page will already be created on your site at /system/recover-password, which can be found in Admin under Site Manager/System Pages . You can edit that page, or add the form to a new page with the tag:

Password Reset Email

You can find and edit the Password Reset email in the Siteglide Admin under Site Manager/System Emails

It must contain a link to the dynamically generated URL: {{context.exports.reset_password.data.reset_password_url}}.

This will be the system page /system/reset-password with a dynamically generated token attached as a parameter.

Reset Password Form

This is the last step in the recover password flow where the user has already clicked the link in the email. If the token in the link is correct, they will be able to complete the form and their password will be changed.

This form should normally be outputted on the /system/reset-password System Page, as this is where the dynamic link from the email will point. You can optionally redirect users back to the page where they can sign in with their new password.

Liquid Tags

These Liquid tags can be outputted in most contexts to get you quick information about a logged in user. They are not currently supported inside emails.

Step 1: Create a Menu or Edit and Existing:

Menu Builder sits under Modules and within there you will see any existing Menus or can create a new one:

Step 2: Manage Items

Add Pages and use the drag and drop tool to re-order or create hierarchy/drop-downs:

Step 3: Edit Items

You can edit the Name, URL, Target and Custom Classes of any items:

The most likely Target setting you'd want to add would be '_blank', this would open in a new tab when clicked:

If you know any specific CSS classes you can add them, this might be to define an item as a parent item for example.

How to create a Secure Zone using GraphQL via the CLI

Secure Zones are simply a Model object within Siteglide, with this in mind, we can very easily create Secure Zones via the CLI using GraphQL.

Prerequisites

• You have installed the Secure Zone module on the instance

• You have

• You know how to use the GraphiQL editor

Example

Below is the GraphQL mutation that is used to create a Secure Zone from Siteglide Admin.

We simply pass it the name for the Secure Zone within the query variables.

After running the mutation, you will see an ID returned in the output window of the GraphiQL editor. The ID returning means that the mutation was successful and your new Secure Zone can now be used.

Get Started with Secure Zones:

Customising Secure Zones:

Extend Secure Zones:

Step 1: Create or Edit a Secure Zone

Step 2: Manage Items

You can see any Pages/Items that are already in the Secure Zone:

To add more items go to a specific Page or Item and add it to the Secure Zone (e.g. a Page has the Secure Zone section at the bottom of the Details tab):

Step 3: Manage Users

You can also see what Users are assigned to this Secure Zone:

Again, you can add Users to a Secure Zone by going to a specific User in the CRM:

This article for developers helps you get more out of Secure Zones, as you can output basic information about the Current User dynamically.

Prerequisites

• You have installed the Secure Zones Module

• You have added a User Sign Up Form

• A User has logged in

The current_user Object

When a User signs up or logs into your site, we store basic information about that user. You can use this to make the page respond uniquely to that user.

Outputting the following liquid on the page shows the full range of fields available:{{context.current_user | json}} You can traverse through the fields in the object and output them with dot notation. E.g. {{context.current_user.first_name}} This will output the current user's first name, so you can say hello.

You could also use an if statement to run logic using this. E.g. If I want to say hello to all users with a siteglide email address:

{% if context.current_user.email contains "@siteglide.com" %}
  <p>Hello Siteglider!</p>
{% endif %}

Outputting List Views on the Front-End

Like with other Modules, you will use a Liquid Tag to output a list of Module Items on a Page, Page Template, Email or Partial Liquid File of your choice.

{%- include 'module'
    id: '17'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'properties.name'
    sort_order: 'asc' 
-%}

You can use the following parameters:

• ID - This must be set to 17 as this refers to the ID of the Media Downloads Module

• layout - The Layout Folder containing the List Layout

• per_page - How many Items should be outputted on each Page. If more Items are available than this, Pagination controls will display.

• show_pagination - if set to 'true' , pagination controls will display in the default position when more than one Page of results is available.

• sort_type - The field you'd like to sort by e.g. "properties.name", or "created_at"

• sort_order - Choose asc for ascending values or desc for descending

• category_ids - Pass in a string of comma-separated IDs of Categories to filter the List so only Items assigned to those Categories can be displayed.

• item_ids - Control exactly which Items can be displayed by passing in a string of comma-separated IDs. You can find the Items' IDs in the Admin.

• expiry - The number of seconds that the link is valid for after the page has finished loading. Default is 600 (10 minutes). Note this is different from

• expiry_date, see Available Fields.

Media Downloads Layouts

There will be a default layout once you install the module but you can create your own.

Creating a Layout File

Layouts can be created at the following path: layouts/modules/module_17/my_layout_name/

Developing a List Layout

You'll need to create a list folder in your layout folder and fill it with the following files:

• wrapper.liquid

• item.liquid

Your wrapper.liquid file should contain the following Liquid which determines where the list of Items will go:

{%- include 'modules/siteglide_media_downloads/get/get_items'
    item_layout: 'item' 
-%}

What are Media Downloads?

The Media Downloads Module allows you to upload files securely. You have control over who accesses the File, and how long links work for.

The Media Downloads Module is similar to File Manager, but is designed to handle files which need to be handled more securely. Some examples might include:

1. Files which exist behind a Secure Zone

2. eBooks and other files you may need a Subscription to access

Upload Files Securely - It is not possible for internet users to "guess" the link to your files and download them.

Generate secure links on the Front-End; each link will only be valid for a short amount of time after reloading the Page. This allows you to control who has access to the link, and how long they will have access for.

How the Media Download Links Work

When you output a link on the Front End, it contains security parameters that will be different on every Page load. The purpose of these is to tie a security key with a time-limited window to access the file. The expiry parameter will be used to denote how long the link is valid for after the page has been loaded. For example, if a user loads the page and then clicks the link 20 minutes later, the download link will already be invalid as it will be over the 10 minute default window. At this point the user will have to reload the page to generate a new valid link.

Despite this, you can use the link exactly like a normal URL to an asset, except that there is no need to use asset_url because the link goes directly to the CDN.

Available Fields

In your item.liquid file, you can use the following dynamic fields:

• {{this.id}} - The Item's unique ID

• {{this.name}} - The Item's name

• {{this.create_date}} - The date this Item was created. Use Liquid Date Filters to format it.

• {{this.last_edit_date}} - The date this Item was last edited. Use Liquid Date Filters to format it.

• {{this.file_name}} - The Module automatically works out File Name from the File itself.

• {{this.file_type}} - The Module automatically works out File Type by its extension.

• {{this.url}} - This will output the temporary secure link. See more details in the section below.

• {{this.weighting}} - Optional Field used in sorting

• {{this.release_date}} - The date this Item was released. Use Liquid Date Filters to format it.

• {{this.expiry_date}} - The date this Item will expire. Use Liquid Date Filters to format it. Note- this is different from expiry see Liquid parameters.

• {{this.category_array}} - An array of categories that the Item is assigned to.

• {{this.Description}} - A description of the Download

• {{this.size_in_kb}} - The file size of the download in Kilobytes

• {{this.size_in_mb}} - The file size of the download in Megabytes-

• {{this.size_in_gb}} - The file size of the download in Gigabytes

Ready to setup a blog?

Want to build a Blog Search?

Looking for a specific Tag?

Step 1: Install the Media Downloads Module

Go to the Modules tab on the Site in Portal and search or find Media Downloads. Then click install:

More on Installing and Managing Modules:

Step 2: Create an Item

Go to the Module and create a new Item or edit any existing Items. You can also click view table to edit the Module itself:

Give the item a name, upload a file (typically PDFs) and give it a description (optional):

Step 3: Output on a Page

You can output a link to the file on a webpage by using Toolbox:

For full control over the design and functionality you can edit the Layouts:

For a full list of fields availabe check out our Reference guide:

See general module folder strucutre for folder structure in common with all modules:

Blog module layouts may contain optional extra files for components like author lists, categories etc.

Replace "custom_example" with the name of your own custom layout. You can add as many of these as you like to the module_3 folder.

There is also a form directory for storing form layouts for front-end module/ author item submission.

General Module Reference

This reference gives you a quick guide to all the code you can use with the Blog, but some features are available to all Modules, see more:

Blog Fields

The Blog uses standard module fields as well as it's own core fields:

Blog Navigation & Filtering

As always, to use filtering on an included module layout, add the use_adv_search parameter. To allow searching, add use_search. These settings instruct this component to watch the URL for changes in URL parameters and will adjust results accordingly when the URL changes; forms, anchors or JS (for example, the SiteBuilder Live Updates API) can be used to change the URL and apply these.

By Date

(Requires use_adv_search)

Include the Archive Layout (included in the default layout, or make your own) to list all available years or months containing blog posts.

Inside an archive layout, you have access to the following variables which can be looped over to find the months in which at least one blog post was published: blog_archive_years and months_by_year

To apply filters, the URL must be given the following parameters:

• A combination of range_gt, range_gte, range_lt, range_lte to set the date range to "range greater than", "range greater than or equal to" etc., in the format: %Y-%m-%d.

• range_type - an optional convention, you can set this to e.g. "between" or "month" so that you can interpret the URL accordingly when you arrive.

• range_field - is used in Events module, but not needed here. Default is to use release date for range field

By Category

(Requires use_adv_search)

Include the following liquid to dynamically get a list of available Blog Categories for the User to select:

To apply filters, the URL must be given the following parameters:

• category - to be given the value of one or more category IDs to filter by, comma separated.

By Author

(Requires use_adv_search)

To apply filters, the URL must be given the following parameters:

• module_field_3_4 - set to a valid Author's module item ID

• author_name - an optional convention making it easier to display this when arriving at the list.

Keyword Search

Link to the page with a keyword parameter in the URL to perform a search. (Requires use_search)

Authors

Fields:

Authors uses standard module fields as well as it's own core fields:

The Article will show you how to adapt your Liquid Syntax and Blog Layouts to allow the User to Search for Posts by Keyword

Introduction

You can also allow the User to search for Blog Posts by keyword. This requires a slightly different Liquid parameter from the other navigation methods, but you can use both parameters if you choose.

Liquid Syntax

Although all other Blog Navigation options require you to set the use_adv_search: 'true' Liquid parameter, keyword search requires the use_search: 'true' parameter.

HTML and JavaScript Syntax

This code can be included in one of your Blog Navigation Layouts. Keyword Search will be activated if you've set the Liquid parameter above and the JavaScript below sets the keyword parameter in the URL.

Step 1: Install the Modules

Go to the Modules tab under the Site you want to work on in Portal and click install on Blog and Authors. They may already be installed if you're using a Template or existing site:

More on Installing and Managing Modules:

Step 2: Create Items

Go to the Module page within the Site and either edit an existing item or create a new one:

Give it a name and fill in other fields you might want to use:

Step 3: Setup the Pages/Layouts

You then need to output the Blog on the site. You'll likely want to create a Page called Blog:

You then output it on the page using Toolbox (or via CLI):

Step 4: Customising the Layouts or Functionality:

Your Blog will work out of the box but Siteglide is all about flexibility and recognising each project is different. You have total control to customise the Layouts and how the Blog works. We recommend looking at the SiteBuilder Blog Layouts as a starting point as there might be existing Layouts that can save you a lot of time.

You can dynamically output a navigation menu of Categories which have Events assigned to them. The User can then filter the Events.

Prerequisites

• You have Installed Events Module

• You have added at least one Category to an Event

Introduction

This Article will show:

• How to include this Navigation Option when including the Events List

• The Default Layouts with explanation

• How to give the User Feedback on the type of results they are seeing.

To Include this Option

Include the following liquid to dynamically get a list of available Events Categories for the User to select:

{%- include 'modules/siteglide_system/get/get_categories'
    categories_layout: 'design_system/1/categories'
    categories_layout_type: 'list' 
-%}

The parameters refer to Layouts which will be used to display the Category links.

• categories_layout should be the path to the folder in the Events Module where your Category Navigation files are stored.

• The category_layout_type is the sub-folder where the wrapper and item files are stored for filtering the Events list by category e.g. list. The category_layout_type exists because some Events layouts may have a different partial layout for Categories within a Events preview, footer or sidebar.

Default Layout Examples with Explanation

wrapper.liquid

<div class="row no-gutters">
  <div class="col-12">
    <h2>Categories</h2>
    <ul>
      {%- include 'modules/siteglide_system/get/get_items'
        item_layout: 'item' 
      -%}
    </ul>
  </div>
</div>

item.liquid

<li>
       <a
              href="{{context.headers.PATH_INFO}}?category={{this.id}}" 
              title="Category: {{this.properties.name}}"
       >
              {{this.properties.name}}
       </a>
</li>

The link should be the slug of your Events List view followed by ?category={{this.id}}. Siteglide will be able to read the Category id from the URL and populate the List View on refresh. In this example we use the context object to automatically get the slug of the current Events Page.

User Feedback - Displaying the currently applied filter

You may wish to give the User some feedback about the current filter/ search terms that are applied on the Events List. For Categories, you can use {{context.exports}} object to get the name of the category you are filtering by:

{% if context.params.category %}
  {{context.exports.categories.data[context.params.category].name}} Events
{% endif %}

The Events Module List View can be filtered by Category, Host, or by finding Events which are happening between given dates.

Introduction

The Events Module includes the following optional features for helping Users navigate the List View.

• Browse by Category

• Browse by Host (requires Authors Module)

• Browse by Month/Date - Finds Events which are happening during this month

• Search Events which are happening between two Dates

You may be familiar with many of these if you've used the Blog Module Navigation, however the main difference between them is how they handle dates; navigating the Blog Module by date would use the post's Release Date, whereas the Events Module will check to see if a given date falls between the Event Start and Event End dates.

Using the Navigation Options to Filter the Map and Calendar Views

You can use the Navigation Options on the Map and Calendar Layouts- these are List Layouts too!

However, certain features just won't have the same effect. For example, filtering the Calendar Layout by Date does not make sense- as the Calendar controls already give you an option to navigate by Date- using the Archive Navigation on the Calendar would cause certain Events to be "missing" from the Calendar, even if the User had navigated to a different month. On the other hand, it's perfectly possible that you might wish to filter the Calendar by Host or Category- to allow the User to focus on the type of Events which interest them most.

Using two List Views on the Same Page- and only filtering one of them

As the Events Navigation options are powered by URL parameters, the parameters will filter all Events List Views on the Page the same way.

If you want to provide a Calendar and an Events List together on the Page for example, and you only wish one of them to be affected by the filters in the URL, you can do so by only using the use_adv_search: 'true' parameter on the List View you want to be filtered.

User Feedback

Each Events Navigation Article will explain how you can use Liquid Logic to dynamically show the currently applied filter. Here, we'll show an example of some Logic that will check for any of the applied filters:

{% assign now = "now" | date: "%s" %}
{% if context.params.range_type == "past" %}
  <h2>Past Events</h2>
  <a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=future&range_gt={{now}}">
    Future Events</a>
{% elsif context.params.range_type == "future" %}
  <h2>Future Events</h2>
  <a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">
    Past Events</a>
{% elsif context.params.module_field_12_4 %}
  <h2>Events hosted by {{context.params.host_name | url_decode}}</h2>
{% elsif context.params.range_type == "month" %}
  <h2>Events in {{context.params.range_gt | date: "%b-%y"}}
    {{context.params.range_gte | date: "%b-%y"}}</h2>
{% elsif context.params.range_type == "between" %}
  <h2>Events between {{context.params.range_gt | date: "%d-%b-%y"}}
    {{context.params.range_gte | date: "%d-%b-%y"}} and 
    {{context.params.range_lt | date: "%d-%b-%y"}}
    {{context.params.range_lte | date: "%d-%b-%y"}}</h2>
{% elsif context.params.category %}
  <h2>Category: {{context.exports.categories.data[context.params.category].name}}</h2>
{% else %}
  <h2>All Events</h2>
  <a href="{{context.headers.PATH_INFO}}?range_field=events&range_type=past&range_lt={{now}}">
    Past Events</a>
{% endif %}

Of course, you can use this for inspiration and edit as you wish.

Related Documents

• Searching - Keyword

• Searching - Advanced Filtering

This Navigation Option can be used in combination with other Navigation Options.

Introduction

This Article will show:

• How to include this Navigation Option when including the Blog

• The Default Layouts with explanation

• How to give the User Feedback on the type of results they are seeing.

Add "use_adv_search" parameter to include for Blog List View

The "use_adv_search" parameter is needed to allow filtering from the URL to apply to your Blog Posts, this can be added to the include for Blog List like so:

{%- include 'module'
    id: '3'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'created_at'
    sort_order: 'desc'
    use_adv_search: 'true' 
-%}

To Include this Option

Include the following liquid to dynamically get a list of available Blog Categories for the User to select:

{%- include 'modules/siteglide_system/get/get_categories'
    categories_layout: 'default/categories'
    categories_layout_type: 'sidebar' 
-%}

The parameters refers to layout which will be used to display the Category links. <code>categories_layout</code>should be the root layout folder where your blog layout is contained.

The category_layout_type is the sub-folder where the wrapper and item files are stored for filtering the blog list by category. The category_layout_type exists because some blog layouts may have a different partial layout for Categories within a Blog preview, footer or sidebar.

Default Layout Examples with Explanation

wrapper.liquid

<div class="row no-gutters">
  <div class="col-12">
    <h2>Categories</h2>
    <ul>
      {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
    </ul>
  </div>
</div>

item.liquid

<li>
    <a href="{{context.location.pathname}}?category={{this.id}}">{{this.properties.name}}</a>
</li>

The link should be the slug of your Blog List view followed by ?category={{this.id}}. Siteglide will be able to read the Category id from the URL and populate the List View on refresh. In this example we use the context object to automatically get the slug of the current Blog Page.

User Feedback

You may wish to give the User some feedback about the current filter/ search terms that are applied on the Blog list page. For Categories, you can use <code>context.exports</code> object to get the name of the category you are filtering by:

{% if context.params.category %}
  Posts about {{context.exports.categories.data[context.params.category].name}}
{% endif %}

Combining the Blog and Author Modules allows you to filter the Blog posts by a specific Author's posts.

Introduction

This article explains:

• How to include the Browse by Author Option when including a Blog List

• Default Layout Examples

• How to give feedback to the User about their results e.g. in the screenshot "Posts by Regina Alexander"

Add "use_adv_search" parameter to include for Blog List View

The "use_adv_search" parameter is needed to allow filtering from the URL to apply to your Blog Posts, this can be added to the include for Blog List like so:

{%- include 'module' 
    id: '3'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'created_at'
    sort_order: 'desc'
    use_adv_search: 'true' 
-%}

To Include this Option

Include the following liquid to dynamically get a list of available Blog Authors for the User to select.

{%- include 'modules/siteglide_authors/get/get_authors'
    author_layout: 'default/author'
    author_layout_type: 'sidebar'
    author_field: 'module_field_3_4' 
-%}

The author_field will be module_field_3_4 if you are using Siteglide's Authors Module. The layouts are structured in the same way as Category Layouts in the previous section.

Default Layout Examples with Explanation

wrapper.liquid

<div class="row no-gutters">
  <div class="col-12">
    <h2>Authors</h2>
    <ul>
      {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
    </ul>
  </div>
</div>

item.liquid

<a class="authorAnchorSidebar" href="{{context.location.pathname}}?module_field_3_4={{this.id}}&author_name={{this.name | url_encode}}">
{% if this['Image'] -%}
    <img src="{% if this['Image'] contains 'http' -%}{{this['Image']}}{% else -%}{{this['Image'] | asset_url}}{% endif -%}" alt="{{this['Image Alt']}}">
  {% endif -%}
  <li>{{this['name']}}</li>
</a>

To filter the Blog List View, you need a link to the Blog List View slug, followed by "?module_field_3_4={{this.id}}". Siteglide will be able to read the URL and filter the list.

User Feedback

To make it easier to give feedback to the User, you can optionally include the Author's name in the url:

<a href="{{context.location.pathname}}?module_field_3_4={{this.id}}&author_name={{this.name | url_encode}}"></a>

On the List view, you can then include the following liquid to read the URL and decode the Author name you are currently filtering by:

{% elsif context.params.module_field_3_4 %}
  Posts by {{context.params.author_name | url_decode}}
{% endif %}

Step 1: Install the Events Module

Install from the Modules tab on the Site you're working on from Portal:

For more information on how to install and manage modules:

Step 2: Create Event Items or Edit Existing

Create or manage existing items:

Give it a name and fill in any other fields:

Step 3: Setup the Pages/Layouts

You then need to output the Events on the site. You'll likely want to create a Page called Events:

Step 4: Customising the Layouts or Functionality:

Your Events will work out of the box but Siteglide is all about flexibility and recognising each project is different. You have total control to customise the Layouts and how the Events Module works. We recommend looking at the SiteBuilder Events Layouts as a starting point as there might be existing Layouts that can save you a lot of time.

The Events Module is linked to eCommerce Module, to give you full functionality and flexibility when selling Tickets (or other Products) related to Events.

Ready to build Events?

Want to Filter Items?

Want to Customise the Module Further?

Introduction

Once you've added a Host to Events, you can use Datasources to output the Host's Details on the Event List or Detail Layouts.

Syntax

Add the following Liquid:

The Article will show you how to adapt your Liquid Syntax and Events Layouts to allow the User to Search for Events by Keyword

Introduction

You can also allow the User to search for Events by keyword. This requires a slightly different Liquid parameter from the other navigation methods, but you can use both parameters if you choose.

Liquid Syntax

Although all other Events Navigation options require you to set the use_adv_search: 'true' Liquid parameter, keyword search requires the use_search parameter.

If you wish to use both types of Navigation for your Events, you can set both types of search parameter to 'true'.

HTML and JavaScript Syntax

This code can be included in one of your Events Navigation Layouts. Keyword Search will be activated if you've set the Liquid parameter above and the JavaScript below sets the keyword parameter in the URL.

Searching and Filtering at the Same Time

The following example also filters for future Events at the same time as it searches for keywords. You need to have set both use_search and use_adv_search parameters in the Liquid (see Syntax section above). You can adjust the JavaScript to remove this, or switch it to fetch Events in the Past.

The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database.

Prerequisites

• You've Installed the Events Module

• You've added Events in the Admin

• You've

Introduction

The Map Layout is a List Layout which demonstrates how you can use the Google Maps API to visualise Events from the Siteglide database. In order to use this Layout, you'll need to and follow the instructions to generate an API key.

We've tried to expose just enough of the JavaScript to allow you to customise your Layout, while keeping as much Liquid as possible tucked away to keep things simple. Despite this, you will need to refer to the for any advanced customisation work you'd like to carry out.

Outputting the Map Layout on a Page

The Events Module Map Layout is an example of a List Layout. Like all List Layouts, you can output the Events Module Map Layout in any Liquid File, including Pages, Templates and Layouts. However, it also requires JavaScript to function properly, so it will not be supported inside an Email e.g. Autoresponder or Workflow.

To output the map, output the List Layout as normal, and choose a Map Layout in the layout parameter.

There are a few parameters which work particularly well on the Map Layout, because we will want to disable Pagination and show all enabled and released Events at once:

• per_page: 5000 - Makes sure the first Page shows all Events that are enabled and released

• show_pagination: 'false' - Hides Pagination Controls

You can use filtering Parameters as normal to filter Events and only show some on the Map.

• category_ids - Add a comma-seperated string of Category IDs to display

• item_ids - Add a comma-seperated string of Item IDs to display

You can also use URL parameters to carry out advanced filtering.

How does the Map Layout Convert Event Locations to a JavaScript array?

You'll notice in the wrapper.liquid file that the ordinary Liquid which fetches the item.liquid files is outputted inside a JavaScript <script> element. This is very important as it allows the Liquid data to be converted to the JavaScript array that Google Maps needs.

The item.liquid file should be left in the format of a JSON object, but you may choose to add more variables:

Here, we also use Liquid Logic to check for Events with no location data set and exclude them from the List.

Clustering

The following behaviour was chosen by us for convenience and demonstration purposes, but can be changed by following the Google documentation.

If any markers are too close to each other, they will be "clustered" under a clustering marker, which will display a number for the number of Events in that location:

Clicking on the clustering marker will zoom in by an increment of 1, unless the User is at maximum zoom. As soon as we have zoomed in enough to display more of the markers without causing confusion, we will do so:

If we reach maximum zoom and some Events are still clustered (perhaps at the same location), the next click on the clustering marker will reveal an "infowindow" containing details on all Events at that location:

Customising the Map

We've split the JavaScript for the Map Layout into two files:

• wrapper.liquid - Here we define the variables which form the key "settings" needed to to set up the Map the way you want it

• assets/js/modules/module_12/default_map.js - This contains the rest of the code needed to make the map functional. For advanced developers who wish to edit using the Google Maps API docs, you can edit this file.

Customising the Options

These options are all explained by comments in the wrapper.liquid JavaScript. Make sure to follow each line except the last with a comma:

• map_selector: "#map" - The Selector for the Element into which you want to render the map.

• zoom: 3 - Sets the initial zoom on the Map. 1 is minimum and 22 is maximum.

• center: false - Sets the initial center of the Map. Should be in format {lat: Float, lng: Float} or false. If false, we will find the mid-point between all event locations and center there.

• show_info_windows: true - Info Windows give the event information as a modal when you click an event marker.

• markers.animation: - Select an animation option from the Google Maps Documentation. String e.g. "DROP".

• show_summary: false - Shows a summary of the Events visible on the current Map Viewport.

• summary_selector: "#mapSummary" - Selector for Element which will contain any summary. String

Customising the Event Detail Popups (infowindows)

To do this, you'll need to carefully edit the default_map.js file. You'll need to understand how to concatenate Strings and Variables in JavaScript to construct a larger String containing HTML code.

We keep the infowindows for markers and clusters separate. This is because they use different variables, and because it allows you to be more flexible.

1 - Define infowindow HTML for markers

Find the comment in the code: //Define infowindow for markers

Next, you'll need to edit the variable here. It's value should be an HTML String containing the content you'd like for the infowindow. You can move the variables around however you like, as long as the syntax remains correct!

2 - Define infowindow HTML for cluster markers

Find the comment in the code: //--Cluster Markers--- Add a marker clusterer to manage the markers.

Next, you'll need to edit the variable here:

This is slightly more complicated, because the JavaScript will loop over this and display it for each Event inside the cluster at this level of zoom.

3 - Edit the CSS

As normal, you can use custom CSS to edit the styling of any of the infowindows. Use any classes you added in the previous two steps to target them.

Customising the Map - Advanced- Following Google's Documentation

You'll be able to make changes in:

• The Page

• item.liquid and wrapper.liquid file

• default_map.js file

If you'd like to see the core functionality of the Events Module expanded, please make a suggestion on the Roadmap and we'll consider it for a future release.

We'll explain how to output a List View of Events and link you to the docs on advanced Filtering and Navigation

Introduction

The Events Module comes with a wide range of options for your List View. You can output Events as:

• A standard List

You can also use our with any of these views.

Outputting a List View

You can output a List View in any Liquid File - that means:

• Pages

• Templates

• Headers

• Footers

• Layouts

• Code Snippets

• Content Sections

Basic List views will also work in workflow and auto-responder emails, but be aware that any features which depend on JavaScript or URL parameters will not be supported in this context- that includes the Map and Calendar Layouts.

Use the following Liquid Syntax to output an Events List view:

This option allows you to provide the User with links to months when Events are happening - or let them Search between any two dates.

Prerequisites

• You've installed the Events Module

• You've updated your System Files to at least version 2.4.4.0

Introduction

This article will show:

• How to add a parameter to the main Events Module "include" Liquid Tag to enable advanced filtering by Event Start and Event End dates.

• How to include the Archive Navigation Feature

• An explanation of the three main sub-Layouts available in in the Default Layout: (1) Search Between Two Dates (2) Browse By Months (3) Browse by Months under Year Header.

• How to give User Feedback about Search Results

Add "use_adv_search" parameter to include for Event List View

The "use_adv_search" parameter is needed to allow filtering from the URL to apply to your Event Items, this can be added to the include for Event List like so:

Past Events and Future Events

By default, the List View will show all Events that are enabled, released and not yet expired.

If you just want to filter the List so it either shows Events that have already happened in the Past- or those Events which will happen in the Future, it may not be necessary to include the entire Archive Feature.

Filter by Past Events

Filter by Future Events

Using Liquid Logic to "Toggle" between Past and Future Events

Including the Archive Navigation Feature

Firstly, you will need to provide the following Liquid to include your Archive layout:

Parameters

• archive_layout-The layout parameter refers to the main layout folder followed by a path to the folder storing any archive layouts you are using. In the example, an /archive folder is used.

• archive_layout_type- The type parameter refers to the name of the Archive Layout file.

In the default/archive/ folder we have 3 different optional types of Archive Layout you can choose by entering their names in the type parameter. We will show the liquid tag for including each.

Include: Browse By Months

Include: Browse By Months Under Years Header

Include: Search Events Between Two Dates

Events Archive Layouts

The following examples will take you through the different options:

Browse by Month

In this example, we use the events_archive_months object and loop over the array. For each iteration, a URL link is outputted which has three range parameters:

• `range_gte` = An epoch format date for midnight on the beginning of the first day of the selected month

• range_lt = The date above + 1 month. We don't use lte because the date is the first valid date in the next month- we want every date up until then.

• range_field =events - This parameter is important as it makes sure that the Event Start and Event End fields are used instead of Release Date for the filtering.

Browse by Months, organised into Years

This Layout does not just organise the Months available under the relevant Year Headers, it also will skip any Years without an Event.

This example uses the same links as the previous one. However, it also organises the links into the years in which they belong by first looping over the years in the events_archive_years and then using the group_by liquid filter and another loop to output the month links grouped under the current iteration's year. Learn more about this Liquid at the pOS docs:

Search Events between two dates

In the Default Layout, this Option also includes the Previous "Browse by Months Organised into Years" Option for convenience- though the code can be simply removed if you prefer. We have removed it in this article's example.

It also adds a Form for directly manipulating the URL parameters to find the exact dates the User is interested in.

In this example a form is used to take user input. The Siteglide function automatically adds the dates to the URL parameters in the correct format. You can rewrite the error function to customise the way the form handles invalid dates entered.

***A note about Date Entry Inputs on different Browsers ***Different Browsers may display the Date Input fields very differently. 3rd party Javascript Plugins are available for making sure these display with your desired Design.

Custom Layouts

This is a relatively complex feature, so some understanding of Liquid will be necessary to understand how to create a Custom Layout. The best way to start would be to copy one of the Default layouts and edit it to provide the changes you need.

Any Layouts included with the above Liquid will get access to the events_archive_years and events_archive_monthsarrays, which contain detailed data about the years and months respectively which contain valid Events. This can be used to generate dynamic buttons to the User so they can browse.

events_archive_years

events_archive_months

The following URL Parameters will cause Results in the List to Filter:

• range_gt - greater than

• range_gte - greater than or equal to

• range_lt - less than

• range_lte - less than or equal to

For the above to work, remember to set the use_adv_search: true parameter (see start of article)!

The pOS documentation website has some useful tips on how to use liquid to convert date formats and manipulate dates and times. See the following useful filters, and browse the docs for more:

Feedback for the User - Displaying the currently applied filter

In the examples, you may notice another URL parameter is used: range_type. The s_events_date_search Siteglide function for filtering Events by user-inputted dates adds the parameter range_type="between". This would allow the following liquid on the List Layout to identify that this search is between two dates:

Whereas, you could use another range_type to indicate that different feedback should be given to the User. e.g. the parameter month in this example changes the sentence structure from "Events between" to "Events in" to communicate the different kind of filtering that is now taking place.

Note- in both of these examples- the gte and gt dates are both outputted- this is because only one is expected to be available. The Layout is designed to accept either

This Option Lets you filter Events by Host

Prerequisites

• You have installed the Events Module

• You have installed the Authors Module

• You have added at least one Author as an Event Host

Introduction

This article explains:

• How to include the Browse by Host (Author) Option when including a Blog List

• Default Layout Examples

• How to give feedback to the User about their results e.g. in the screenshot "Events hosted by Regina Alexander"

Add "use_adv_search" parameter to include for Event List View

The "use_adv_search" parameter is needed to allow filtering from the URL to apply to your Event Items, this can be added to the include for Event List like so:

{%- include 'module'
    id: '12'
    layout: 'default'
    per_page: '20'
    show_pagination: 'true'
    sort_type: 'created_at'
    sort_order: 'desc'
    use_adv_search: 'true' 
-%}

To Include this Option

Include the following liquid to dynamically get a list of available Event Hosts for the User to select.

{%- include 'modules/siteglide_authors/get/get_authors'
    author_layout: 'design_system/1/author'
    author_layout_type: 'list'
    author_field: 'module_field_12_4' 
-%}

The author_field will be module_field_12_4 if you are using Siteglide's Authors Module. The layouts are structured in the same way as Category Layouts in the previous section.

Default Layout Examples with Explanation

wrapper.liquid

<div class="row no-gutters">
  <div class="col-12">
    <h2>Authors</h2>
    <ul>
      {%- include 'modules/siteglide_system/get/get_items', item_layout: 'item' -%}
    </ul>
  </div>
</div>

item.liquid

<a
  class="authorAnchorSidebar" 
  href="{{context.location.pathname}}?module_field_12_4={{this.id}}&author_name={{this.name | url_encode}}"
>
{% if this['Image'] -%}
    <img src="{% if this['Image'] contains 'http' -%}{{this['Image']}}{% else -%}{{this['Image'] | asset_url}}{% endif -%}" alt="{{this['Image Alt']}}">
  {% endif -%}
  <li>{{this['name']}}</li>
</a>

To filter the Blog List View, you need a link to the Blog List View slug, followed by "?module_field_12_4={{this.id}}". Siteglide will be able to read the URL and filter the list.

User Feedback - Displaying the currently applied filter

To make it easier to give feedback to the User, you can optionally include the Host's name in the URL:

<a href="{{context.location.pathname}}?module_field_12_4={{this.id}}&host_name={{this.name | url_encode}}"></a>

On the List view, you can then include the following liquid to read the URL and decode the Author name you are currently filtering by:

{% if context.params.module_field_12_4 %}
  Events hosted by {{context.params.host_name | url_decode}}
{% endif %}

Syntax

{%- include 'module'
    id: '10'
    layout: 'design_system/2'
    per_page: 20
    sort_type: 'created_at'
    sort_order: 'desc' 
-%}

Parameters

• id - the Module's ID

• item_ids - output one or more module items, comma seperated

• category_ids - output all items in one or more categories, comma seperated

• layout - default is default.liquid - 'layout' values are relative to the folder: layouts/modules/FAQ (module_10)/[layout name]

• per_page - defines the number of items outputted on the page

• show_pagination - default is true - defines if items should be paginated when the per_page is met.

• sort_type - defines the type by which items are ordered

  • properties.name - name of the Module item (alphabetical)

  • created_at - date the Module item was created

  • updated_at - date the Module item was last edited

  • properties.weighting - weighting of the Module item

  • properties.release_date - date the item is set to be released

• sort_order - defines the order in which the type is sorted

  • asc - sort items in ascending order

  • desc - sort items in descending order

• collection - default is 'false' - If you set it as collection: 'true' then any layout is suppressed.Data is accessible via {{context.exports.webapp_1.data}}. For Example, name would be: {{context.exports.webapp_1.data.result.items[0]['name']}}

Liquid Tags

Layout Files

FAQ Module layouts are stored in the following folder structure, which you can view via Code Editor: layouts/modules/FAQ (module_10)/

Within this module folder you will find the following layout folders:

• default/ - the default layout folder

  • detail/ - full page layouts folder

    • item.liquid - detail item content file

    • wrapper.liquid - detail item wrapper file

  • list/ - page section layouts folder

    • item.liquid - list item content file

    • wrapper.liquid - list item wrapper file

This Module lets you add Testimonials to your Site dynamically, so you can keep them updated in the Admin.

Syntax

{%- include 'module'
    id: '8'
    layout: 'design_system/10'
    per_page: 20
    sort_type: 'properties.name'
    sort_order: 'asc' 
-%}

Parameters

• id - the Module's ID

• item_ids - output one or more module items, comma seperated

• category_ids - output all items in one or more categories, comma seperated

• layout - default is default.liquid - 'layout' values are relative to the folder: layouts/modules/Testimonials (module_8)/[layout name]

• per_page - defines the number of items outputted on the page

• show_pagination - default is true - defines if items should be paginated when the per_page is met.sort_type - defines the type by which items are ordered

  • properties.name - name of the Module item

  • created_at - date the Module item was created

  • updated_at - date the Module item was last edited

  • properties.weighting - weighting of the Module item

  • properties.release_date - date the item is set to be released

• sort_order - defines the order in which the type is sorted

  • asc - sort items in Ascending order

    • desc - sort items in descending order

• collection - default is 'false' - If you set it as collection: 'true' then any layout is suppressed.Data is accessible via {{context.exports.webapp_1.data}}. For Example, name would be: {{context.exports.webapp_1.data.result.items[0]['name']}}

Liquid Tags

Layout Files

Testimonials Module layouts are stored in the following folder structure, which you can view via Code Editor: layouts/modules/Testimonials (module_8)/

Within this module folder you will find the following layout folders:

• default/ - the default layout folder

  • detail/ - full page layouts folder (default not in use)

    • item.liquid - detail item content file

    • wrapper.liquid - detail item wrapper file

  • list/ - page section layouts folder

    • item.liquid - list item content file

    • wrapper.liquid - list item wrapper file

Step 1: Install the FAQ Module

Install from the Modules tab on the Site you're working on from Portal:

For more information on how to install and manage modules:

Step 2: Create FAQ Items or Edit Existing

Create or manage existing items:

Give it a name and fill in any other fields:

Step 3: Setup the Pages/Layouts

You then need to output the FAQs on the site. You'll likely want to create a Page called FAQs or maybe insert it as a Section/Block on another page:

Step 4: Customising the Layouts or Functionality:

Your FAQ Module will work out of the box but Siteglide is all about flexibility and recognising each project is different. You have total control to customise the Layouts and how the FAQ Module works. We recommend looking at the SiteBuilder FAQ Layouts as a starting point as there might be existing Layouts that can save you a lot of time.

Ready to Use the Testimonials Module?

Looking for a Specific Tag?

Step 1: Install the Testimonials Module

Install from the Modules tab on the Site you're working on from Portal:

For more information on how to install and manage modules:

Step 2: Create Testimonial Items or Edit Existing

Create or manage existing items:

Give it a name and fill in any other fields:

Step 3: Setup the Pages/Layouts

You then need to output the Testimonials on the site. You'll likely want to create a Page called Testimonials or maybe insert it as a Section/Block on another page:

Step 4: Customising the Layouts or Functionality:

Your Testimonials will work out of the box but Siteglide is all about flexibility and recognising each project is different. You have total control to customise the Layouts and how the Testimonials Module works. We recommend looking at the SiteBuilder Testimonials Layouts as a starting point as there might be existing Layouts that can save you a lot of time.

Get Started with the FAQ Module

Looking for a Specific Tag?

What are Core Modules?

'Core Modules' or 'Siteglide Modules' are built by Siteglide and are optional features you can choose to install per site. Other Modules are likely Community built. More information on our Marketplace page:

The Core Modules:

These can all be installed from Marketplace ( ) or the Modules tab on a Site ( ) :

Step 1: Install the Slider Module

Install from the Modules tab on the Site you're working on from Portal:

For more information on how to install and manage modules:

Step 2: Create Slider Items or Edit Existing

Create or manage existing items:

Give it a name and fill in any other fields:

Step 3: Setup the Pages/Layouts

You then need to output the Slider items on the site. You'll likely want to insert it as a Section/Block on another page:

Step 4: Customising the Layouts or Functionality:

Your Slider Module will work out of the box but Siteglide is all about flexibility and recognising each project is different. You have total control to customise the Layouts and how the Slider Module works. We recommend looking at the SiteBuilder Slider Layouts as a starting point as there might be existing Layouts that can save you a lot of time.

Add images and content to your Slides in Admin and display on a Site either using our custom Layouts or creating your own

Prerequisites

• You've Installed the Slider Module

• You've

Introduction

Our Slider Module allows you to add images/content to Slides within the Admin, which can then be outputted as List Views either using our pre-built layouts or creating your own! We've chosen to use GlideJS for our layouts, but you can use any plugin you prefer.

Once you've installed the Slider Module on your Site, you'll be able to find Sliders in the left-hand menu under Modules/Slider. For a recap of how to install Modules on a Site, .

Syntax

Parameters

• id - the Module's ID

• item_ids - output one or more module items, comma seperated

• category_ids - output all items in one or more categories, comma seperated

• layout - default is /default/ - 'layout' values are relative to the folder: layouts/modules/Slider(module_4)/[layout name]

• per_page - defines the number of items outputted on the page

• sort_type - defines the type by which items are ordered

  • properties.name - name of the Module item (alphabetical)

  • created_at - date the Module item was created

  • updated_at - date the Module item was last edited

  • properties.weighting - weighting of the Module item

  • properties.release_date - date the item is set to be released

• sort_order - defines the order in which the type is sorted

  • asc - sort items in ascending order

  • desc - sort items in descending order

• show_pagination - this should be false

• uniq_slider_id - used when outputting multiple of the same layout on one page.