Streamlit Forms + Submit Action Button Tutorial Demo | Python ML Web App Dev Tutorial

Key Takeaways

dear fellow coders welcome to one little coder has it ever happened to you that you built a streamlit application and it has got a lot of buttons or text boxes you know all these streamlet containers and then you know that if you make a small change in one of these containers the whole app is going to refresh imagine if you have got an app that is very huge now this is going to take a lot of time and you don't want this to happen all the time and if you are always looking for a workaround streamlet form and action button or submit button to be specific is the result for this and that is available from the latest update of streamlet which is i think probably streamlet um 0.81 so if you update to the latest framelit at this point of video recording which is probably 0.81 you can actually use streamlit form and in this video i'm going to show you how to use streamlet form and avoid the problem that i just said like you have a lot of components and every single change in any of these components would be refreshing this entire app but if you don't want this to happen we can define a form and every form comes with the submit button and then once you click the submit button everything happens it's not reactive anymore so it's action based so let's quickly go ahead and then build a simple app to see how streamlight forms work import streamlet that's nice and very simply we can say with streamlet form so there are two ways you can do it this way streamlet form key is equal to form one oops form one and then you can say um let's say some input that you want to collect say name is equal to st text input text input label enter and the model name okay uh let me just save it and then the next thing is uh you need a submit button so like i said every time there is a form you need a submit button so let's first do uh something with the submit button and then we'll see what happens if you do not have a submit button submit button or action button whatever you want to call it is equal to streamlight form let's go submit button and label this submit this form save it and this is done i guess so let's go ahead and then run that we have to we have to launch our terminal and then say streamlet run streamlet demo it's going to open the local host now case we need it uh and then it has given us a very beautiful error and then that error is simply saying hey you're so dumb because you have been using st a lot but you didn't just define the alias okay let's rerun this then you can see okay maybe i should add a title i should say uh title oops let me just make it big title is streamlet forms and submit demo okay so go back rerun it and then you can see like enter the model name model name um or say i should say random forest let's let's add some more component maybe like initially so you have a name you submit it and then once you submit it then it re-runs you can see here at the top so you submit it and then it happens like just because you are typing uh something is not happening so that's the first thing so if you have more components let's say like we have a slider so number is equal to st dot slide and within slider oops within slide i want to say enter a number let me make it big and your age min value is equal to 10 max value i'm definitely not building this app for 10 year old so it's still max value is equal to 100 and let's save it and then go back rerun it and we are going to see we have a slider so typically what happens is that if you have a normal app without streamlit oh sorry i'm sorry without streamlining forms the moment you change the slider this app would run so i can quickly show you that by taking this here by taking this here and commenting it save it rerun it then you would see the moment i move it it is running you can see that the moment i move the slider you can see this is running the moment i change the slider this is running because it's reactive let me even um print the number for you streamlet.com let's say text is equal to number okay um if i run it you would see the moment i move it you get it because it's reactive it's it's based on a reactive programming paradigm but you don't want this to happen all the time like something you might have built it very heavily and you don't want this to happen so that is the place where you want to use a a new beauty which is streamlined form so now i'm still printing the number but you can see when i rerun it okay this is python your friend okay are you happy python are you happy you're not happy you're still not happy okay you're still not happy because i have done some simple mistakes cool so right now you've got the model name it shows 10 because we initialize this app with 10 but what if i change it to 60 it's not showing anything 60 because we are making sure that this doesn't run until we press the submit so if you are familiar with the web development um any web development framework even in for that matter you know you have got your html normal html form where um like you know that's why ajax javascript you know started coming in where people wanted to do things without uh them actually without them actually playing with the apps uh sorry action button so you can actually have a look at this and then say now if i submit the form i'm saying random forest submit the form then you can see that now the number has changed to 60 it has changed because once you submit the form then it refreshes the entire app it's not going to do it every time so that's the greatest advantage and you can use it for a lot of things for example if you want somebody to create an environment like maybe like let's say somebody's going to register gpu using your streamlit app so even for a single change or simple change maybe it was not possible before like maybe you had to do some hacky work around to you know come over this but right now it's quite simple forms are going to be tremendously useful so there are um like multiple ways to define a form you can either use the width clause like this and then you can do it um or if you do not uh if you do not prefer this and then you prefer like um like a form type so what you can simply do is you can say instead of this i want to say my form is equal to i can say my form is equal to form and key is equal to key is equal to form one like this and then i'll be i'll be using uh you know um like my form this everywhere so i can do like this save it and let's run it and you can see like it is still intact like we have changed the complete code uh so it is still working so you can either do with the the with syntax or you can do it with the object notation however you want it to happen you can do that there are a lot of potential that is available for example you can actually you know now use a streamlit to create like normal forms like actual forms like a contact us page kind of form uh and uh where um you know you have uh like uh like people uh can submit content you can submit it on a google google sheet or you have a database you have a lot of options um that you can do it with form so the other thing is um you can in fact define forms within columns so quickly copying the code from streamlets simulates beautiful announcement page i'm going to show you that within columns you can still have forms so which means uh you can define as many as columns you want and you can define uh the form so like i said before form is going to be extremely helpful where you've got a heavy application so couple of weeks back i had made a video about streamlight dashboard so you can you can build sales dashboard marketing dashboard and all these kinds of dashboards using streamlit and i had showed you how you can define layout and streamlit forms are going to be extremely helpful because unlike the name suggest it's not typically a form it's an action button so you get an action button i don't know how many of you are familiar with um tableau's apply button so a lot of times you know like if you have a long list you don't want the dashboard to refresh every time you would make sure that there is an apply button uh after the filter or a parameter so that somebody would necessarily select something and then still click that apply button for it to refresh so that you know like you are avoiding unnecessary things and that's the greatest thing about this you have all these options somebody says like okay i want to do this then select then make the change so yeah so streamlight forms submit button can be used also within columns and uh you can use like multiple columns within the forms as well like instead of doing it alone so if i have to show you that you can say like this is sd markdown i can say columns insert forms okay and renard you can see columns inside form so i can define columns within forms as well like forms can go inside columns columns can go inside form i'm still like slightly uh wondering why why are they calling it form um i'm not i'm not very sure about the naming here but what i'm very sure is that this is this is definitely going to help this is definitely going to help a lot of people uh especially people who are passionate about um passionate about building a lot of streamlight applications so if you are one of those uh if you are somebody who who likes to build a lot of streamlined application you should definitely check it out so one last thing before we find uh finish up this video what if you don't give a submit button right like we have been telling that a form should have enough submit button but what if you don't give a submit button and it's always good to test out things right so go back like i just commented the submit button re-run it oops says missing submit button this form has no submit button which means that the user interactions will never be sent to your streamed application to create a submit button use blah blah blah and then you have got all the you know description so what basically it does is um if you like but but the other components are working so you can notice like the other components are working but for the for the form where you have not defined service button so it is going to throw uh an error which is like more like an exception which you can handle it's not going to you know completely block the entire application so it's it's not like a compulsive error i should say probably maybe it's a very wrong word to use when you have a when you have a python um application but uh yeah it's going to throw an exception uh you would see a meaningful error and then that would help you say that okay okay probably i missed out submit button and that's why this is happening if i don't want that to happen i just have to go back to my code and add submit button and once i add submit button it's going to it's going to work fine just fine um and let's let's run it save it come back and uh are you going to read on it yeah source change rerun it and it should not show the error at this time so that that takes us uh to the end of this um video tutorial which i wanted to make it quite short so streamlet um has introduced streamlight forms and submit button which are going to be extremely helpful if you want to build a very large application where you don't want every single option to refresh your application so if you want to keep an action button typically like your html action button where um where you know you just want a couple of uh for a couple of options like uh with um like containers and then at the end of all these actions if you want to refresh then streamlet form is for you again you can capture data with this send it to your db or send it to your let's say like google sheet whatever you know wherever you want to expose the data so it's going to be extremely helpful uh i would encourage all of you to try it out and if you have any questions please uh you know feel free to reach out to me and uh until uh that i i hope you stay safe um especially you know like where i make this video from currently it's quite tough so yeah stay safe i hope your family is doing good and take care of yourself