# Creating an Interactive Status Bar with Custom AI Component
**URL:** https://community.glideapps.com/t/creating-an-interactive-status-bar-with-custom-ai-component/83452
**Category:** Ask for Help
**Tags:** ai-custom
**Created:** [July 25, 2025, 5:56pm UTC](https://community.glideapps.com/t/creating-an-interactive-status-bar-with-custom-ai-component/83452 "2025-07-25T17:56:33Z")
**Posts on this page:** 2
**Page:** 1
### Author:  [@OptionOneShaun](https://community.glideapps.com/u/OptionOneShaun)
#### Post date: [July 25, 2025, 5:56pm UTC](https://community.glideapps.com/t/creating-an-interactive-status-bar-with-custom-ai-component/83452/1 "2025-07-25T17:56:33Z")
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.
* * *
### 🔧 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.
* * *
### 📌 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!
---
### Author:  [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)
#### Post date: [July 25, 2025, 6:08pm UTC](https://community.glideapps.com/t/creating-an-interactive-status-bar-with-custom-ai-component/83452/2 "2025-07-25T18:08:23Z")
> [@Custom Component (AI Generated) - Feedback wanted! light\_bulb](https://community.glideapps.com/t/custom-component-ai-generated-feedback-wanted/74533/44):
>
> CLICKABLE status progressions! [image] Create a responsive horizontal status progression bar that displays the labels. Highlight the statuses prior to the Order. Connect all circles with a horizontal line in the background. Font size: 8px. Labels and statuses include: 1 (New Inquiry) 2 (Call Booked) 3 (Wants Bid) 4 (Has Bid) 5 (Sold) Each circle should be clickable. No hover or onclick styling. Trigger the action that corresponds to the Order number value. Prevent any numbers greater than…