Passing a variable from one page to another

Multi-pages is something very powerful since it is possible to pass variables from one page to another. Let’s learn how to leverage this feature.

Let’s make a little change to our app.py file – that is, to the main page – as shown in the following screenshot:

Figure 14.27: A new variable in the “app.py” file

On line 3, we created a text variable named my_variable that is printed on the screen on line 8. This is the result in the web application:

Figure 14.28: The new variable shown on the app page

On the main page – that is, the app page – we can visualize the content of my_variable that was created in the app.py file.

Now, in Sublime Text, we will change the 01_page1.py code, as shown in the following screenshot:

Figure 14.29: Code changes in the “01_page1.py” file

Here’s what we are doing:

• On line 4, we imported my_variable from the app file.

Please note that according to the specific syntax, we do not need to write from app.py but simply from app – that is, excluding the .py from the filename.

• Then, on line 7, we printed the imported variable on the screen.

This is the result in the web application:

Figure 14.30: The new variable shown on the page1 page

The result is very interesting: here, we are showing the content of a variable that has been created on another page on page1!

Let’s also modify the 02_page2.py file in the following way:

Figure 14.31: A new variable in the 02_page2.py file

On line 3, we introduce a new variable that is printed on line 6. This is the result in the web application:

Figure 14.32: The new variable shown on the page2 page

Now, let’s try to print the variable we created on page2 on page1. To achieve this result, this time, for the 01_page1.py file, we must use slightly different code, as shown in the following figure:

Figure 14.33: The new code for the “01_page1.py” file

Here’s what we did:

• On line 5, we imported my_variable_page2 from the 02_page2.py file. However, since this file is inside the pages folder, we had to write from pages.02_page2 import….
• On line 9, we printed the my_variable_page2 variable.

When we move to the browser, we’ll get the following error:

Figure 14.34: A script execution error

As the error explains, we are facing an invalid decimal literal. This means that when we tried to import from pages.02_page2…, as shown in Figure 14.33, Streamlit couldn’t manage 02 at the beginning of the filename.

To fix this issue, we must rename the file in the following way:
mv 02_page2.py page2.py

Accordingly, we must change the code in the 01_page1.py file, as follows:

Figure 14.35: The final code changes to the 01_page1.py file

Now, we are correctly importing from pages.page2. Checking our browser, we’ll see that everything works fine:

Figure 14.36: page1 showing variables from other pages

page1 shows a variable from the main page (app.py) and a variable from page2.app, which means that variables are correctly exchanged among different pages.

This is proof that to exchange variables among files, we don’t have to put numbers in the filenames.

Our main task is to implement web applications that completely satisfy specific needs, such as disease detection, as we did with the Covid-19 Detection Tool app; however, making these applications very beautiful and easy to use is also very important. Deep customization is how we can make our application very attractive and simple to use.

Summary

In this chapter, we focused on advanced customization techniques in Streamlit. We delved into the new features that enable deep customization, allowing for more personalized and complex web pages. This chapter guided you through the process of creating highly customized pages, emphasizing the ability to tailor the user interface and functionality to specific requirements.

A significant portion of this chapter was dedicated to understanding theming and the use of TOML files. This involves exploring how themes can be manipulated to change the look and feel of a Streamlit app, making it more appealing and brand-aligned. The use of TOML files was explained in detail, demonstrating how they can be used to define and manage these themes efficiently.

Finally, this chapter explored Streamlit’s multi-pages feature. We learned how to structure a Streamlit application into multiple pages, thereby enhancing its organization and user navigation. We offered practical examples and best practices for implementing multi-page applications, ensuring you can effectively organize complex Streamlit projects into more manageable and user-friendly formats. This comprehensive chapter has empowered you to elevate your Streamlit applications to new levels of customization and sophistication.

In the next chapter, we’ll learn how to enhance our web applications with Streamlit’s forms, Session State, and customizable subdomain features.