Grid View: Step-by-step Guide (from video)
Source: https://youtu.be/MnQ46_dOfIw
This document extracts the actionable steps from the provided video (partial transcript
provided). Steps are written so you can follow along while watching the video. Each step
includes a timestamp range indicating where the action occurs in the video. Use the
timestamps to jump back for verification.
Detailed Steps (follow while watching)
Step 1 — Introduction & goals
Timestamp: 00:00:00 - 00:00:28
The presenter introduces the continuation of a project management app series and
describes goals: build a grid view to complement an existing board view, enable sorting
ascending/descending, add in-grid completion via checkbox, and a people-assigned preview
(avatars or initials).
Step 2 — Decide layout and selection control
Timestamp: 00:00:39 - 00:00:58
Decide that you want a grid view with each task on a single horizontal row and create the
ability for users to toggle between the existing board view and the new grid view. The
default selection will remain the board view.
Step 3 — Insert gallery for board/grid toggle
Timestamp: 00:01:20 - 00:02:14
Insert a Blank Horizontal Gallery under the tasks heading to hold the two toggle options
(Board and Grid). Set gallery properties: turn off flexible height, set Height to 40, MinWidth
to 0, Stretch alignment, Border none, TemplateSize to 90, TemplatePadding 0, Show
scrollbar = No.
Step 4 — Create toggle items data source
Timestamp: 00:02:14 - 00:02:53
Set the Gallery's Items property to a small table with two records: {ID:1, Title: "Board"} and
{ID:2, Title: "Grid"}.
Step 5 — Add styled button into toggle gallery
Timestamp: 00:03:05 - 00:03:37
Copy an existing filter button (with hover effect) into the gallery template. Set the button's
Width and Height to parent.TemplateWidth and parent.TemplateHeight. Set the button Text
property to ThisItem.Title so the templates show 'Board' and 'Grid'.
Step 6 — Set toggle variable on select
Timestamp: 00:04:03 - 00:04:22
Set the button's OnSelect to set a variable: Set(VAR_View, ThisItem.Title). Use the Title
rather than ID for easier references.
Step 7 — Change selected color for active toggle
Timestamp: 00:04:27 - 00:05:20
Update the button Fill (color) property to use a conditional: If(VAR_View = ThisItem.Title,
Theme.Primary, Gray). This keeps the selected toggle highlighted.
Step 8 — Initialize default view on app start
Timestamp: 00:05:33 - 00:05:54
In the App 'OnStart', set Set(VAR_View, "Board") so Board is the default when the app
launches. Run the app to verify default selection highlights.
Step 9 — Control board/gallery visibility
Timestamp: 00:06:00 - 00:06:20
Set the existing board Gallery's Visible property to (VAR_View = "Board") so it shows when
Board is selected and hides when Grid is selected.
Step 10 — Insert grid gallery container
Timestamp: 00:06:27 - 00:07:04
When grid is selected, insert a Blank Vertical Gallery to serve as the grid view. Copy
configuration from the board gallery where helpful, and remove nested gallery-specific
controls (like the filter) that don't apply.
Step 11 — Grid gallery sizing and scrolling
Timestamp: 00:07:17 - 00:07:36
Set the grid Gallery properties: keep FlexibleHeight on, MinHeight = 0, Width = Stretch,
MinWidth = 1100 (so columns remain readable and horizontal scrolling is possible),
TemplateSize = 50, TemplatePadding = 0.
Step 12 — Create row layout container
Timestamp: 00:08:05 - 00:08:44
Edit the gallery template and insert a Container. Set X and Y to 0, Width =
Parent.TemplateWidth, Height = Parent.TemplateHeight, BorderRadius = 0, DropShadow =
None. This main container will host an invisible overlay button and the row content.
Step 13 — Insert horizontal container for columns
Timestamp: 00:08:44 - 00:09:13
Inside the main container, insert a Horizontal Container to hold column elements: Title,
Status, Project, Dates, Priority, etc. Set its X and Y to 0, Width = Parent.Width, Height =
Parent.Height, BorderRadius/DropShadow off.
Step 14 — Add Title label and formatting
Timestamp: 00:09:26 - 00:10:08
Insert a Text label bound to ThisItem.Title. Set font to Lato, Size = 12, LeftPadding = 10,
Height = Stretch with MinHeight = 0, turn on FlexibleWidth, MinWidth = 200. Set
background Fill = White, Border = Solid, BorderThickness = 4, BorderColor =
Theme.LightGray.
Step 15 — Add Start & Due date fields
Timestamp: 00:10:57 - 00:12:05
Copy the Title label to create Start Date and Due Date fields. Set these to Text and format
using a compact date format (e.g., YYYY-MM-DD) to save space. Set MinWidth to 120 for
each date field.
Step 16 — Add Project lookup field
Timestamp: 00:12:12 - 00:12:57
Add a Project column that is sourced from a related list. Use a lookup formula to get the
project's Title where ProjectsList.ID = ThisItem.ProjectID. Turn off Wrap on the text fields to
avoid multi-line wrap on small screens.
Step 17 — Add Status and Priority fields
Timestamp: 00:13:13 - 00:13:44
Insert Status.Value and Priority.Value labels. Set their MinWidth smaller (120). Adjust the
Title and Project controls to use a 'Fill' proportion of 2 each so they take more horizontal
space than compact fields.
Step 18 — Conditional colors for Status and Priority
Timestamp: 00:13:50 - 00:16:33
For Status color, use a Switch(ThisItem.Status.Value, ...) returning Theme color tokens per
status: To-do -> color.Blue, In Progress -> color.Purple, QA -> color.Orange, Completed ->
color.Green, else Transparent. For Priority, use Switch(ThisItem.Priority.Value, Low->blue,
Medium->orange, High->red). Correct spelling/casing for values if needed.
Step 19 — Add header titles aligned to columns
Timestamp: 00:16:45 - 00:18:10
Create a separate horizontal container above the gallery template to hold header labels
(Title, Start, Due, Project, Status, Priority). Match the MinWidth values (e.g., 1100 total) and
copy/paste the same distribution to ensure alignment. Set header font to Lato Black, Bold,
color black.
Step 20 — Match minimum width and alignment
Timestamp: 00:18:41 - 00:19:05
Ensure the header container and gallery row container share the same MinWidth (1100)
and are aligned so columns line up correctly when scrolling.
Step 21 — Enable horizontal overflow scrolling
Timestamp: 00:19:13 - 00:20:03
Wrap both the header container and the data gallery inside a parent Vertical Container with
HorizontalOverflow set to 'Scroll'. This parent container should have MinWidth = 0, Stretch
width, FlexibleHeight = On. Move/paste the header and gallery into this container so a
horizontal scrollbar appears when needed.
Step 22 — Adjust styling and background
Timestamp: 00:20:09 - 00:20:35
Set the parent scroll container Fill color to Theme.LightGray and set individual row fills to
Transparent so borders and layout align. Make titles bold and adjust the look and feel to
match the app theme.
Step 23 — Control grid visibility via variable
Timestamp: 00:20:42 - 00:21:24
Set the grid container's Visible property to (VAR_View = "Grid") so it only shows when the
Grid toggle is selected. Verify toggling between Board and Grid shows/hides the correct
sections.
Step 24 — Plan overlay button for row actions
Timestamp: 00:21:24 - 00:21:54
Decide to add an invisible overlay button on top of each row to enable click/selection of the
row and to expose additional actions (mark complete, open details, etc.). The video cuts off
here before implementing the overlay button or the people/avatars preview (the latter was
promised as a bonus at the start).
Quick Checklist with timestamps
1. Introduction & goals — 00:00:00 - 00:00:28
2. Decide layout and selection control — 00:00:39 - 00:00:58
3. Insert gallery for board/grid toggle — 00:01:20 - 00:02:14
4. Create toggle items data source — 00:02:14 - 00:02:53
5. Add styled button into toggle gallery — 00:03:05 - 00:03:37
6. Set toggle variable on select — 00:04:03 - 00:04:22
7. Change selected color for active toggle — 00:04:27 - 00:05:20
8. Initialize default view on app start — 00:05:33 - 00:05:54
9. Control board/gallery visibility — 00:06:00 - 00:06:20
10. Insert grid gallery container — 00:06:27 - 00:07:04
11. Grid gallery sizing and scrolling — 00:07:17 - 00:07:36
12. Create row layout container — 00:08:05 - 00:08:44
13. Insert horizontal container for columns — 00:08:44 - 00:09:13
14. Add Title label and formatting — 00:09:26 - 00:10:08
15. Add Start & Due date fields — 00:10:57 - 00:12:05
16. Add Project lookup field — 00:12:12 - 00:12:57
17. Add Status and Priority fields — 00:13:13 - 00:13:44
18. Conditional colors for Status and Priority — 00:13:50 - 00:16:33
19. Add header titles aligned to columns — 00:16:45 - 00:18:10
20. Match minimum width and alignment — 00:18:41 - 00:19:05
21. Enable horizontal overflow scrolling — 00:19:13 - 00:20:03
22. Adjust styling and background — 00:20:09 - 00:20:35
23. Control grid visibility via variable — 00:20:42 - 00:21:24
24. Plan overlay button for row actions — 00:21:24 - 00:21:54
Notes & Verification
If you need to verify any step, use the timestamp ranges above to jump to the exact section
in the video. This transcript covered the video up to 00:21:54; the video may continue
beyond this point. If you want the remaining portion processed, please paste the rest of the
transcript and I will append the steps to this document.
