How to Build a Dynamic Form Generator in Canvas Apps Using JSON Metadata
Overview
Dynamic form generation in Canvas Apps unlocks new levels of flexibility, scalability, and maintainability—especially in business scenarios where form requirements change frequently or need to be tailored per user, region, or workflow. By using JSON metadata to describe your form structure, you can render forms dynamically at runtime—without hardcoding the layout or logic.
This document walks through how to build a fully dynamic form engine step-by-step using Canvas Apps and JSON metadata.
Step 1: Define Form Metadata in JSON
The first step is defining your form using structured JSON. Each field is represented as a JSON object, specifying properties such as label, control type, and validation requirements.
Example JSON:
[
{
“label”: “Project Name”,
“controlType”: “TextInput”,
“required”: true
},
{
“label”: “Start Date”,
“controlType”: “DatePicker”,
“required”: true
},
{
“label”: “Description”,
“controlType”: “TextInput”,
“required”: false
}
]
You can store this JSON in a collection, a SharePoint column, Dataverse, or retrieve it via a web API.
Step 2: Load Metadata and Generate Controls
To render your form dynamically, you’ll first need to load your JSON metadata and then use a Gallery to repeat each field visually. Inside each gallery row, controls are rendered based on their type using visibility toggles or layout logic.
🧩 2.1 Load JSON Metadata Into a Collection
You can store the form metadata JSON in a variable, collection, or even retrieve it from a data source (like SharePoint or Dataverse). Here’s how to load JSON into a collection from a string:
ClearCollect(
FormSchema,
Table(
{
label: “Project Name”,
controlType: “TextInput”,
required: true
},
{
label: “Start Date”,
controlType: “DatePicker”,
required: true
},
{
label: “Country”,
controlType: “Dropdown”,
required: true,
choices: [
“USA”,
“UK”,
“Canada”
]
}
)
)
🖼️ 2.2 Create and Configure the Gallery
Insert a Vertical Gallery into your screen.
Set the gallery’s Items property to: FormSchema
Inside the gallery template:
Add a Label to show the field name:
Text: ThisItem.label & If(ThisItem.required, ” *”, “”)
Insert all the controls your form might use:
Text Input → rename to TextInputControl
Date Picker → rename to DatePickerControl
Dropdown → rename to DropdownControl (optional for now)
👁️ 2.3 Toggle Control Visibility Based on Type
Use the ThisItem.controlType property to show only the relevant control in each row.
Set the Visible property for each control:
TextInputControl: ThisItem.controlType = “TextInput”
DatePickerControl: ThisItem.controlType = “DatePicker”
DropdownControl: ThisItem.controlType = “Dropdown”
🔄 2.4 (Optional) Bind Dropdown Items
If your JSON includes a “choices” property for Dropdowns:
Example metadata:
{
“label”: “Country”,
“controlType”: “Dropdown”,
“required”: true,
“choices”: [“USA”, “UK”, “Canada”]
}
Set the Items property of DropdownControl to: ThisItem.choices
Step 3: Capture User Input
As users interact with dynamically generated controls, you’ll need to collect their inputs.
ClearCollect(MyCollection,””);
ForAll(Gallery1.AllItems,
Collect(MyCollection, {
Label: label,
Value: Switch(controlType,
“TextInput”, TextInput1.Text,
“DatePicker”, DatePickerControl.SelectedDate,
“Dropdown”, DropdownControl.Selected.Value,
)
})
)
Implement a helper function or logic to abstract the retrieval per control type (TextInput, DatePicker, etc.).
Step 4: Submit Data
Once inputs are captured, use the Patch() function to save them into a data source like Dataverse, SharePoint, or Excel.
Example Patch:
ClearCollect(ProjectSubmissions,{ProjectName:””,StartDate:””,Country:””});
Clear(ProjectSubmissions);
Patch(ProjectSubmissions, Defaults(ProjectSubmissions), {
ProjectName: LookUp(MyCollection,Label = “Project Name”).Value,
StartDate: LookUp(MyCollection, Label = “Start Date”).Value,
Country: LookUp(MyCollection, Label = “Country”).Value
})
You can also call a Power Automate flow and pass the entire form JSON as a parameter for custom backend logic.
Step 5: Test & Maintain
Test your generator with various field types and combinations.
Use versioned JSON for better control.
Enable logging or auditing if needed.
This method empowers you to deliver adaptable business apps faster, with far less effort spent on UI rework.
Summary
Benefit | Description
——–|————
✨ Flexibility | Easily change form structure by editing JSON
🏛 Scalability | Use same form engine across apps or teams
⚖ Maintainability | No need to open Power Apps Studio for form edits
References
– Power Fx Documentation: https://learn.microsoft.com/en-us/power-platform/power-fx/overview
– Power Apps JSON Function: https://learn.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-json
– Custom Components in Canvas Apps: https://learn.microsoft.com/en-us/power-apps/maker/canvas-apps/component-overview
Want to Go Even Further?
Connect form metadata to SharePoint, SQL, or Dataverse for real-time configuration.
Use Power Automate to auto-generate and update forms based on backend schema.
Create a Form Builder Admin app for power users to manage form logic themselves.