Custom States | Bubble.io Tutorial

[Music] custom states are really useful when you want to temporarily store some information on the page and not in the database i would say that states are probably one of the most widely used pieces of functionality within any application let me show you what i mean so i've set up a quick admin dashboard and what we're going to do is set up some navigation states to show and hide different groups on the page based on clicking on these menu items we're going to set up a state to be able to filter various people by team and we're going to set up the states to apply a list of users to a project let's start with creating a toggle menu to then filter out the various team members so in the database we have a user and a user belongs to a team what we're going to do is display the teams in a repeating group here the teams here and these teams have a list of users so in this repeating group what i'm doing is just searching for all the teams let's actually sort starting with a and let's drop in a button in the cell because we can see the shape of the button we don't need the separator so i'm going to remove the style and the repeating group set that to none okay now we're making a selection so actually the button should probably be a gray color when it's deselected with black text i might make this background slightly lighter and this is set to the current cells team's name so if we refresh the page and what we want to happen is when we click on these buttons for instance brand turns to green stays green and we just see the people that belong to the brand team what i'm going to do is change the conditional for the moment okay let's run through the workflow to set the state of a particular team now if we start edit the workflow we'll go down to element actions and set state okay it's asking you to attach a state to an element we can attach states to any elements on the page we can do it to the button we can do it to the repeating group but actually the best way to do it is to set all your states on the page because later on when you have lots of states that you need to edit you'll know where to find them so my page name is called states for my demonstration here we can see it's called states so first of all i'm going to set the state to the state element which is the page now it's saying what type of state do you want to set so we create a new custom state now it is a team that is a repeating group of teams when we click the button we're clicking on a team so we go find team there it is there okay we're just selecting one team at a time so we gonna leave that unchecked state name state name is team this is just for our reference be nice and descriptive we're just setting a team and we have to set the value the value is the current sales team the beauty of working with repeating groups is that you can always access the current sales team or the current sales user so now we've created a state and what exactly have we done what we are doing is at page level in the user's browser we're temporarily making a selection and storing that selection in the page it's invisible you can't see it but we can use that to apply functionality we can change the button to green because we made the selection we can filter repeating groups let's change the button to green when we click on the particular teams so on the conditionals tab we're going to say we're going to find the state first where is it it's at page level my page is called state now it reveals the state that you created earlier remember we called it team when the state's team is current sales team which it is because we're clicking in that current cell when that matches then change font color to white and then change the background to green so we click the button we set the state of the particular cell we're clicking in and then we tell the button that when that state exists when we've made that selection then change the color so that's feedback to the user that they they know confidently that they have selected that team so we can select marketing or hr sales okay how else can we access that state let me just show you with a piece of text again where is the state it's at page level and the page is called states at the bottom the state is called team and that team what is its name well that's dynamic so that actually should turn up when we click these hr brand marketing so as you can see states are invisible but it allows us to store temporary information if i refresh the page it disappears okay what about filtering this based on the state so what we'll do is in repeating group user currently i'm searching for users i don't have any constraints and this is when we'll create a new constraint called team so team has to match the team state we created so when that equals the page called state and the state called team then show those users it belongs to that team so brand hr marketing sales and social media so this is a very powerful feature as you can see it runs very quickly but when we refresh the page nothing now there is something i wanted to show you that pertains to having no selection and it is ignore empty constraints so a constraint is this that we've created so on page load a state is deleted or if you refresh the page the states disappear so by checking this box it allows me to display just search for all users and ignore this section if i had to uncheck this which says you mustn't ignore empty constraints then it will have no results so when we want to start by default by showing everything on the search we have to check this box that will show us all of the unconstrained results and then we can select from there how else can we use states well what about showing and hiding different groups so over here we have users so i can double click and this is group users i can start edit the workflow and i can create a new custom state from element actions set state i'm going to set it back at page level and i'm going to create a new state and i'm going to call this view this is just for my reference no one else will see that and i'm just going to use a simple piece of text and i'm going to actually type in my keep my keypad users so when this button is clicked we're setting an invisible piece of information and it's just a piece of text and the text says users how can we use this well why don't we do this why don't we say define each border independently set a right border style of solid maybe three and i'm going to set it to the same color for now so by default nothing shows until selection is made i'm setting to the same color okay and what we'll do is on the conditional tab in group users we will say that when go find that state we we just created it's called view when the view is and then use your keypad users then do something visual to indicate that users is selected why don't we say border color right green and if i check here we have our users however before i made a selection users was actually showing so this is where it gets interesting because by default we can remove all visibility and only showed on a button click so nothing is showing and now we're selecting users nothing will show just yet because on group users we have to match the same conditional we also have to say that when a page level when the view is users then this element is visible so when we click the button show the group by default you can't see the group now click here made the selection they're our users and now we've got other states to play with what about clicking across to teams here we have teams and it's not visible on page load if we go to the conditionals tab and i say that what about if the state's view is teams then show that group okay so that's the view side but we do have to set up the workflow we do have to set this up when we click in that area then we're going to set state and it's the same as the previous one that page level this the custom states is called view but we're going to change the value of that to teams so i use my keypad type in teams when users is selected change the value of the view custom state to users and we can do the same thing here on the conditionals tab we can say that when the state's view is teams just have to set this up quickly right hand side is solid three and the default color is the same as the background i don't want anything showing by default okay that's all set up so now we can access border color right and change that to green so i can click users and i can click teams and jump between them and if i refresh the page nothing now you're probably wondering well nothing isn't useful can we set a default state in the app itself and the answer is yes we can so we know all of our states are a page level we know that so if we bring up the inspector we inspect the page my page is called states this eye icon shows you more information about the page and what do we have there are our two states nice and neat at page level and this input for my view is saying set a default if you like i'm going to say users just using my keypad so now when i refresh the page that state will kick in and i'll show all of the conditional statements that we set up for users that's the default state so there will be always be a default you'll never have an instance where there is nothing to show i can see a slight problem on teams here forgot the s states aren't just used for showing and hiding information or changing button conditional colors that kind of thing they're much more powerful we can also use states to create lists of data to then later on save through a workflow if we have a large list and we allow users to make selections from that list we don't have to write the database for every click that's that's a bit of wasted bandwidth in my opinion what we can do is set a state to save those selections on the page itself and not hit the database yet and then once the selections have been selected and the person has made up their mind then we run a single button click to just save that list so if i check this project button here what we're going to do is create a project make a state selection here and then run on a single button click a workflow to create the project with the name and add the users that we've selected now we can't just click on these users now and save them to the database because the project hasn't been created that's why we need to temporarily create a state list to save those selections and then during the creation process of the project that's when we save that list to the project so what we're going to say is that when we click on a name we are going to set a state and this is a slightly different state i'm just going to call this states i'm going to save it to the page i'm going to create a new state and call it members better yes project members now what are they what is in that repeating group that repeating group is showing users and it's showing a list of users we want to select a list we can still select one but ideally it will have more than one we want flexibility so i'm creating a new state called project members which is a list of users why is it a list of users because we're making a selection from search for user okay so we've defined that we're creating a custom state which is a list of users an invisible list that's set to page level and because it's a list if if you think about a list that exists we have a list of people and then we want to add or remove them from that list so the value which actually have to start with to point to that list first the list is here project members so we start with this expression we say the value is this list if the list doesn't exist this is part of the creation process as well okay and then we have if you click on the more we have something called scroll down something called plus item and then we can access current cells user so take the list and then add current sales user that's what it's doing and then how do we show the user that that user is added to this invisible list because this list is invisible well we can use this icon here we can create a conditional that says when that list that invisible project members list when that contains the current sales user from this database view here in the repeating group well then change the icon let the user know that a successful selection has been made maybe change the color as well okay perfect let's try this out so here is our repeating group and i can make selections so this is an invisible state list but we know which ones they are that we are clicking on because we've got this confirmation checkbox now what about deselecting because we can select at the moment and this is where we need to set up we need to split the workflow in two with a condition because at the moment we can only plus item so i'm going to right click copy and right click paste so we have two conditions and i'm actually going to color them we have two conditions pertaining to one action that one action is clicking on that piece of text so there's the text there there's the same text there for this one i have set the state to this list plus item current sales user very simply for the opposite one all we do is change plus item to minus item okay minus item so remove something from the list that exists we're not quite finished yet because we should only be removing something from a list if it is on that list to begin with so on this only when what we have to do is say that when that state list contains current sales user then set the value then minus that user from that state list and on this one we'll say that when that project members list doesn't contain current sales user then add it to the list let's try it okay so we can add remove add add add remove perfect so at this stage we have successfully made our selection now how do we actually save that to the database so we've got our invisible list and we've confirmed it with this check icon so now we can create the project first of all we're going to say create a new thing because we we have a state list and a name so the name is the input project names value and members what now members isn't equal to members isn't one member name is a single thing it's equal it's a key value pair members is a list if we look in the database we have a project members is a list of users and so is our project members state so what we're going to do is just add list and then go find that's that state list which is project members if we wanted to if we had an existing list that we wanted to replace would say set list but we are adding list at the moment and then i'm just going to close the pop-up so let's create a new project let's call this seo campaign and let's add these three members caleb no just add those three members now we can create the project and in the database we now have a new project and there are three members seo campaign and those three members so i have states all over my pages and it's a very flexible way to be able to capture data in forms and show and hide various bits of data as well as good feedback for when people are clicking on certain elements

Channel: Buildcamp

Views: 18,939

Keywords: bubble, bubble.io, nocode, custom states, gregory john, bootcamp, nocode development, app development

Id: 9DgHUmicjlM

Length: 23min 33sec (1413 seconds)

Published: Thu Oct 01 2020