Microsoft offerd App in a Day (AIAD) events to customers globally throughout the year! These events are free one-day workshops where you learn how to create custom business applications that run on mobile devices without writing code! If you cannot attend one, here is a link to the AIAD resources.
To give you a little bit of a background about the use case, imagine an organization where employees go through a hardware refresh cycle every 3 years. The organization wants to streamline the device order, procurement and approval process. The app used for device ordering needs to run in a web browser and on mobile devices, which (drum roll!) is a canvas app!
In the canvas app, users can select multiple devices to compare them before requesting one. It allows you to pick as many devices as you want. A question came up on one of the AIAD sessions that I was hosting. This is how the screen behaves if you follow the lab instructions:
During one of the AIAD sessions that I was hosting, one of the attendees asked me if there was a way to limit the number of devices that a user could select for comparison. Something similar to the experience you see on Microsoft Surface website, or any other similar website that allows you to compare devices. It was great to have an attendee ask a question beyond what the lab instructions ask you to do. I had to come up with a response on the fly (I will be honest, I took some time over the lunch break to put this together, so it really wasn't on the fly!). Anyways, here is the list of instructions to achieve that:
- On checking the checkbox, increment a variable. Add the following to the OnCheck property:
OnCheck: Set(checkedItems, checkedItems+1) - On unchecking the checkbox, decrement the variable. Add the following to the OnUncheck property:
OnUncheck: Set(checkedItems, checkedItems-1) - Disable the checkboxes when 3 of them are checked.Set the DisplayMode to the following:
If(checkedItems=3, DisplayMode.Disabled, DisplayMode.Edit) - This disables every checkbox when 3 of them checked. However, we want to disable only the ones that are not chceked. Modify the DisplayMode property of the checkbox to the following:
If(checkedItems=3 && Checkbox1.Value=false,DisplayMode.Disabled, DisplayMode.Edit) - To make it more prominent, change the Text property of the checkbox from "Compare" to the following:
If(Checkbox1.Value = true, "Selected", "Select") - Add the following to the OnClick property of the "Clear Selection" button:
Set(checkedItems,0)
With these changes, the screen behaves as shown below
This is a great example of how not only the attendees but the instructors also learn a lot at AIAD sessions!
Have fun! Get addicted!