Transcription
Hello guys, welcome back. My name is Andrei. In this video episode, I'll show you the code snippet and explain how to render dynamic forms in Streamlit.
So let's go and jump to my screen. This is the application I'm using, and the purpose of this application is to allow users to label or annotate documents like invoices or receipts.
Users can select the elements on top of the receipt document, and in the form on the side, assign proper labels or fixed values that were calculated or constructed by the OCR engine.
Yeah, right. And there it is. Here, as users select the element, the form is updated. The form element, which is related to the rectangle that is selected on the canvas, becomes enabled. The user can change the label over here or fix the value and save the data.
All right, so obviously this form is dynamic because every document will have a different set of elements to process, and we need to render the form dynamically. Dynamic forms are generated very easily in Streamlit because it runs with Python on the server side.
With Python, it's easy to implement dynamic stuff, and then the form UI is rendered by Streamlit from the server, and the HTML response is returned back to the client. So all the job is done on the server side.
If we jump to the code, we'll see this is the portion of the code that renders the dynamic form. It can be improved because there are two columns, and the code for both columns is technically the same.
So we can write a function and call it from the loop, but just for simplicity and because this code may change in the future, I just keep it like that for now.
Anyway, the idea is that first we calculate the number of columns, either one or two. We divide the length of the fields by two. This allows us to understand how many rows we'll have in the first column, and the rest of the fields will go to the second column.
In a loop, we iterate through the Python dictionary and check if we should still render in the first column or in the second. If we are in the first, we're using column one element, and in the other case, we're using column two element.
Inside the column, for example, we render the text input select box, and based on user input from the select box or value which was changed, we are updating a rectangle data for this specific entry. The same thing is done inside the second column.
That's why I mentioned that technically you could create just a function to minimize the amount of code.
Because Streamlit applications, every time you click on the UI, this request is sent to the server, and the script is re-executing. So every time, on every request, it will execute.
You need to adjust your mind to the way how Streamlit works because there are no callbacks. This is why you need to call update rectangular data because maybe in this request, data will be changed, maybe not.
But in any case, we need to call update rectangular data with the values that are being returned from the text input and from the select box. If the values will not be changed, they'll stay the same.
Essentially, functional is good, but they'll stay the same. If the values will change, then they'll be updated. This way of coding may look redundant initially, but at the same time, it makes the application flow simpler, and I think it's well-suited for data applications.
Right, and one thing to mention: in order to be able to render columns, those two columns are for the form. This is the first column, and this is the second column.
But the Streamlit application is using also another set of columns. The first column to render the document, the second column to render this form. By default, Streamlit applications don't allow running nested columns on the second level.
To make it possible, I installed the Streamlit nested layout community component. You just need to import that component, and the address—you don't need to do anything. You just use the columns as you want, and it magically works.
Hopefully, the same functionality in the future will be available in Streamlit out of the box.
Yeah, so this quick explanation shows how to render dynamic forms in Streamlit. This is really simple because it's done in Python on the server side, and you don't need to worry about HTML or JavaScript stuff.
All those things are taken care of out of the box by Streamlit. So thanks for watching, and see you next time. Bye!