Wondering how to create controls dynamically in Canvas App? Galleries can be a workaround

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”.

image

image

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.

image

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.

image

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.

image

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

image

2. Textbox Binding

First we bind the “Default” property of the textbox to the value property of the Collection.

image

Then we bind the visible property to the below formula as shown in the screenshot.

image

3.  Checkbox binding

Bindings are similar to the Textbox input. Check for below screenshots.

image

image

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.

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)

Author: Debajit

I am a Dynamics CRM Most Valuable Professional (MVP) with 12 years of experience in Microsoft .NET Technologies and 9 years of dedicated experience in Microsoft Dynamics CRM. I have worked with companies like Microsoft, SanDisk, PwC, TMF Group and have extensive experience of implementing complex CRM solutions from both offshore and client side. Currently the face of XrmForYou.com with significant experience in delivering corporate training on Dynamics CRM and have already delivered multiple projects to client through XrmForYou.com Author of multiple tools on codeplex including the 'Role Based Views' and 'CRM-Sharepoint Metadata manager & Attachment Extractor' which are available for commercial use under XrmForYou.com For consulting/ training, drop me a note at info@xrmforyou.com or visit our website www.xrmforyou.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s