Grid Layout Template

The Grid Layout Template is used on a Data Page to format your data in a single or multi-column layout.  You can define how many columns you want to display and how each record is formatted. Use this option when you want to create a Details View of a record. Set the Column property to one and the Layout Markup to create the layout.

You may also consider the option of using a Table Layout Template.

Creating a Grid Layout Template

You can create a Grid Layout  Template from within the Publishing & Workflow Wizard. If you later decide to insert a page, the wizard will also give you the option to choose Grid or Table layout. You can also change your layout to  Grid on the Page Template property on the Layout Settings property panel.

Customizing the Layout

To edit the layout that will be used to display each record:

1. Select the Data Page in the WorkFlow Outline Panel

2. Expand the Layout Settings Panel in the Properties Panel.

3. Click Layout Markup

This will open the familiar Rich Text Editor where you can design the layout for each record.  Here you can insert Wildcards, use Wildcard Modifier functions and Conditional Content. If your Workflow is Secured, you can also use the CurrentUser Wildcards.

You can also use Workflow Links and Workflow Widgets here to insert Row Actions (including the ability to delete a record or execute a trigger), create Embedded Drill Down Pages and more.

Setting the Number of Columns

To change the number of columns and record segments outputted per row:

1. Select the Data Page in the WorkFlow Outline Panel.

2. Expand the Layout Settings Panel in the Properties Panel.

3. Click Columns and adjust to your preference.

Using Templates in the Editor

From within the Layout Markup Editor, click the  template icon to insert one of the pre-defined templates. Once inserted, add Wildcards to customize the display.

Boot Strap Components

You can switch to source code mode in the Layout Markup Editor and insert any Bootstrap components and formatting to create powerful layouts. You can copy and paste any of the Bootstrap HTML from the Bootstrap components page.

Inserting Images

You can display images that have been submitted through your form in two different ways:

Using the ShowImage Modifier function:

1. Click the Wildcard icon in the Editor
2. Right click the wildcard to insert (this should be an upload field), and choose Apply Modifier Function and Insert

3. Click the Show Image modifier function and then click Save

Manually inserting an IMG SRC TAG (ADVANCED):

You can also insert the direct path to an uploaded image into the SRC attribute of an IMG tag.

1. To determine the full path to the uploaded images,  return to the DashBoard and find the Form that is being used in the layout.

2. Right-click on the form and choose Open Form in New Window

3. Get the Full path to the form directory. This should look like https://forms.logiforms.com/formdata/user_forms/60000_6449748/300526/

4. Add 'attachments' to the end of the URL to get the full path to the uploaded images directory (https://forms.logiforms.com/formdata/user_forms/60000_6449748/300526/attachments)

5. Finally, add the Wildcard (that will be replaced with the actual image filename) to the end of the URL

The end result should look like and can be inserted into the SRC attribute of an IMG tag

https://forms.logiforms.com/formdata/user_forms/60000_6449748/300526/attachments/[YourImageField]