PyWebIO 1.3.0: Add Tabs, Pin Input, and Update an Input Based on Another Input | by Khuyen Tran | Towards Data Science

PyWebIO is a Python library that makes it easy for you to create a web application like below in a few lines of code.
In the last article, I have introduced some basic usage of PyWebIO, but you might want to do more than just those basic functions. Luckily, PyWebIO 1.3.0 introduces more useful tools to create complicated interfaces in a few lines of code.
In this article, you will learn how to:
Add tabs for better navigation
Update one input based on the value of another input
Persist the input
To install PyWebIO 1.3.0, type:
pip install pywebio==1.3.0
PyWebIO 1.3.0 allows you to add tabs to your app like below:
To add tabs, simply use the put_tabs widget. The arguments of put_tabs is a list of dictionaries like below:
Full code:
Sometimes, you might want the options of one input to change depending on the value of another input.
For example, in the GIF below, when I change the topic, the options of articles also change.
How can we create such dependency between two widgets? First, let’s create 2 dropdowns that don’t depend on each other:
As we expect, the options of articles don’t change when we change the topic.
Now let’s add a component that will create the dependency between these 2 dropdowns. That is input_update .
input_update should be put in the onchange callback of an input function. This means if the input function changes, input_update will be triggered:
The codeonchange=lambda t: input_update('article', options=topics_to_articles[t]) updates options of the input 'article' based on which topic is chosen.
Full code:
Output:
PyWebIO has many useful input methods such as select , input , radio , andcheckbox . Normally, the input form will disappear after you submit an input like below:
Code:
But what if you don’t want the input form to disappear after submitting the input like below?
That is when pin comes in handy. To allow your input to persist, first, replace the input.select widget with the pin.put_select widget.
While the widgets inpywebio.input will disappear after successful submission, the widgets in pywebio.pin will not disappear after submission.
Now we use pin_wait_change to listen to a list of pin widgets. If the value of any widgets changes, the function returns the name and value of that widget.
In the GIF below, whenever we change a widget, the shape is printed to the terminal. This means that a new value is assigned to new_shape when we change a widget.
To get the new shape and assign it to the current pin widget, use:
Last but not least, wrap the code above inside with use_scope(..., clear=True) so that the old image is cleared before the new image appears.
Put everything together:
Output:
You can find a full list of pin widgets here.
Congratulations! You have just learned about 3 new features of PyWebIO. There are so many more cool features of PyWebIO that I cannot mention here. I recommend you to check out PyWebIO website for other features.
Feel free to play and fork with the source code of this article here:
github.com
I like to write about basic data science concepts and play with different algorithms and data science tools. You could connect with me on LinkedIn and Twitter.
Star this repo if you want to check out the codes for all of the articles I have written. Follow me on Medium to stay informed with my latest data science articles like these: