To add a grid module to your page, click on Page Sections>New Item from the config panel on the left of the screen, and select Grid.
First we need to select the data source we want the grid to pull data from.
Click the blue “Select Source” button. From here you can pull data from your own database using an HTTP request using your API server endpoint.
Alternatively, you can link to a spreadsheet with Google Sheets. To do this, exit the app builder and navigate to Frontly's root menu, scroll down to "Integrations", and click on Google Sheets. Click "Add Spreadsheet", and enter the URL of the page. You can also give your spreadsheet a title to make it easy to recognize for future use.
Once you've added the Sheet to your Integrations page, you can select it from any app you build as an action by navigating to Actions>Add Action>Google Sheets Request, and selecting your Sheet from the dropdown menu. You'll also need to specify the title of the Sheets tab you'd like to work with*.
*Note: Sheets naming conventions within Frontly are case-sensitive, so copy/paste titles for best results.
Next we need to map our data. On the left are fields for primary text, description, image, and more. Select Primary Text, and Frontly will open an interface showing the data fields within your API.
Simply pick the field that matches the title or name field, and it will be pulled into Frontly as the primary label for each grid item. Press the blue save button on the config panel to confirm.
Repeat the process to map the rest of the data fields you want to display within the grid module.
By hovering over each grid item in the config panel, a grey edit icon will appear on the right side of the field name. Clicking this icon will allow you to alter the properties of this field within the grid, allowing you to format the field properties.
Editable properties include displaying the data as a numerical value, an image, currency, and date, as well as text formatting options.
Actions can then be mapped to Grid items, such as displaying a new page when an item is clicked. Click here to learn how to map actions within Frontly.