Fax Custom Us State with airSlate SignNow

Fax custom us state

[Music] in this tutorial we're going to learn about custom states we'll learn about what they are why they're useful and how we use them any element in bubble can have data attached to it which can be used to store information for the duration of users on the page this is what we call a custom state we use custom states primarily for two reasons when we want to control the current view for instance to allow the user to navigate between different tabs on a page and when we want to store temporary values in workflows to run calculations or manipulate data in a custom way so that you can use results in following actions or elsewhere on the page with custom states we're able to store information without always having to interact with the database this can save you time and speed up your application we can create custom states in two different ways first we open up any property editor and click the eye icon for the element inspector in this panel we define the name of our custom state and the type that this state will be as a reminder the page itself is also an element so it's common to store custom states here you define states exactly like you define custom fields for data types in that we can make our custom state type text type number type yes no etc the second way we can define a custom state is through the action set state the set state action is mainly used for setting the value of a state however it can also be used to create a state on any element all without leaving the workflow tab now that we know how to create custom states let's take a look at some examples and use cases for them on our page we have two buttons one for show and one for hide and we have one group called group a we want to use these buttons to control the visibility of the group using a custom state to do this we'll open the element inspector for group a where we'll define our custom state and call it group a as visible and set it to type yes no and by default this custom states value will be yes now in group a's property editor we will use this custom state to set matching conditionals to do so since we stored the state on the element we will choose this group and a list of options will appear showing our custom state let's click that to start writing our expression here we will write two conditional statements one for if the custom state value is yes and one for if the value is no depending on which conditional is yes or no group a will show or hide now we need to set the custom state we do that as a workflow action to set the custom state we will add actions to these two buttons for a button show we'll start a workflow and immediately use the set state action here we will retrieve the group group a and the custom state group a is visible and set the value to yes we'll start the workflow for the hide button and copy and paste the action from the show button and paste it in we'll then change the value from yes to no now when we preview we can see the workflow setting the custom state and group a showing and hiding we can also use custom states for calculating things on the page for example we'll make a custom state called count and set it to type number with this we'll add two elements to the page a button element and a text element which will display this count as text we'll create a workflow on the button and in it we will use the set state action again we'll select our index page and retrieve the count custom state this is the state that we want to set to add to the count we'll select it as the value indexes count and add 1 to it now when we preview the page and click add count we see the count increase since bubble evaluates expressions from left to right we can't directly calculate equations using pemdas we can get around this though by using custom states we'll make three custom states on the page count a count b and count c all of type number we'll give count a default value of 1 count b a default value of two and we'll leave count c blank imagine we want to solve the equation one plus two times three we can write this expression directly in a text element using count a for one plus count b for two and multiplied by 3. when we preview though bubble will evaluate this left to right giving us a result of 9 and ignoring the order of operations if we wanted to do this including the order of operations we would set it up with our custom states like so with a button on the page we'll start a workflow and set the state of count c count c's value will equal count b times three in the order of operations this multiplication is what we want to execute first so it's our first step in the workflow we can then create another set state action setting count c again this is important step one sets count c to equal two times three so here in step two when we get count c again we'll get the result from step one and then we can add count a since we now have that result stored in count c we can come back to our text element and display count c when we trigger the workflow bubble will now evaluate this equation using pemdas giving us a result of 7. bubble comes with an element called the tab element which relies heavily on custom states for it to work when we add the tab element to the page it brings with it three groups one of which is visible without doing anything we'll preview our app and see how the tab element behaves by default we have three buttons and when we click on them we switch which tab is visible in the element inspector of our tab element we can see that we have a custom state of current tab which is a type number if we click on the intergroup's conditionals we see that if current tab equals 1 the group is visible if it's not 1 the group is hidden the same goes for each button here at the top of the tab element if current tab equals 1 we change how the button appears to show it's the active tab we can follow this pattern to every other group and tab that we have in this element unlike our previous example where we toggle visibility with yes no current tab is a number which gives us more flexibility to add more than just one group to show and hide when we added the tab element workflows were automatically added to control this custom state each button has its own workflow so when we click on the tab it sets the value of the current tab to the corresponding number and to make sure we always reset the tab we have a page load event that will set the current tab back to 1 whenever we refresh the page the tab element itself is extremely customizable and adding a fourth tab would be as simple as copying and pasting the necessary button in groups renaming it to tab 4 and in the conditionals change the custom state value to trigger when current tab equals 4. we'll also copy the button and change its value as well we'll even do the same for our workflow and when we preview we have a new tab tab elements like this are used all the time through many different apps all powered by custom states another more advanced example of using custom states is when we combine it with elements like repeating groups in this example we'll make a to-do list without having to save anything to the database first we'll add a custom state to the page itself this custom state will be called to-do list and it will be a list of typed text next we'll add a repeating group to the page and set its type of content to text since repeating groups are lists we'll set our data source to our text list custom state indexes to-do list in the first cell of our repeating group we'll get the current cells text to add to-do's we'll create an input and button element to the page in the button workflow we'll set the state first we'll get the to-do list itself then for the value we'll set it to to-do list and utilize the plus item operator to append the value of our input box to the list to follow this action we'll reset relevant inputs and preview our app when we write in our to-do we'll be adding to our to-do list custom state which will show in our repeating group to delete these entries we'll add a trash can icon to the first cell in our repeating group we'll start a workflow on it and copy our action from when we add the entry we'll modify this action so instead of using the plus item operator we'll use the minus item operator instead and instead of the input to do's value we'll get the current cell's text value now when we run our app and add to dues we can delete them as well some important things to keep in mind when relying on custom states one refreshing the page will reset every value in a custom state as it's not being stored in the database two which element you apply a custom state to is entirely up to you as each use case for the custom state is specific to your app three you can only access a custom state if that element is on the page if you want a custom state to be accessible on multiple pages try placing it in a reusable element like your app's nav bar in some instances custom states can reduce load time as keeping temporary data versus stored in the database is faster and more convenient even when you have a situation where storing a value in the database is a must it may be best to store it in a custom state first and then save to the database later to avoid saving many things at once in our recipe sharing application that we built on our crash course build your first app we have a signup pop-up that collects a ton of information with custom states we're able to turn this initial signup form into a two-step process first we add a new group to the pop-up and only ask for the incoming user's first name in our popup we have two states one for tracking the user's name and the other for controlling which group is being shown when we click next we fire off the workflow which will set our first name state and we will also switch the view to the next form utilizing the first name from the previous step we can present it in the text here so the user gets a more personalized experience from there we create the user to the database like we did originally though this time the user's name is being read from the custom state now when we preview this we can see how the signup form behaves and with this you can easily take this concept further to make longer more complex forms all thanks to custom states custom states are a powerful feature that can be used to save your data temporarily in any way you can think of as you continue to build you'll find yourself using custom states more and more as they facilitate your data creation and help improve your app's usability that's it for this tutorial for more be sure to check out bubble.io academy