Power Apps — Grid View: Step-by-step Build (extracted from provided

transcript)
Source video: https://youtu.be/MnQ46_dOfIw?si=FLRheJ_qrvaqGBwN

Transcript provided by user (no timestamps in transcript).

Note about timestamps: the transcript given did not include timestamps. I have added
estimated timestamps by splitting the content into logical sections. If you want exact
timestamps, paste the YouTube transcript *with timestamps* (YouTube's 'Show transcript'
option), or I can fetch it directly if you allow web access.

Short summary

This video demonstrates how to build a Grid View in a Power Apps project-management app
that complements an existing Board View.
Key features shown:
- Toggle between Board and Grid view
- Create a horizontal gallery for the view toggle
- Construct a vertical gallery as the grid (one task per row)
- Add columns: Title, Start Date, Due Date, Project (lookup), Status (choice), Priority (choice),
Assigned To (people)
- Add inline checkbox to mark tasks Completed/To-Do via Patch()
- Add clickable overlay (invisible button) to open the task form
- Add an assigned-to preview (user photos or initials), including a "+N" overflow indicator
- Add column sorting (ascending/descending), including handling lookup & choice values via
AddColumns

Detailed step-by-step instructions (follow along the video)

Step 1: 0:00 — Intro & what you'll build

Overview of the grid view features: sorting, inline completion (checkbox), people preview
(photos/initials).

Step 2: 0:35 — Add view toggle (Board / Grid)

1. Insert → Blank Horizontal Gallery (to act as view toggle).

2. Set Gallery properties: FlexibleHeight = Off, Height = 40, MinWidth = 0, Stretch for Width,
Border = 0, TemplateSize = 90, TemplatePadding = 0, ShowScrollbar = No.
3. Set the Items property to a small table with two records, e.g.:
[ { ID:1, Title: "Board" }, { ID:2, Title: "Grid" } ]
4. Inside the toggle gallery, paste your pre-built filter-style button (copy it from the filter you
already made).
5. Make the button size use parent.templateWidth/Height and set the Text to ThisItem.Title.
6. OnSelect (the button): Set a variable for the view, e.g. Set(VARView, ThisItem.Title).
7. To indicate the selected state, set the button Fill (or Color) property with a conditional:
If(VARView = ThisItem.Title, Theme.Primary, Color.Gray)
8. Initialize the default at app start: OnStart of App → Set(VARView, "Board"). Run the app
OnStart to apply.

Step 3: 2:55 — Make Board/Gallery visibility conditional

1. Select the Board gallery container and set its Visible property to: VARView = "Board"
2. This hides the board view when the Grid is selected and vice versa.

Step 4: 3:15 — Insert Grid view gallery (vertical)

1. Insert → Blank Vertical Gallery (this will be your grid - one row per task).
2. Use the existing Board gallery Items formula as the base for this new gallery to reuse filtering
logic.
3. Gallery properties recommended:
- FlexibleHeight: On (so rows stay sized flexibly)
- MinHeight: 0
- Width: Stretch (parent.Width)
- MinWidth: 1100 (important — allows horizontal scrolling for many columns on narrow
screens)
- TemplateSize: 50 (row height)
- TemplatePadding: 0
4. You may delete nested filter UI from the pasted code if it's not relevant.

Step 5: 4:30 — Build row layout containers

1. Edit the gallery template and insert a Container (call it row container). Set X/Y to 0, Width =
Parent.TemplateWidth, Height = Parent.TemplateHeight. Remove border radius and drop
shadow.
2. Inside row container, insert a Horizontal Container — this will hold all columns (Title, Dates,
Project, Status, Priority, Assigned To, etc.).
3. Make sure the container X/Y = 0 and Width = Parent.Width, Height = Parent.Height, no border
radius, no shadow.
4. Set the gallery background to Theme.LightGray (optional for design).
Step 6: 5:20 — Add Title column

1. Insert a Label inside the horizontal columns container.

2. Set Text = ThisItem.Title.
3. Font: Lato, Size 12; LeftPadding = 10. Height = Stretch.
4. Turn FlexibleWidth = On and set MinWidth = 200 (keeps it readable on small screens).
5. Set Fill = White and Border = Solid, BorderThickness = 4, BorderColor = Theme.LightGray (for
the neat table look).
6. Increase the column FillPortions for Title to 2 so it occupies more horizontal space than small
columns.

Step 7: 6:10 — Add Start Date and Due Date columns (compact formats)

1. Duplicate the Title label to create Date columns; change the Text formula to format the date
as text to save space:
Text(ThisItem.StartDate, "yyyy-mm-dd")
Text(ThisItem.DueDate, "yyyy-mm-dd")
2. Set these columns' MinWidth to 120 each and FlexibleWidth Off (or small).
3. Turn Wrap = Off for these labels to avoid multi-line rows on narrow screens.

Step 8: 7:30 — Add Project (lookup) column

1. Add another text label for Project. Since Project is a lookup (in your tasks list it stores the
Project ID), use LookUp to display the project title:
LookUp(Projects, ID = ThisItem.ProjectID).Title
2. Set Wrap = Off and MinWidth = 200 (or 120) depending on how much space you want.
3. Set FillPortions to 2 for project to give it more width, like the Title column.

Step 9: 8:30 — Add Status and Priority columns (choice fields with conditional colors)

1. Status label: Text = ThisItem.Status.Value

2. Priority label: Text = ThisItem.Priority.Value
3. Set both MinWidth = 120.
4. To color-code Status use Switch on the Color property. Example:
Switch(ThisItem.Status.Value,
"To-Do", Color.Blue,
"In Progress", Color.Purple,
"Ready for QA", Color.Orange,
"Completed", Color.Green,
Transparent)
5. Do a similar Switch for Priority (Low/Medium/High) mapping to colors you prefer.
6. Set Wrap = Off to keep rows single-line.

Step 10: 10:15 — Add header row (column titles) aligned to data columns

1. Insert another Horizontal Container above the gallery rows to host column headers.
2. Copy each of the labels you built for the row and paste them into the header container (Title,
Start, Due, Project, Status, Priority...).
3. Make header container height = 50 so it visually aligns with row TemplateSize = 50.
4. Make headers bold (e.g., Lato Black) and set their Fill or Border to match row styling.
5. IMPORTANT: Place both the header container and the gallery rows inside another parent
container that has HorizontalOverflow = Scroll to enable right-scroll on narrow screens.

Step 11: 12:05 — Enable horizontal scrolling for many columns

1. Create a vertical container that will wrap both the header container and the gallery. Set this
wrapper container's HorizontalOverflow property to Scroll.
2. Paste the header container and the gallery into this wrapper (use Ctrl/X then paste into the
wrapper).
3. This yields a horizontal scrollbar; users can scroll right to see all columns on smaller screens.
4. Optional: set the wrapper Fill = Theme.LightGray and set inner cell fills to Transparent for a
nice aligned look.

Step 12: 13:00 — Add checkbox to mark Completed inline

1. In the row container (leftmost area) Insert → Checkbox.

2. Remove default text. Set Height = Parent.Height, Width = 50, LeftPadding ~5, PaddingBottom
~3 to center vertically.
3. Default (Checked) property = ThisItem.Status.Value = "Completed"
4. Checkbox Border / Fill / CheckIcon styling:
- CheckIcon Color = Color.Green (optional)
- Background Fill = White (or Transparent)
- Border Color = Theme.LightGray; BorderThickness = 4 (to match table)
5. OnCheck: Patch the Tasks list to mark the status Completed. Example:
Patch(Tasks, LookUp(Tasks, ID = ThisItem.ID), { Status: { Value: "Completed" } })
6. OnUncheck: Patch back to To-Do:
Patch(Tasks, LookUp(Tasks, ID = ThisItem.ID), { Status: { Value: "To-Do" } })
7. Optionally, set label's Strikethrough property: ThisItem.Status.Value = "Completed" (i.e.,
True/False).
8. Add LeftPadding of 50 to the header container to account for the checkbox column so
headers line up.

Step 13: 15:05 — Add invisible overlay button for row navigation (open form)

1. Copy an 'invisible' button you used previously with hover animation (or create a transparent
Button).
2. Paste it onto the row container as an overlay. Set X = 50 (so checkbox is clickable separately),
Width = Parent.Width - Self.X so the button stretches from right after the checkbox to the row
end.
3. OnSelect: Set a variable and navigate to the form for the record. Use a lookup to ensure a
proper record is passed:
Set(VARTask, LookUp(Tasks, ID = ThisItem.ID)); Navigate(TaskForm, ScreenTransition.None)
4. That ensures clicking the row (except the checkbox) opens the form for edit.

Step 14: 16:20 — 'Assigned To' people preview (photos or initials, up to first 2 with +N)

1. Ensure data source Office365Users is added (Office365Users connector).

2. In the row container add a small sub-container for Assigned To; set MinWidth = 125.
3. Insert a Blank Horizontal Gallery inside this assigned-to container for the per-row people
chips.
4. Set the people gallery Items to transform multiple people selection into records for the first
two people using ForAll + FirstN, mapping email/displayName/photo/initials, for example:
ForAll(
FirstN(ThisItem.'Assigned To', 2) As assignedTo,
{
Email: assignedTo.Email,
DisplayName: assignedTo.DisplayName,
UserPhoto: If(
!IsBlank(assignedTo.Email) &&
Office365Users.UserPhotoMetadata(assignedTo.Email).HasPhoto,
Office365Users.UserPhotoV2(assignedTo.Email),
Blank()
),
UserInitial:
Concatenate(Left(Office365Users.UserProfileV2(assignedTo.Email).GivenName,1),
Left(Office365Users.UserProfileV2(assignedTo.Email).Surname,1))
}
)
5. In the people gallery template add an Image control with Image = ThisItem.UserPhoto, Width
= 30, Height = 30, BorderRadius = 15 (circle).
6. For users without a photo: instead add a small button/label with Text = ThisItem.UserInitial
visible only when IsBlank(ThisItem.UserPhoto). Style it circular and colored (e.g., Theme.Primary
fill).
7. Add an overflow indicator (+N) as a small circular button if CountRows(ThisItem.'Assigned To')
> 2. Text can be:
Concatenate("+", Text(CountRows(ThisItem.'Assigned To') - 2))
Visible property: CountRows(ThisItem.'Assigned To') > 2

Step 15: 19:40 — Sorting: setup variables and icon UI

1. Add Icon (Sort / Arrow) next to each column title where sorting is allowed (Title, StartDate,
DueDate, ProjectTitle, StatusValue, PriorityValue).
2. Create variables onSelect for each icon. Example for Title icon OnSelect:
Set(VARSortColumn, "Title"); Set(VARSortDescending, If(VARSortColumn = "Title", !
VarSortDescending, false))
(This toggles descending/ascending when re-clicking the same column.)
3. For the icon's Icon property (so the icon visually changes), use a Switch(true, ...) pattern:
Switch(true,
VARSortColumn = "Title" && !VARSortDescending, Icon.ArrowUp,
VARSortColumn = "Title" && VARSortDescending, Icon.ArrowDown,
Icon.Sort
)

Step 16: 21:45 — Apply SortByColumns to gallery Items and handle ascending/descending

1. Wrap the gallery's existing filter or data expression with SortByColumns(...):

SortByColumns(
<yourFilteredData>,
VARSortColumn,
If(VARSortDescending, SortOrder.Descending, SortOrder.Ascending)
)
2. The gallery will now sort based on the selected column and direction.

Step 17: 22:30 — Sorting Lookups & Choice columns (AddColumns trick)

1. For lookup fields (Project) and choice fields (Status, Priority) you cannot directly
SortByColumns on nested records; add helper columns to the gallery data using AddColumns.
2. Example (add columns to your Items expression):
AddColumns(
<yourFilteredData>,
 "ProjectTitle", LookUp(Projects, ID = ProjectID).Title,
"StatusValue", Status.Value,
"PriorityValue", Priority.Value
)
3. Now set VARSortColumn to "ProjectTitle" or "StatusValue" when clicking those sort icons —
SortByColumns will work against those added fields.

Step 18: 24:30 — Fix invisible row-button record binding error

1. After adding AddColumns, ThisItem is not the exact original record object — to set the
VARTask correctly in the invisible button, use a lookup to the Tasks list:
Set(VARTask, LookUp(Tasks, ID = ThisItem.ID))
2. This guarantees VARTask is the original record from the Tasks datasource and the Task form
will work without errors.

Step 19: 25:00 — Final polish and testing

1. Test the toggle Board / Grid switches and verify saving on checkbox patches works.
2. Test clicking any row to open the Task form and confirm it populates correctly.
3. Test sorting on each sortable column (Title, Start Date, Due Date, Project, Status, Priority).
4. Test Assigned To photos/initials and the +N overflow chip.
5. Adjust styling: padding, border thickness, fonts, colors to match your theme settings.

Step 20: End — Wrap-up / Next steps

Suggestions from the video: solicit feedback, consider adding more functionality (filters, bulk
actions, column resizing, export, etc.).

Quick checklist (with estimated timestamps)

1. 0:00 — Intro & what you'll build — Overview of the grid view features: sorting, inline
completion (checkbox), people preview (photos/initials).

2. 0:35 — Add view toggle (Board / Grid) —

3. 2:55 — Make Board/Gallery visibility conditional —

4. 3:15 — Insert Grid view gallery (vertical) —

5. 4:30 — Build row layout containers —

6. 5:20 — Add Title column —

7. 6:10 — Add Start Date and Due Date columns (compact formats) —
8. 7:30 — Add Project (lookup) column —

9. 8:30 — Add Status and Priority columns (choice fields with conditional colors) —

10. 10:15 — Add header row (column titles) aligned to data columns —

11. 12:05 — Enable horizontal scrolling for many columns —

12. 13:00 — Add checkbox to mark Completed inline —

13. 15:05 — Add invisible overlay button for row navigation (open form) —

14. 16:20 — 'Assigned To' people preview (photos or initials, up to first 2 with +N) —

15. 19:40 — Sorting: setup variables and icon UI —

16. 21:45 — Apply SortByColumns to gallery Items and handle ascending/descending —

17. 22:30 — Sorting Lookups & Choice columns (AddColumns trick) —

18. 24:30 — Fix invisible row-button record binding error —

19. 25:00 — Final polish and testing —

20. End — Wrap-up / Next steps — Suggestions from the video: solicit feedback, consider adding
more functionality (filters, bulk actions, column resizing