Front end edit Modules

Written By Matt Jones

Last updated About 2 hours ago

Introduction

If a logged-in visitor to your Site has submitted a Module Item, they can edit it too.

The Module’s Creator

Most Modules, including those created by the Admin and those created by visitors who are not logged in will not store the ID of a creator.

However, any Module created Front-End by a logged in User will store their creator's ID in the creator field.

In GraphQL, the creator field is actually the user_id core field.

Filtering a Module List by creator

Finding Module Items created by the current user

Example
{% include 'module'
 id: '3'
 layout: 'default'
 type: 'list'
 creator_id: context.current_user.id 
%}

Replace ID with the ID of the module. This can be found in the URL when you’re managing the module in the Admin.

Finding Module Items created by any specific user

In this example we create a variable by hard-coding a specific User ID.

Example
{% assign user_id = '8' %} 
{% include 'module'
 id: '3'
 layout: 'default'
 type: 'list'
 creator_id: user_id 
%}

Outputting information about the creator in the Module Layout

You can now access the following fields inside a Module Layout:

{{this.creator.id}}
{{this.creator.name}}
{{this.creator.first_name}}
{{this.creator.last_name}}
{{this.creator.created_at}}

Viewing the Edit Form and Permissions

Even if you include the Liquid Tag, the Form will only display for visitors who are logged in and are registered as that Module's creator.

Under default settings, only a Module owner can see and also submit the edit form. A Module gets an owner when a user is logged in and submits the original Module create form. Their User ID is stored in the creator field against the module item (user_id in GraphQL).

It is possible to modify the owner of a Module item in the Siteglide Admin.

It is also possible to set the "Anyone can edit" setting to true in the Siteglide Admin in the "View Table" area for that Module.

Setting this to true means that default edit protections are removed for that Module on the front-end. You will then be responsible for writing your own Liquid code to wrap around the form if you wish to set custom Secure Zone permissions.

Find other Module items with the same creator

You could of course combine both of these features- creating a link to the same page including the creator as a query parameter and then filtering by that ID using context.params to fetch the ID from the URL.

Syntax for the Edit Form

Including the Form inside a Module Layout

Unlike the "Add" Form, the Front End Module Edit Form must be linked to the specific Module Item it will Edit. This means you can only output the Form inside a Module Detail or List Layout file.

To include the Edit Form inside a Module Layout, add the Liquid tag:

Example
{% include 'module_form_edit', layout: 'default' %}

Parameters:

layout - Optional - Choose the name of your Layout file

The ID of the item to be edited is automatically inherited from the layout it is nested inside.

Developing the Form Layout

The Edit Form will work if you use the same Layout as you used for your add Form.

However, you may wish to use an alternative Layout or add special Liquid logic for the edit form so you can add some additional features. You can figure out if it is the edit form like this:

Dynamic Fields from the Module Item

As you're including the Edit Form inside a Module Item, you have access to the Module fields that are inherited from the Module item Layout.

One example might be adding a Title to the Form which dynamically references the Module Item: <h3>Edit {{this.name}}</h3>

Another example might be displaying the creator's name: <h4>By {[this.creator.name}}</h4>

Pre-filling values

In a Form Layout, we use the form_builder variable to dynamically add the correct name Attribute to inputs. You can use this to output the pre-filled value; instead of the name property, output the value property.

For this example Module field:

Example
<input name="{{form_builder.fields.properties.module_field_3_1.name}}">

…you can use the name field and replace .name with .value to add a value attribute:

Example
<input name="{{form_builder.fields.properties.module_field_3_1.name}}" value="{{form_builder.fields.properties.module_field_3_1.value}}">