Send Companion Dropdown with airSlate SignNow

Fax byline dropdown

if you're like me and quite particular about the look and feel of your brand and your application then you probably want to explore using your own custom drop downs let me show you what i mean so i have a repeating group with an input on the left and a drop down on the right however this is the native drop down you see across most applications and i prefer something that looks a little bit more like my own brand so to achieve this what we'll need to do is use a combination of groups and group focus to create the functionality i'm going to remove this element and just resolve these two issues it looks like i just need to remove that and we're good [Music] okay first of all let's create a group this will act as the drop down [Music] i'm going to match this input style [Music] e b e b e b and this will be the element that we click on to show our group focus next i'm going to add some text [Music] this will display our team name [Music] let's say select team [Music] okay i'm going to add a material icon you can add a regular icon if you don't have material icon installed [Music] this would be arrow just positioning it okay great just gonna have a look at the responsive very quickly put that to the right that's to the left okay so we've got a group in place with some text and a material icon looking better already let's apply the group focus so down here we have group focus and i'm going to just drag it in with the approximate width okay we need to attach it to this group drop down that we created the drop down is 207 in width with an x value of 728 so 207 it looks like it's attached i'm going to remove the style and just add some shadow so i'm going to use outset 16 change the box shadow color to jet black and set that to about 8 percent this is tried and tested for me which is why i'm just rushing through it now i want the top piece roundness let's do five everywhere yeah that's fine and to make the group focus appear we need to run a workflow that when we click this group drop down box this appears so we're going to start edit the workflow and say element actions and toggle so toggle is like show and hide but it's just done in a single workflow if it's not showing show it if it is showing hide it show the group focus a let's see where we are with this okay fantastic this looks much much better than the default drop down that is provided but how about the options within here so for those we're going to drop in a repeating group to display the teams straight from the database but then to select a team we actually have to create a custom state very simple won't take very long at all so firstly to display the results we're going to drop in a repeating group [Music] i'm just going to have that all the way across [Music] the repeating group is team and the data sources simply do a search for teams we want to grab all teams and the design we have will be vertical scroll so that this doesn't grow any longer you have to scroll within the box let's grab some text this will act as the team name so that would be current cells teams name and i wanted to start with a similar x value to this which is 22 let's change this to 20. let's change this to 20. it is 20 already okay [Music] just going to position that slightly and i've decided that the background color will be white [Music] so let's check on progress [Music] so select team here are the team names perfect so this is looking real nice now how do we make the selection and apply the constraints to this repeating group i'm going to start edit the workflow on this piece of text and i'm going to go down to element actions and then set state i'm going to set state to the page that's where i set all of my states because it's easier to go back to the page and just find a list of those states now the states i've already set one for user list i'm going to remove that i'm going to create a new state and that's just going to be called team what are we selecting well we are actually selecting a data type of team team would be the current sales team okay and to show an example of how we retrieve that state i'm just going to put in some demo text here and we're going to reference that state the demos team's name so when i make a selection it's going to populate this just to show you what's happening in the background social media marketing hr let's apply it as a search constraint on this repeating group [Music] so any field contains the input search's value so that is searching this input any text within this row now team is not a text team is a team data type there is text in the team data type but it's not text in this row which is why we have the drop down [Music] however we can find a team from the state that we created [Music] demos team so now now we can filter this repeating group by social media or by marketing or by brand now let's go one step further let's much like a drop down show the state that we have selected or the team that we have selected so what we'll do is say on the select team text we're going to add a conditional that states that when the demos team is not empty so when we have made a selection then let's just change the text to display that selection by saying then access demos teams name what we're also going to do after making the selection we're going to set the states and we're going to hide this group focus [Music] [Music] marketing their changes to marketing hr changes to hr so i hope this has given you a good indication of how you can customize your own drop downs to really match the look and feel of your brand