Design your Power Apps Forms | Form Control Tutorial

hello everyone in this video I will show you how to design powerapps forms we will transform the style of the powerapps form control change fonts colors of the controls within data cards make these transformations in bulk change the data type of controls within data cards highlight validation errors create sectionated forms Tab deforms and a lot more so let's check it out in action foreign [Music] I have a power app that is connected to a SharePoint list a list that has a wide variety of column types text dates choice and more to create a record edit a record or view a record from our connected data source in this case the SharePoint list one of the most popular techniques is to leverage the form control experience I will add a new screen and insert the edit form control which can be leveraged to edit create and view a record from our data source I will connect it to my data source and this will go ahead and add data cards for each of the columns that are created for that SharePoint list we can edit the fields reorder the fields by simply selecting them drag drop each data card in a form control comprises of four controls star visible showcases the text star if the data card is required error message that is related to the data card when the user tries to submit the form data card value is the control that gets displayed depending upon the data type of the column title description or text columns priority is a choice column represented as a combo box start date as a date column data card key is the header label that gets displayed for the data card I will select the default mode as new so that when I preview the app we can see the form in action as if it's a new form experience under media I already have a background image that I have uploaded so for my form screen I will set the background image to that image file and the image position would be fill plus I will go ahead and insert a group of controls that will create this header like experience for the form control I can set its color property however if I would like to give rounded edges I will set its color back to transparent and in this screen I will insert a button control fill property I will set to White X property would be the name of my form control dot X y property will be form control dot y the width will be form control dot width the height will be form control dot height now this button control I will set it to display mode View and I need to ensure that this button control is sitting behind the form control so I will reorder this to send it to the back so now the button control is creating that background effect for the form and the button control has a border radius property that I can change to create those curved edges because I have a scroll bar experience in my form for the button controls hide property I add an additional 30 pixels and for the Y property I will subtract half of that which is 15. the button controls positioning is relative to the form so if I was to change the width of the form or change the height of the form notice how the button control that's the background of the form will follow suit now star visible as a control that is shown if that field is required in your data source in powerapps itself if you would like to make a data card required you can simply select the data card and you have to ensure that you unlock the data card since you are making changes to its property and once you have that card unlocked you can head over to its required Field property and change this to true so observe now category is also a required field now to allow the user to submit the form I will insert a button control I will call this submit on select of this button I will leverage submit form of task form so here if I try to submit you will see how the error messages are being displayed that these fields are mandatory the standard data card has the star visible label control and this is applied to each and every data card irrespective of it being required or not and one of the performance considerations is to keep the control count of your app low for each of my data cards I will go ahead and select the star visible control and start deleting them bear in mind you have to unlock your card first in order to make changes so once your card is unlocked you can start deleting now I'll show you a trick way through which we can add the star to the header which is the data card key control we will set it for all the data cards in one go select the form control go and change the property layout layout for my scenario is currently vertical I'll change it to horizontal and after this Ctrl Z that's undo this will go ahead and select all the data card value and data card key controls now from here I am only interested in the data card key controls so I will hold the control key and start selecting the value controls so they are unchecked once I do that I have all the data card key control selected for these I will head over to the text property by default the text is parent dot display name I will change this to if parent dot required required property will let me know if the parent of the data card key controls which is the data card itself if it is required in that case I will plug in the star symbol put this in double quotes put an ampersand to concatenate it with the display name it has gone ahead and added that same concept of showing the star symbol if the data card is required the benefit here is that it's doing all of this with a single data card key control rather than two controls and this same technique is what we can leverage to style our header label controls for the data cards to highlight that these are required so if I go to the color property of my header labels here if parent dot required in that case let's say I put the color dark blue else I leverage the color as is if I was to select priority and set its required property to true you will observe how the label color style changes for the priority column plus the star symbol is displayed now this color that I just added I hard coded it inside the formula but we can make this dynamic app object on start function I will set a variable and let's say I set this to a color dark orange I will right click this app object and run on start so that this variable has the color set and I can visually see this in the PowerApp itself change the layout Ctrl Z unselect the value controls so I only have the keys selected the color property instead of hard coding it I will drive it from that variable we can see the change reflected right away to change that highlight color purple I will run a pawn start and we can see the change right away for my SharePoint list I have a number type column in which I have set a Min value and a max value if I provide a number outside of that range notice it gives me an error I'll start with the title data card I'll hold the control key once you have multiple cards selected Ctrl a now data cards have a property fill if is blank self dot error error property is blank meaning there is no error The Fill property is the same as before else I would like to go and set the color red and use color field to fade this color by let's say 0.9 so now we have this nice visual indicator highlighting the data cards where there are any validation errors the moment I plug in a value that is valid you can see how that error goes away by default If You observe for my labels and my controls the font property is set to the following font and I can change this to any of the options that are provided in the fonts enum now if you would like to incorporate custom fonts here you can simply go ahead and plug in the name of that font assuming your device understands that font and the devices where this power app would be run on also support that specific font I pick a specific custom font I will select the form control change the layout undo so it selects all my keys and values in one go I can go to the font property and change this to the specific font Patrick hand and we can see how the fonts have changed for all my controls change the font for the entire app in one go you can go to search simply search for that standard font go to replace I will replace this with my variable which is where formed I'll click replace all and it will replace all the instances priority is a choice column in my scenario to change the combo box control to let's say a radio button control for this data card I will insert a radio control the layout property I will change this to horizontal the combo box control the items property it's a choice column so it gets the choices from the priority column I'll copy this items property and plug it to the items property of the radio button control this radio button control will have a default property I will set this to this item Dot my column Dot value because it's a choice column Since I no longer need this combo box control I will delete it which will result in some errors my radio button control I will copy its name go to the error the error is related to the combo box control that I deleted so I'll just replace the reference of the combo box control with my radio button control this has now gone ahead and transformed the experience of the priority column from a combo box control to a radio button control this will continue to respect any validations let's take the numeric control now I know that the values that are allowed here are from 1 to 5. so let's change this experience to a slider control the slider control has a Min value which in this case is 0 the max value I will set it to 5. the default value I will set it to parent dot default and my case for a new form that value would potentially be empty so I can also Leverage The coalesce function here to set it 0 the text control I do not need this so delete will result in errors copy the name of the slider control start changing the references slider control provides a property called value so I'll simply use that for this data card I will insert a label control and the text would be slider control dot value for a new form set to 0 and as the user changes it will start setting the value accordingly notice if it's 0 and if I try and submit my validation error would still come in play date column the standard date picker control the user has to navigate through each month in order to go to a specific date plus they have to make a selection and click OK that's when the value drops in in Microsoft teams if I go to the powerapps app click on start and let's say I create an app for a specific team give my app a name and click save if I add the date picker control this control has a different experience for adding the dates now you can simply go ahead and copy this control Ctrl C in the same browser experience itself I'll go back to my canvas app I will paste that control right here I will delete my standard date control remember this will result in errors I have to make the changes fluent divided control the output comes in the value property so I'll just pick that and here now we have a completely modernized date control experience to select from if you head over to Advanced so if I was to try and select the date notice I can only pick the date from today onwards up to 30 days for all my controls if I would like to give it this lighter gray shade as the fill property Bill property I'll pick the color white smoke for the form control if you go to edit fields here under three ellipses we have the ability to add a custom card so I added that custom card that I will drag and place right at the top this custom card I will drag across the entire width and I will reduce its height for this custom card I can insert a label control I will call this heading 1 a rectangle shape so here we can see how it creates this section experience to add more sections for the form control once again add a custom card this one let's say I place it right here so this now is my second header section and so and so forth for my screen I will insert a horizontal gallery set its layout to blank to begin with I'll ensure that this Gallery sits right at the top of my screen in this Gallery control I will insert a button control set its fill property White reduce the template size the items property of this gallery I can create a simple array of objects I will have a property called title which will give the name of the tab and then a property called ID which would be the ID associated with the tab for the text property of the button I will leverage this item dot value Dot title on select of this button I will set a variable called where tab selected to this item dot value dot ID now whenever the user visits the screen on visible I would like to set that variable to 1 so the first tab for the button control fill property I will change this to if where tab selected is equal to this item dot value dot ID I will put the color dark blue else I will put the color white so if I go to a different screen and I land on to my form screen you will note that the highlighted tab is the first tab for the color property of the bottom if it is the highlighter tab put the color white else use the color black so now if I preview the app as I select these different tabs you can see how the selection changes and that variable value is changing next I need to decide which data cards would I like to place in which tab and to do that for the form control select a data card that you would like to include let's say I would like to include title I'll hold Ctrl pick another data card go back and pick the previous one so now it starts multi-selecting so the visible property of this I will set it to where tab selected is equal to 1. so if I pick Tab 2 notice those columns are gone tab 1 Tab 2 Tab 3 attachments is the only data card that I would like to place in Tab 3 I have basically broken that form into three different tabs if I click submit the same validation rules will apply something very similar is what I have implemented here these are my tabs just tiled differently plus if I click on submit it throws those validation errors however notice even the tab shows which tabs have validation errors to do that for my gallery control that shows the tabs in the items property I have an extra property called not valid here I leverage the coales function and I include the names of all the data cards that could potentially result in an error in that specific tab and I use the error property which gives the text of the error if they are not blank means definitely there is an error so it is not valid and I do the same thing for my second tab and in that case I am leveraging the two data cards priority and assigned to and then this not valid property is what I leveraged to show this star symbol because this will result in true or false so that's how the star symbol shows up and the moment I complete the validations you can see how the star symbol for header 2 has gone away if you enjoyed this video then do like comment and subscribe to my YouTube channel and thank you so much for watching

Channel: Reza Dorrani

Views: 62,031

Keywords: powerapps form design, powerapps ui design, form control styling, power apps, powerapps, powerapps form control, form control in powerapps, powerapps data cards, powerapps form design ideas, power apps form designer, powerapps styling, power apps design, powerapps design ideas, design, tutorial, app design, reza dorrani, low code, microsoft, reza dorrani youtube, powerapps design, powerapps ui design examples, power apps ui ux design, ui, ux, style, sharepoint, style forms, how to

Id: rFDFWQWk81k

Length: 23min 6sec (1386 seconds)

Published: Mon Jan 23 2023