Creating an Interactive Status Bar with Custom AI Component

Ask for Help
1

Hi everyone! I’m working on a CRM-style Glide app and trying to build a status bar UI using the Custom AI component. I’m hoping for some guidance or ideas from anyone who’s tackled something similar.

:wrench: My Data Structure

  • Pipelines Table
    • Columns: Row ID, Name, Team, Description, Related Stages (relation to Stages)
  • Stages Table
    • Columns: Row ID (Stage ID), Stage Name, Pipeline ID, Order, Related Pipeline
  • Leads Table
    • Key Columns:
      • Pipeline
      • Related Pipeline (relation to Pipelines)
      • Related Pipeline Stages (relation to Stages)
      • StageID (points to the current Stage)
      • Stage relation (based on StageID)
      • Stage Name (lookup from Stage relation)

Each lead is related to a pipeline and a specific stage via StageID. This lets me support multiple pipelines with overlapping stage names without conflicts.

:pushpin: What I’m Trying to Achieve

I want to build a Custom AI component that:

  1. Displays all stages in the lead’s pipeline, in order.
  2. Visually highlights the lead’s current stage.
  3. Lets the user click or tap another stage to update the lead’s stage.

Has anyone done something like this or have suggestions on how to approach it? Any ideas, patterns, or examples would be super helpful!

2
1 Like