Creating Multipage Applications Using Streamlit

In this article, we will see how to make a Multipage WebApp using Python and Streamlit.

What is Streamlit? 

Streamlit is an Open Source framework especially used for tasks related to Machine Learning and Data Science. It can create web apps with a very less amount of code. It is widely used because it supports most Data Science libraries like Pandas, Numpy, Matplotlib, SymPy, PyTorch, etc. Callbacks are not required with Streamlit since widgets are regarded as variables. Computation pipelines are made easier and faster by data caching. The application is automatically deployed in the shared link when Streamlit detects updates to the associated Git repository.

Note: Streamlit only supports Python version >= 3.6.

In this tutorial, we will look into the process of how we can make a Multipage Streamlit web app and will also look that how it is possible order those pages, add simple texts, etc.

Only Streamlit module is required. Use the following command to install it.

pip install streamlit

Importing the Module

import streamlit as stm

Here we are importing the only required module for our tutorial, Streamlit, and giving it an alias stm, user can use any alias they want in place of stm.

Initializing the Coding Process

Firstly we will create a simple Homepage i.e the main page that would be shown when the WebApp is executed.

import streamlit as stm

stm.set_page_config(page_title = "This is a Multipage WebApp")
stm.title("This is the Home Page Geeks.")

Explanation:

• Firstly we are importing the module with an alias stm.
• Then use the set_page_config() method of Streamlit to provide a page_title of that page as This is a Multipage WebApp, now this will only be associated with the page we have declared.
• Then give a title to the Page This is the Home Page Geeks..

Output :

Now as we are building a MultiPage app we need a sidebar from which we can access all of them, streamlit has a method sidebar which can be used here.

import streamlit as stm

stm.set_page_config(page_title = "This is a Multipage WebApp")
stm.title("This is the Home Page Geeks.")
stm.sidebar.success("Select Any Page from here")

This snippet is the same as the previous one, but we are just adding a new method sidebar with success method, the sidebar method will create a sidebar and the success method is used to display a success message after successfully creating the sidebar. here the message is Select Any Page from here and that will have a background color of Green to denote it has been successfully created.

Output:

Making it Multipage

Now as we are done with the main page, it is time to build some more pages and make it Multipage. To make it multipage follow the below steps:

In the directory where the python file is situated, create a new folder named pages. Users have to name that folder pages as Streamlit will not understand any other directory name.

After creating and saving just reload the page from your browser and you will see these two pages in the sidebar we created earlier.

Adding content on both of the pages

To add content in both pages we simply write code on those Python files by importing streamlit and using it's methods.

# PageOne contents

import streamlit as stm

stm.title("This is PageOne Geeks.")

here we are adding a Title to the page which will be displayed like the below Image. This title can be only visible on the page where we have written the code, not in other pages.

Output:

If we notice carefully at the output we will see that there are some changes visible in the page.

• The tab contains pageone. Streamlit, not This is a Multipage WebApp as it was visible in the homepage, that's because we haven't given any title to this page till now and that title was only associated with the homepage not everypage.
• Next,  the sidebar text Select any Pages from here has also vanished, it is also only associated with the Homepage i.e the respective page in which we are writing the code and not with pageone. But we can create that by writing the code in pageone too.

# Code in pageone.py file

import streamlit as stm

stm.title("This is PageOne Geeks.")
stm.sidebar.success("You are currently viewing Page One Geek")

Like the Homepage here we are also adding sidebar.success() method to add some success text to show some information.

Output:

# Code in pagetwo.py

import streamlit as stm

stm.title("This is PageTwo Geeks.")
stm.sidebar.success("You are currently viewing Page Two Geek")

Output:

Same as pageone.py.

Changing the order of the Pages

Streamlit by default order our pages alphabetically, we can change that by making changes in the file name by adding a specific number infront of their name followed by an underscore like this - 

Now pagetwo.py will act as the first page and pageone.py will act as the second page, their order will also be changed in Streamlit app.

The number we added will not be shown here but the order will be followed.

dwaipayan_bandyopadhyay

Follow

Improve

Article Tags :

• Python
• Technical Scripter 2022

Practice Tags :

• python