Power Apps Dynamic Form Schema | Add Controls on the fly

hello everyone reza here in this video i will show you how we can create dynamic forms in powerapps we will add the controls of the form dynamically based on the configuration information coming from a table in a data source of our choice dynamic forms come in handy in scenarios where we need to handle changes in our form configuration example surveys quizzes and scenarios around content type selection and more so let's check it out in action [Music] for creating forms in power apps we typically leverage the form control experience we can connect it to our data source of choice and once we make our connection it will load the columns associated with our table as data cards on the form there are many scenarios in which you would like to create your forms dynamically have some configuration table in your data source that decides which columns should be showcased on the form that experience is not possible with the powerapps form control firstly we need a table in our data source of choice to create the configuration information for our dynamic form this data source could be excel i have a table in excel that has the details of my dynamic form the labels the control types whether they are required or not and if it is of type choice what are the choices i would like to provide the same experience could be driven from any other data source for example a sharepoint list i have this power app that generates its form dynamically based on the configuration list in sharepoint i'll click on the plus icon to create a new record the form experience here loads dynamically based on my sharepoint list i have five columns defined here those are the five columns that are showcased on the form experience let's try and dynamically change the form by updating the configuration here i'll add a new entry title email column type text not required i'll click save once i've made the changes here if i try and create a new form our new column that i just added which was of type text label email is dynamically being added to the form experience so let's try and see how we can build a dynamic form screen experience from scratch i will leverage the same sharepoint form template experience so i need to connect to that list i will do that by going to data and connecting to my form template and i will store the results of my form in a separate list i have that list already created so i'll go ahead and connect to that as well when the user clicks on this plus icon i would like to go ahead and take the user to my form screen and since i will be creating a new form experience i will set a variable veriform mode to new and i will navigate the user to my form screen to create my form i need all the column information from my form template so for the app object on the onstart function i will load all the data from my form template list into a collection clear collect the name of my collection my data source which is form template if i was to run the onstart function of the app since i'm editing the powerapp my collection will hold all the data from that template list however if you look at the columns there are many internal columns that come in from sharepoint like created editor id and so and so forth i am only interested in these four columns so to keep the code clean show columns from my configuration list and i would like to show the following columns title required column type and choices if i run app onstart template only has those four columns i would like to add another column wherein i will store the data associated with the form that the user fills out i have added a column data and i've left it empty once again running app onstart we can see the form template having the data column which is empty in order to create the form experience based on that collection i will go ahead and insert a blank vertical gallery the items property for this gallery i will give the collection of my form template and inside this gallery is where we need to create all our controls title is the label associated with the column so for that i will edit the gallery insert a label control position it on the top left the text property for this would be this item dot title and the gallery template which is the first item i will reduce its height and this has loaded all the labels of my columns that i would like to create next i need to create the controls here i have a wide variety of column types that i will try and set up in powerapps to add controls in my gallery i will edit the gallery insert a text input position it on the right hand side i will remove its default value and this text box control i will set its visibility to this item dot column type is equal to text so only show this if the type of the column associated with the entry is of type text so name and email are of type text so the text box shows up for adding number type controls once again i will use a text box i've renamed this to number input i will position this here remove its default value and for the format option for this control i will change it to number and i will reduce the width of this control visible property would be this item.column type is number so we only see that option show up for the age column yes no type columns i'll edit the gallery and insert a toggle control show label i will turn it off visible for the toggle control would be if the column type is yes no next i'll insert a date control set its visible property to column type as date and for the choices control i will leverage a drop down control the items property would be my choices column the type here is text i have gone ahead and plugged in a semicolon after each choice value that is my separator to get the array of those choices i will use the split function on this item.choices and i will split this with semicolon for the drop down allow empty selection i will set it to true and this will be visible if the column type is choice now if i preview the app we can see the form in action if we would like to place this in a two column format can increase the width and for the wrap count of this gallery i will change it to two i can give my gallery a background color to highlight the form experience once i have the dynamic form configured i will insert a button so the user can submit the data of the form here i will create another collection i'll call this collection of submit that's the data that needs to be submitted to keep the schema consistent i will load this from my form template next i need all the data from this gallery i'll create another collection i will call it collection gallery data and this would be the name of my gallery control dot all items so it will load all the data inside that gallery into a collection however the schema of this collection will be different from the schema of the collection that i created to submit the data to my data source i will loop through all the items of my gallery collection and update the data inside the collection that i would like to submit my condition the title column of collection submit is equal to the title column of call gal data if they match then i would like to update the item and here i would like to update the data property to update the data i need to know the type of the column i'm dealing with i will use the switch function switch on this record dot column type and here i need to handle all my column types that i am supporting as part of this process if the column type is text then the data will come from my text box control the name of my text box control dot text if the type of the column is number the data comes from the number control that i created dot text and so and so forth for the yes no control i've leveraged the value of the toggle for the date it's the selected date and for the choice control it is the drop down control dot selected dot result i will close the function and then i will close my update if function and close my forall function now that i have all this data held inside a collection called call submit which will have the same schema as call form template but the data property would be filled out next step is to patch this data to my data source i would like to store my results now for that i have another list in sharepoint wherein i've created a column called result of type multi-lines of text here i will store that entire collection schema in the form of json i will use the patch function patch to my list called form results which i connected in my app i'm creating a new record so i'll use the defaults function defaults of my list and here i can define the columns that i want to patch the title column i'll just plug in the current logged in user's name and the result column is my multiline text field here i will use a function called json use collection submit this has the data that's filled by the user in the form and i will use the format compact close the curly braces and close the function this is what my patch command looks like and once the patch is complete i would like to navigate the user back to my home screen if i preview the app i'll fill in my details and click submit now i've been navigated to the home screen if i look at my results list here is the entry that got created this is the json format of my collection which has all the information including the data that i filled out in the form now in order for me to showcase all the data that's held in that results list i will leverage a vertical gallery control connect it to my results list i'll pick the title and subtitle layout and this will showcase all the data from my results list same scenario is what i implemented in my demo app as well here when the user selects a specific record it will load the form and the data associated with the schema that was stored for that record the challenging part is to read this data which is of type string and convert it back into a collection and there is no direct property in apps that can read json data in the form of string and convert it into a collection however this process was simplified greatly thanks to joey o'neal he has his blogging site up and running called steel cut bytes i will highly recommend you to follow him here when the user selects a specific item in the gallery i am loading the data into a collection and i am getting the data from my result column which is that multi-line text column thanks to joey if you use this formula called match all and you provide a regular expression that matches the schema of the json that you've put in play you can get all that data back directly in the form of a collection this might look complex so the way i simplified this is i have the following columns that i'm dealing with title required column type choices and data so here all i did is for the regex that joey provided i plugged in choices column type data required and title alphabetical order this also returns additional column types so once again i use show columns to only get that information and this returns that exact same schema that i had defined earlier then i'm setting my mode of the form to edit and i'm navigating the user to my form screen and the user wants to add a new record i'm loading that collection once again which is called data which has the data column as empty so when the user selects this will be an empty form but if the user selects any of the gallery items it would load the data basically the schema and the data is coming dynamically from that item i will share this app so you can directly go and grab this pattern and try this out this app includes additional capabilities as well for example i've also handled required fields and on the gallery section if you would like to show data that's being stored in this multi-line text field as independent data points i've once again used that same power fx formula called match all to grab the data points from there and then i've gone ahead and printed the independent values if you have created independent columns to store independent values even that i have covered in the submit function here by using a simple lookup function to get that value a very popular scenario is service or quizzes i want to create these surveys on the fly here i have an excel file wherein i have two tables the first table is a training feedback survey and the second table is an open enrollment feedback survey here i have a power app once again that leverages that same concept of dynamic form creation but i took this one step further when the user wants to provide a survey the first question i ask the user is which survey type or form type do you need are you looking out for the trading feedback form or the open enrollment feedback form if i pick training feedback it will load the columns dynamically from this table if i change this to open enrollment feedback you see how columns on the form are changing dynamically on the fly because the information now is coming from this table very similar to sharepoint content types so if i was to take the survey and submit here is the data going in on the backend table the individual who submitted it the response and the type of the survey and my gallery on the screen showcases all that information here's the training feedback survey and submit my response here is my entry for the training feedback for power bi i can select this and look at my response that i submitted the links to download these apps will be in the description for this video so do check it out 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: 6,726

Keywords: powerapps dynamic forms, powerapps dynamically add controls, powerapps dynamic questionnaire, powerapps dynamic schema, dynamic forms in powerapps, microsoft powerapps, powerapps forms sharepoint, powerapps tutorial, power apps, powerapps forms examples, powerapps form tutorial, reza dorrani, powerapps forms, powerapps, dynamic form in powerapps, dynamic form, powerapps json, powerapps json to collection, powerapps json function, power apps json parse, powerapps form control

Id: wQqetH2QLyk

Length: 18min 6sec (1086 seconds)

Published: Mon Dec 06 2021