Tag Archives: Gallery

How to reset controls inside Gallery in Canvas App

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com

Lately designing quite a few canvas apps for specific modules and this is one issue we faced recently while working for a customer.

So the customer had a gallery control which was bound to CDS contacts and then there were some additional controls like Checkbox, Text inputs etc for each gallery item where end-users can make their choices.

Advertisements

While the actual screen looked much different, this is the mockup I came up for this scenario.

image

They wanted a reset functionality i,e when the reset button is clicked, the controls inside the gallery should be set back to their default  values. In other words in the example here the text inputs should be cleared and checkboxes should be unchecked.

Piece of cake we thought and out in the code on click of the Reset button

image

Well it didn’t work. And then tried something more stupid

image

Quite obvious, it won’t work. But why? A bit of search but this Microsoft Documentation just helped our understanding. This documentation on PowerApps Reset function is just what we we needed. If you go to the link, you would find this statement – “You cannot reset controls that are within a Gallery or Edit form control from outside those controls. You can reset controls from formulas on controls within the same gallery or form”

Advertisements

Quite obvious, the Reset button was outside the gallery and hence invoking Reset from there didn’t work. But is there a way out? Off-course there is one certainly and much easier than you may think.

So let’s first focus on the text input control inside the gallery item. There is a “Reset” property of the input item.

image

We are going to set it to a context variable however you can use App level variable as well which can be set using “Set” function.

image

You may get an error. that’s fine. This is because we haven’t yet declared the context variable.

Advertisements

Now on-select of the button you can write the below code.

image

Quite understandably, ResetTextInput when set to True, it would reset the text input to it’s default value. However you may ask the question – Why are we setting it to false? The reason for this is for the next operation when you click on the Reset button, it will again change the value from Context variable from false to true. Once a value change is detected by the framework, the Reset function would fire again.

If we don’t set to it to false post reset, it won’t work.

The same you can do for your checkbox. You can use the same variable or a different variable.

A simple one but can save you some time if you are not aware of it.

Advertisements

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)

create controls dynamically in Canvas App power apps using galleries

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com

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.

Advertisements

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

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

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.

Advertisements

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.

Advertisements

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.

Advertisements

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)