The scenario here is to modernize the added form control experience in powerapps modernization that supports modern theming.
Utilizes modern controls and the form experience is responsive by Design with the classic added form control experience.
That I have added to the screen I can connect it to a data source of choice in my case the data source is a SharePoint list called issue tracking.
And I have a wide variety of column types here from text to choice to person to dates and more once the form control is connected to the data source you can select the.
Classic controls and these data cards are built depending upon the type of our columns text columns it will leverage the text input control.
Choice columns combobox date columns date picker let's try and modernize classic form control experience by adding modern controls.
Now I have done a video on modernizing the home screen of this power app wherein we created a responsive screen with a gallery that utilizes modern controls.
And respects the modern themes so we will continue to build from this point onwards this Gallery is connected to the same data source which is my issue tracking.
SharePoint list when I select this edit button I am resetting my form control then I am setting the mode of the form.
Posts Related:
- Color Gradient Photo Overlays Bundle Download For Photoshop Sheri Sk Photoshop Tutorial
- How to build Professional Excel Add-in. Excel Add-in Development course Office
- How To Create A Personal Financial Planner In Excel FREE Download + Masterclass Office
To edit by using the function edit form - ID Card Make
And then I navigate the user to the form screen when I click on The View button I reset the form.Use the view form function to set the mode of the form to view and then I navigate the user to the form screen and when this plus icon is clicked I reset the form.
Called the new form function to set the mode of the form to new and then navigate the user to the form screen if I click the plus icon the form is a new form experience where the user can.
Create an item in my SharePoint list if I select an item to edit it will open the edit form experience where I can modify that selected item and if I select an item to view this.
Will show me the data of that item in a read-only experience the form control has a property called item this points to the gallery on my home screen.
Dot selected the first card is a column called title of type single line of text I will go to Advanced and unlock the data card so I can make changes to this.
With the card selected I will go and insert the modern text input control the classic control I do not need it so I will delete it this will result in a few errors in the.
Card which we will fix shortly I will place this modern text input control right here this control I will rename to text input title.
The errors here the first one is related to the error message label control which is a part of the data card experience this had references to the classic control that I deleted so all I have to.
Do is replace that reference with
My modern text input control and the other error is related to the update property of the data card this I will replace with my modern text.Input control dot value I'll select the modern control in the data card its value property I need to set it to.
Parent dot default so if you notice it shows the default value of the item that I selected in the gallery if I go back and pick a different item.
You can see how the modern text input control changes the default value issue description this is a column of type multi-line of text.
The steps would be very similar unlock the data card insert the modern text input control delete the classic control the errors.
I'll give the reference to my new modern text input control and the update property of the data card would be the modern text input control dot value.
And for this control the value property will be parent Dot default the modern text input control if you head over to properties one of the modes is multi-line so I'll select.
Multi-line and I will increase the height of this control so that now is a modern text input control experience that's handling a.
Multi-line text column next I have three Choice columns in my SharePoint list category priority and status and for all of these let's try using.
Different modern controls let's begin with status is a choice column single select First Step I'll select the status data card.
Go to Advanced unlock go and insert the modern drop down control the classic drop down control its items property is as follows.
This lists out all the choices that are a part of that column so I'll copy this select my modern drop down control and set its items property to that same.
Formula the classic drop down control I will delete the modern control I will position it the errors.
Let's fix it by giving it the reference to the modern drop down control update would be modern drop down control dot selected.
The modern drop down control I have the item set fields I can go to edit add field and select value so now if I preview this you can see how it lists out all the choices.
And for this control we have default selected items this will be parent dot default so it's defaulting to the status of this item.
And I am free to make changes to it next let's take the category column which is again of type choice now this one only has two choices.
Select the data card unlock the data card in here I will insert the modern tab list control items property of the classic control I.
Will copy I'll select my modern tab list control set its items property classic control I will delete I'll position the modern control.
Let's fix the errors by giving the reference of the modern tab list control and then the update property of the data card will be tab list dot selected and the default selected items property.
Of the modern tab list control will be parent dot default so if I pick a specific item you can see how the default value of this tablet control is changing.
And for the user to make the selection they simply have to select it so it will update its value when I go ahead and submit next choice column is priority.
Unlock the card insert the modern radio button control classic controls items property I will copy the modern radio button control I'll set.
Its items property I will delete the classic control position my modern control update the references that are erroring out.
Update property of the data card will be the modern radio button control dot selected and the default selected items property of the modern radio button control will.
Be parent dot default now the modern radio button control if we go to properties we have different layout options to choose from you could select the vertical layout you could.
Select the horizontal layout or also select the new horizontal stacked layout in this scenario it fits perfectly in this amount of real estate that I have so that's how we are representing the.
Choice column value in the same data card I will insert the modern progress bar control I will adjust its width to be similar to the width of my radio button control.
Now for priority I have four choices and you notice I have this max value property for the progress bar control I will set this to 4 and the value property of this control.
