Stepper Bar in Snowflake Streamlit

3 min readSep 27, 2024

Making Streamlit Apps Awesome

Streamlit is a powerful tool for building data applications, and when combined with Snowflake’s robust data platform, it opens up a world of possibilities for creating interactive, data-driven apps. Today, we’ll explore how to create a customizable StepperBar in Streamlit, which can be particularly useful for guiding users through multi-step processes or visualizing progress in your Snowflake-powered applications.

What is a Stepper Bar?

A stepper bar is a graphical element that represents a sequence of steps or stages in a process. It typically consists of a series of circles or dots connected by lines, with each circle representing a step. Stepper bars are commonly used in user interfaces to provide visual feedback on the current stage of a multi-step process.

How to Build a Customizable Stepper Bar

Let’s dive into the code to create a flexible, customizable stepper bar class in Python that we can use in our Streamlit app on Snowflake.

This enhanced version of the StepperBar class includes the following customization options:

1. Orientation: Users can choose between ‘horizontal’ and ‘vertical’ layouts for the stepper bar.
2. Color Customization: Users can select custom colors for:
- Active step (current step)
- Completed steps
- Inactive steps (upcoming steps)
3. Flexible Display: The display() method now calls either _display_horizontal() or _display_vertical() based on the chosen orientation.

Now, lets look at the implementation detail of this custom component in Streamlit…

In the main() function, we've added UI elements to allow users to customize :

- A selectbox for choosing the orientation
- Color pickers for selecting custom colors for each step state

To use this in your Snowflake Streamlit app…

1. Copy the entire code (including the StepperBar class and the main() function) into your Streamlit app file in Snowflake.
2. Customize the steps list to match your specific workflow.
3. Run the Streamlit app in Snowflake.

The result of this implementation is a highly customizable stepper bar that can adapt to different visual preferences and layout requirements. Users can interactively change the orientation and colors, making it versatile for various use cases within your Snowflake Streamlit application.

How It Works

Define a list of steps for our process.
Customize the appearance of the StepperBar using Streamlit widgets:

- A selectbox for orientation
- Color pickers for different step states

3. Create an instance of our StepperBar class with these customizations.

4. Change the current step interactively using a slider or a custom programmatic method.

5. Display the StepperBar using Streamlit’s st.markdown() function with unsafe_allow_html=True to render our custom HTML.

Enabling for Streamlit in Snowflake

Copy both the StepperBar class and the main() function into your Streamlit app file in Snowflake or upload the StepperBar class in .py or .zip file into a Snowflake Stage.