Lesson 2 of 7 · 3 min
Filtering and Searching the Resources Library
Use topic filter pills, keyword search, and the type grid to find the right SOP or checklist instantly, even on mobile.
Filtering and Searching the Resources Library
Video coming soon
Lesson Notes
The Resources portal page (/portal/resources) opens with every active resource in your org displayed in a two-column card grid on desktop and a single-column list on mobile. Each card shows the resource type badge (SOP or Checklist), the title, a two-line description preview, and any topic pills assigned by the admin. Checklist cards that already have a run in progress show a requiredDone/requiredCount progress count in the top-right corner of the card.
Topic filter pills sit above the search bar in a horizontally scrollable row. Tapping or clicking a pill — All, Pre-shoot, On site, Gear, Safety, Post-shoot, or Handoff — instantly narrows the grid to resources tagged with that topic. Filtering happens client-side, so there is no network round-trip and no loading spinner between taps. The active pill is visually distinguished with a dark filled background; inactive pills use the muted background. Tap 'All' to clear the topic filter and return to the full library.
Below the filter pills is a search bar labeled 'Search SOPs and checklists…'. Typing any word searches across both the title and the description of every resource in real time. The search also applies on top of the active topic filter — so you can filter to 'On site' and search 'twilight' simultaneously to find only on-site resources whose title or description contains 'twilight'. Clearing the search field restores the previous topic-filtered view immediately.
The empty state has two variants: if the org has no resources at all, the card reads 'No resources yet' with the instruction to ask your company admin to publish SOPs and checklists. If resources exist but no results match the current filter or search, the card reads 'No matches for this filter — try a different topic or clear your search.' This distinction helps technicians know whether to wait for an admin to publish content or simply adjust their query.
On iOS, the Resources screen in the More drawer loads an inset-grouped list split into two sections: Standard Operating Procedures and Checklists. The iOS list does not have the filter-pill row or keyword search — it shows all active resources. To find a specific document on iOS, scroll or pull-to-refresh. Tapping any row opens a sheet (ResourceDetailView) that shows the full SOP body or checklist item list. The section footer under Checklists reads 'Run a checklist from a job to track your progress on site,' reminding users that interactive ticking requires a project context.
Key Takeaways
- Topic pills filter the resource grid instantly on the client — no page reload required.
- The search bar filters by title and description simultaneously and stacks on top of any active topic pill.
- Two distinct empty states tell you whether no content exists at all or whether your current filters returned no matches.
- On iOS, browse is a two-section inset-grouped list (SOPs / Checklists) without filter pills; tapping opens a detail sheet.