Before I even go ahead and add more on this. Spoiler alert! This blog is not going to introduce you to a new API which allows you to add/ remove controls dynamically in a canvas app. As of the time of writing this blog, there is no API in canvas app to accomplish this feature similar to controls.Add() or controls.Remove() feature in ASP.NET.
Before I even go ahead and add more on this. Spoiler alert! This blog is not going to introduce you to a new API which allows you to add/ remove controls dynamically in a canvas app. As of the time of writing this blog, there is no API in canvas app to accomplish this feature similar to controls.Add() or controls.Remove() feature in ASP.NET.
Here I am going to discuss about a workaround that I recently implemented for a customer having similar requirement.
Long story short, the customer had a requirement like this –
- On a canvas screen, there is a button to get the add checklists for a record. The number of checklists are dynamic and depends on user selection of other parameters.
- Checklists can be of type textbox where the user can enter data manually or of type checkbox
- one checklist of type text and the other of type checkbox are shown by default to the user
- The user can add as many checklists they want and the instructions for each checklist is dynamic as well.
So let’s see how we can set-up a quick POC for this.
First I go ahead and create a new blank app.
Then I go ahead and insert a vertical gallery control. I rename the gallery to “ControlsGallery”.
I delete all the contents of the gallery and insert three controls.
- Label – To show dynamic instructions
- Text Input – For text input checklist.
- Checkbox – For checkbox checklist.
Also added button to add or remove checklist.
Our next task was to populate the Items of the controls gallery. But we had a requirement that by default couple of checklists should be shown to the user.
We use the App OnStart event to declare the collection.
ClearCollect(DynamicControls, {Type:"Textbox", Value:"", Instruction: "Default Checklist 1"}, {Type:"Checkbox", Value: "", Instruction: "Default Checklist 2"});
What we are doing here? We are basically creating a collection called “DynamicControls”. And in the collection we are inserting two items. Each item has three properties.
- Type – To determine the type of checklist
- Value – The value input of the checklist control
- Instruction – The label to show for the checklist.
The next step is to set the Items collection of the Gallery to this DynamicControls collection.
Once the Items property is set, it’s now time to bind our control elements in the gallery to the corresponding properties of the collection. Below are the bindings of each.
1. Instruction Label binding
2. Textbox Binding
First we bind the “Default” property of the textbox to the value property of the Collection.
Then we bind the visible property to the below formula as shown in the screenshot.
3. Checkbox binding
Bindings are similar to the Textbox input. Check for below screenshots.
We are all set with the bindings. I created some extra stuffs to actually add instructions at runtime using Add Checklist button. Below is the entire stuff in action.
[wpvideo F7OHiOYR]
I hope this helps!
Debajit Dutta
(Dynamics MVP)
For consultation/ corporate training visit www.xrmforyou.com or reach out to us at info@xrmforyou.com
Our product offerings:
Role based views for Dynamics 365 (http://www.xrmforyou.com/role-based-views.html)
CRM-Sharepoint Attachment uploader and metadata manager (http://www.xrmforyou.com/sharepoint-integrator.html)
Record Cloner for Dynamics 365 (http://www.xrmforyou.com/record-cloner.html)