What This Screen Does
This is where you browse all your personal program templates laid out as a visual grid of cards. Think of it like a pinboard where each card represents either a folder (a group of programs) or an individual program file. From here you can open, edit, schedule, share, or delete templates without leaving the page.
How to Get There
Open the dashboard.
In the left-hand menu, click Personal Programs.
You are now on the Program Templates grid view.
Step-by-Step Guide
1. Browse Programs and Folders
The grid is divided into cards. Each card is either a folder or a program file.
The heading at the top reads Programs and shows the total number of files (e.g. “12 files”).
Cards are arranged in a responsive grid:
1 column on phones.
2 columns on small tablets.
3 columns on medium screens.
4 columns on large screens.
2. Collapse or Expand the Programs Panel
Click the arrow icon to the right of the “Programs” heading.
When collapsed, all cards are hidden and only the heading remains.
Click the arrow again to expand and show the cards.
3. Interact with a Folder Card
Each folder card shows:
Element | Description |
Folder icon | A folder image. Click it to navigate into the folder. |
Folder name | The name of the folder. Click it to navigate into the folder. |
Size | The total size of all files inside the folder. |
Program count | How many programs are inside (e.g. “5 programs”). |
Shared avatars | Small profile pictures of people the folder is shared with, if any. |
Clicking anywhere on the folder name or icon navigates you into that folder. The URL updates to include the folder path (e.g.
/personal-programs?path=FolderName).
4. Interact with a File (Program) Card
Each program card shows:
Element | Description |
File icon | A thumbnail based on the file type. Click it to open the program editor. |
Program name | The template name. Click it to open the program editor. |
File size | How large the file is. |
Last modified date | When the program was last changed. |
Shared avatars | Small profile pictures of people the program is shared with, if any. |
More menu (⋮) | Three-dot icon in the top-right corner of the card. Opens additional actions. |
5. Use the More Menu on a Program Card
Click the ⋮ (three-dot) icon on any program card.
A pop-over menu appears with these options:
Action | What It Does |
Edit | Opens the program template in the editor so you can make changes. |
Schedule | Opens a scheduling flow that lets you plan when this program should run. |
Delete | Opens a confirmation dialog asking if you really want to delete the template. |
6. Select Multiple Items
Click on individual cards to select them. Selected cards get a subtle highlight and shadow.
When one or more items are selected, a floating action bar appears at the bottom of the screen.
The action bar shows:
Element | Description |
Checkbox | A master checkbox. Check it to select all items; uncheck to deselect all. If only some items are selected, it shows a dash (indeterminate state). |
Item count | Shows how many items are currently selected (e.g. “3 Items selected”). |
Delete button | A red button that lets you delete all selected items at once. |
View button | A blue button that opens the share / invite dialog for the selection. |
7. Delete a Single Program
Click the ⋮ menu on the card and choose Delete.
A confirmation dialog appears: “Are you sure want to delete?”
Click the red Delete button to confirm, or close the dialog to cancel.
The program template is removed.
8. Delete Multiple Programs at Once
Select the items you want to remove by clicking their cards.
In the floating action bar at the bottom, click the red Delete button.
A confirmation dialog appears.
Confirm to delete all selected items.
9. Share / Invite (View Dialog)
Select one or more items and click the View button in the action bar.
A dialog titled Invite appears.
Type an email address in the Email field and click Send Invite to share the selected items.
Any people already shared are listed below the email field.
Click Close to dismiss the dialog.
What Happens Behind the Scenes
Opening a Program for Editing
You click a program card
|
v
Router navigates to /program-templates/:id/edit
|
v
The program editor screen loads with the template data
Navigating into a Folder
You click a folder card
|
v
Router navigates to /personal-programs?path=FolderName
|
v
The grid reloads showing the contents of that folder
Deleting a Program
You click "Delete" in the ⋮ menu
|
v
Confirmation dialog appears: "Are you sure want to delete?"
|
v
You click the red "Delete" button
|
v
API call: onDeleteItem(id)
|
v
Program template is removed from the system
|
v
The grid refreshes and the card disappears
Scheduling a Program
You click "Schedule" in the ⋮ menu
|
v
onPlanProgram(file) is called with the selected file
|
v
The scheduling flow opens for that program template
Bulk Deleting Programs
You select multiple cards
|
v
Floating action bar appears at the bottom
|
v
You click the red "Delete" button
|
v
Confirmation dialog appears
|
v
You confirm deletion
|
v
API call: onDeleteItem(id) for each selected item
|
v
All selected templates are removed
|
v
The grid refreshes and the cards disappear
Troubleshooting
“I do not see any program templates in the grid”
If the grid is empty, you may not have created any program templates yet. Create one first using the program template editor.
Check whether the Programs panel is collapsed. Click the arrow icon next to the heading to expand it.
If you expect to see templates but the grid is blank, try refreshing the page — the data may not have loaded correctly.
“I clicked a folder but nothing happened”
Make sure you clicked on the folder icon or the folder name — clicking empty space on the card may not trigger navigation.
Check your browser’s address bar. The URL should now include a
?path=parameter. If it does, the page may still be loading the folder contents.If the folder is empty, you will see an empty grid. This does not mean the click failed.
“The floating action bar is not appearing”
The action bar only appears when at least one item is selected. Click on a card to select it.
If you selected items and the bar still does not show, try scrolling down — the bar is fixed to the bottom of the screen and may be hidden behind other elements on smaller screens.
“I accidentally deleted a program template”
Deletions are permanent once confirmed. There is no undo button.
If the template was critical, check with your administrator — they may be able to restore it from a backup.
To prevent accidents in the future, always double-check the template name in the confirmation dialog before clicking Delete.
“The Delete button in the more menu is not working”
Clicking Delete in the ⋮ menu opens a confirmation dialog. You must click the red Delete button inside the dialog to actually remove the template.
If the dialog does not appear, try closing any other open dialogs or pop-overs first, then try again.
“I cannot find the Schedule option”
The Schedule option is only available in the ⋮ menu on program file cards, not on folder cards.
If you do not see the ⋮ menu at all, make sure you are hovering over or looking at a file card (not a folder).
“The grid layout looks broken on my screen”
The grid adjusts automatically based on your screen size. On very narrow screens, all cards appear in a single column.
Try resizing your browser window or rotating your device to landscape mode.
If cards are overlapping, try clearing your browser cache and refreshing the page.
“I sent an invite but the person did not receive it”
Double-check that you typed the correct email address in the invite dialog.
Ask the recipient to check their spam or junk folder.
The invite feature may depend on your system’s email configuration. Contact your administrator if invites are not being delivered.
“I selected items but the Select All checkbox behaves oddly”
The master checkbox has three states: unchecked (nothing selected), a dash (some items selected), and checked (all items selected).
Clicking it when some items are selected will select all items. Clicking again will deselect all.
This is normal behaviour and helps you quickly select or deselect everything.