Grid

Overview

Grid is a component that can show content in the form of a grid. It can contain lists, galleries, maps, or other information. This gives you more direct control over your layout and design. With the grid component, you can reposition and resize items anywhere within the grid to produce powerful, responsive layouts — faster.

You can find the grid component in the List view of the Appspotr View Builder.

In this guide, we’ll discuss how to create a Grid Component and how the result would look in your App.

Create Grid Component

  1. Open your app

  2. Navigate to Design > Views

g1

  1. Click on New to create a View

g2

  1. Provide a name and Create the view

g3

You will then be navigated to the View Builder for the new view that you added.

g4

  1. Add a List Component

g5 g6

  1. Click on Component Properties

  2. Select Grid from the Type dropdown menu

g7

  1. For the List Source, you can select from either State or Dataset

For this guide, we will select from Dataset - gridtest

g8

  1. Add Dataset Rule - You can add the Dataset Rule according to your requirement

For this guide we will select Multi-Read as the Dataset Rule

g9

  1. Add the List View - For this you have to add a new List View that you have created.

g10 g11

Here, you can bind those two dataset items.

  1. Navigate to Inputs

  2. Click on New Input

  3. Fill in the fields and click on Add

g12 g13

Note: Here we have added Image as an input as the name of the Dataset Item which we are regarding is ‘image’. You can change your input according to your dataset item/s.

  1. Change the Grid Layout according to your requirement

g14

Display - Specifies the display behavior (the type of rendering box) of an element

Flex Direction - Defines how flex items are placed in the flex container defining the main axis and the direction

Flex Wrap - Defines whether the flex items are forced in a single line or can be flowed into multiple lines

  1. You can add components to the List View

For this guide, we will add an image component to the view

g15

  1. Navigate to Component Properties

  2. Click on the Source dropdown menu and select the input that you have added (What we have added is image). This is done to combine the two dataset items.

g16

  1. Open Patchwork

  2. Add the Grid component

g17 g18

You have to add both View and the List

  1. Click on the List Patch and navigate to the Type and change the type to Grid

g19

  1. Click on List Source to Change the Source

g20

  1. Click on Dataset Rule to change Dataset Rules

g21

  1. Connect the View, with the List

g22

  1. Pass the dataset Rules Value in Target

g23

  1. Click on the View and change it to the homepage

g24

Once you have properly set all the settings you will be able to view the data you have added followed by the relevant grid settings (Flex Wrap, Number of Columns, alignments)

g25