Skip to main content

Workflow Page Local Search Implementation

Overview​

Each workflow category page (Administration, Examinations, LMS, Payments, Enrollment, Self-Service) now includes a local search bar that allows users to search and filter workflows specific to that category.

How It Works​

Components Used​

  1. WorkflowPageSearch Component (src/components/WorkflowPageSearch/WorkflowPageSearch.tsx)

    • Provides the search input and filtering functionality
    • Handles real-time search as users type
    • Displays filtered results with highlighting
    • Shows search tips when no query is active

  2. Original Card Component (src/components/Card/index.tsx)

    • Renders individual workflow cards
    • Used by the search component to display results

Implementation Pattern​

Each workflow category page follows this pattern:

---
sidebar_position: X
---

import WorkflowPageSearch from '@site/src/components/WorkflowPageSearch/WorkflowPageSearch';

# Category Title

Description of the category...

export const categoryWorkflows = [
  {
    title: "Workflow Title",
    description: "Workflow description...",
    link: "Workflows/workflow-link"
  },
  // ... more workflows
];

<WorkflowPageSearch 
  workflows={categoryWorkflows}
  placeholder="Search category workflows..."
  categoryTitle="category workflows"
/>

Search Features​

  • Real-time filtering: Results update as you type
  • Multi-field search: Searches both title and description
  • Text highlighting: Matching text is highlighted in results
  • Result count: Shows number of matching workflows
  • No results handling: Displays helpful message when no matches found
  • Search tips: Provides guidance when search is empty

Files Modified​

  1. docs/workflows/administration.md
  2. docs/workflows/examinations.md
  3. docs/workflows/lms-workflows.md
  4. docs/workflows/payments.md
  5. docs/workflows/enroll.md
  6. docs/workflows/self_service.md

Adding New Workflows​

To add a new workflow to any category:

  1. Open the respective workflow category file (e.g., docs/workflows/examinations.md)
  2. Add a new entry to the workflows array: 
    {
      title: "New Workflow Title",
      description: "Description of what this workflow does...",
      link: "Workflows/new-workflow-link"
    }
  3. The search will automatically include the new workflow

Technical Details​

  • Framework: React component integrated with Docusaurus MDX
  • Styling: CSS Modules for scoped styling
  • Performance: Debounced search with useMemo for optimization
  • Accessibility: Proper ARIA labels and keyboard navigation
  • Responsive: Mobile-friendly grid layout

Benefits​

  1. Improved UX: Users can quickly find specific workflows within each category
  2. Category-specific: Search is scoped to the current workflow category
  3. Fast: No external API calls - all filtering happens client-side
  4. Maintainable: Simple data structure for adding/removing workflows
  5. Consistent: Same search experience across all workflow pages