Power Apps Dynamic Forms - Generate Forms From Question List

Imported reference from Matthew Devaney's blog for learning purposes. Original: https://www.matthewdevaney.com/power-apps-dynamic-forms-generate-forms-from-a-questions-list/. Author: Matthew Devaney.

Power Apps Dynamic Forms – Generate Forms From Question List Posted by - Matthew Devaney on - July 2, 2023 26 Comments

Power Apps dynamic forms can be created once and reused across multiple applications. The questions it shows, and the type of inputs it takes, are controlled by a collection of form configuration values. No re-coding is necessary to redeploy it. Dynamic forms are not a control type that comes out-of the box with Power Apps. In this article I will show you how to Power Apps dynamic forms Table of Contents Introduction: The Cheque Request Form Add A Blank Gallery To The Canvas App Display Questions In The Dynamic Form Text Input Response Type Number Input Response Type Radio Input Response Type Combobox Response Type Date Picker Response Type Preview The Power Apps Dynamic Form

Move The Dynamic Form Components Into A Vertical Container Setup The SharePoint Lists Submit The Power Apps Dynamic Form Test The Power Apps Dynamic Form Introduction: The Cheque Request Form

Managers at a construction company use the cheque request form to obtain a cheque from the accounting department. The form was developed to be reusable in other areas of the company with no additional coding. It shows different questions and response types based upon how it is configured. Add A Blank Gallery To The Canvas App

Open Power Apps studio and create a new app from blank. Insert the following controls onto the screen: Text input Radio Buttons Combobox Date picker Button

Then add a blank flexible vertical gallery to the screen.

Copy and paste the follow code into the Items property of the gallery. This table contains the questions and to be displayed inside of the dynamic form. The form will take user input in different controls based upon the defined response type. Table ( {

DisplayOrder : 1 , Question: "Purpose of check" , ResponseType: "Text" }, {

DisplayOrder : 2 , Question: "Amount requested" , ResponseType: "Number" }, {

DisplayOrder : 3 , Question: "Currency" , ResponseType: "Radio" , Choices: [ "USD" , "CAD" ] }, {

DisplayOrder : 4 , Question: "Company Name" , ResponseType: "Combobox" , Choices: [ "Apple Company" , "Banana Company" , "Cherry Company" , "Grape Company" , "Orange Company" ] }, {

DisplayOrder : 5 , Question: "Date required" , ResponseType: "Date" } ) Code language: CSS ( css ) Display Questions In The Dynamic Form

Every gallery row will show a question the user needs to answer. Add a new label control to the gallery.

Then write this code in the Text property of the label to display the question number and the question.

$ "{ThisItem.DisplayOrder}. {ThisItem.Question}" Code language: JavaScript ( javascript ) Text Input Response Type

The first form question requires a text type response. Therefore, we to show a text input for that question. Insert a text input into the dynamic form.

We do not want to show a text input for other questions in the form.

Use this code in the Visible property of the text input. ThisItem.ResponseType= "Text" Code language: JavaScript ( javascript ) Number Input Response Type

The second form question is a number response type. We can repurpose the text input to capture numbers as well.

Update the Visible property of the text input so it shows for both text and number type questions. ThisItem .ResponseType in [ "Text" , "Number" ] Code language: CSS ( css )

Then use this code in the Format property of the text input to control whether it accepts all text or only numbers.

If(ThisItem.ResponseType= "Number" , TextFormat.Number, TextFormat.Text) Code language: JavaScript ( javascript ) Radio Input Response Type

The third question of the form requires the user to select a response form a short list of options. We want to show these options in a set of radio buttons.

Add this code to the Items property of the radio buttons to display the values. ThisItem .Choices Code language: CSS ( css )

Use this code in the Visible property of the radio buttons to only show it for the radio response type. ThisItem.ResponseType= "Radio" Code language: JavaScript ( javascript ) Combobox Response Type

The fourth question of the form also requires the user to select from a list of Choices. But it is a long list of choices so we will use a combobox as the input method.

Use this code in the Items property of the combobox. ThisItem .Choices Code language: CSS ( css )

The list of choices should display in the combobox like this.

Use this code in both the DisplayFields and SearchFields properties of the combobox [ "Value" ] Code language: JSON / JSON with Comments ( json )

Then write this code in the Visible property of the combobox to only show it for the appropriate response type. ThisItem.ResponseType= "Combobox" Code language: JavaScript ( javascript ) Date Picker Response Type

The fifth and final question of the form requires a date response type. We will use a date picker to capture this value. Insert a date picker into the dynamic form.

We only want the date picker to show for date type questions.

Use this code in the Visible property of the date picker to only show when a date is required to be input. ThisItem.ResponseType= "Date" Code language: JavaScript ( javascript ) Preview The Power Apps Dynamic Form

Before we connect the dynamic form to a datasource we should make sure it is configured properly. Preview the dynamic form in Power Apps studio. It should look like the image below.

Move The Dynamic Form Components Into A Vertical Container

We want the form elements: title, form and submit button to be grouped inside of a single vertical container. Add a new vertical container to the screen.

Configure the vertical container as shown below. We want controls inside the container to stretch across the screen.

Insert a new label into the vertical container with the words “Cheque Request Form.”

Then copy and paste the dynamic form (gallery) into the vertical container. Turn off the flexible height. property once pasted into the container.

Lastly, copy and paste the Submit button into the vertical container so it appears at the bottom of the dynamic form. Setup The SharePoint Lists

The dynamic form will store the data it collects in two SharePoint lists. One table will store the individual responses to questions and the other will contain a header record that groups all of the questions together.

Create a new SharePoint list named Dynamic Form Header with the following columns: Title (single line text)

Then make another SharePoint list named Dynamic Form Items with these columns. FormHeader (lookup) Question (single line text) Response (single line text)

Add both SharePoint lists to the canvas app once they are created. Submit The Power Apps Dynamic Form

Once the user fills-in the dynamic form they press the submit button to write the data to SharePoint.

Use this code in the OnSelect property of the submit button. It stores values entered into the dynamic form in a collection. Then it creates the form header record and relates the form items to the header. // Collect form responses

Clear(colFormResponses); ForAll( gal_Form_Questions.AllItems, Collect( colFormResponses, { Question : ThisRecord.Question,

Response : Switch( ThisRecord.ResponseType, "Text" , txt_Form_TextNumberInput.Text,

"Number" , Text(txt_Form_TextNumberInput.Text),

"Radio" , rdo_Form_Choices.Selected.Value,

"Combobox" , cmb_Form_Choices.Selected.Value,

"Date" , Text( dte_Form_DateInput.SelectedDate, DateTimeFormat.ShortDate ) ) } ) ); // Create new header record Set ( varFormHeader, Patch(

'Dynamic Form Header' , Defaults( 'Dynamic Form Header' ), { Title : Index( colFormResponses, 4 ).Response } ) ); // Submit form responses ForAll( colFormResponses, Patch(

'Dynamic Form Items' , Defaults( 'Dynamic Form Items' ), { FormHeader : { Id : varFormHeader.ID, Value : varFormHeader.Title }, Question : ThisRecord.Question, Response : ThisRecord.Response } ) ); Code language: JavaScript ( javascript ) Test The Power Apps Dynamic Form

Now we are done coding the Power Apps dynamic form. Open the form in preview mode and test it by inputting values and submitting the form.

After submitting a new header record will appear in the Dynamic Form Header SharePoint list.

The items will also appear in the Dynamic Form Items SharePoint list. Did You Enjoy This Article? 😺

Subscribe to get new Copilot Studio articles sent to your inbox each week for FREE Enter your email address Sign Me Up Questions?

If you have any questions or feedback about Power Apps Dynamic Forms – Generate Forms From Question List please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion. Matthew Devaney M365 Copilot Power Apps

How To Create Copilot Custom UI Widgets In Power Apps