Power Apps - Think Outside the Checkbox

Technologies:

1. Power Apps
2. Check Boxes
3. Alternatives to Check Boxes

Power Apps Checkboxes!

We use checkboxes almost everywhere from To-Do lists, on websites where we have to agree to the use of cookies, agree that we have read an understood a privacy policy, agree to terms and conditions, add items to a shopping cart and more.

See! Checkboxes are everywhere.

1st Use Case!

Add items to a Shopping Cart!

In this case all we would need to do would be to add or remove from a Collection.

I set the following,

• In the Screen OnVisible Property create a Collection, I named mine,

1colSelectedImpulseItems

Other Properties!

• OnCheck:

1Collect(colSelectedImpulseItems, {Title: ThisItem.Title})

• OnUncheck:

1Remove(colSelectedImpulseItems,First( Filter(colSelectedImpulseItems, Title=ThisItem.Title)))

Since a collection is a set of records, we need to use the First(Filter)) function to find the record we need to take action on.

2nd Use Case!

Use check boxes as Radio Buttons

Top Scenario!

Screen OnVisible Property I created a variable named StateStatus

1Set(StateStatus, "Pending");

Approved Checkbox Properties:

Default:

1If(lblStatusResult.Text = "Approved", true, false)

OnCheck:

1Set(StateStatus,"Approved")

OnUncheck: Set(StateStatus,"Pending")

Rejected Checkbox Properties:

Default:

1If(lblStatusResult.Text = "Rejected", true, false)

OnCheck:

1Set(StateStatus,"Rejected")

OnUncheck:

1Set(StateStatus,"Pending")

Bottom Scenario!

Approved Checkbox Default Property:

1If(ThisItem.Title = "Approved", true, false)

Rejected Checkbox Default Property:

1If(ThisItem.Title = "Rejected", true, false)

In this scenario, if one checkbox is checked, the other will be unchecked!

Alternatives to Checkboxes!

Buttons!

Screen OnVisible Property create a collection,

1ClearCollect(colSelectedItems);

Add Button OnSelect Property:

1Collect(colSelectedItems, {Title: ThisItem.Title}

Delete Button OnSelect Property:

1Remove(colSelectedItems, {Title: ThisItem.Title})

Icons or Images!

Screen OnVisible Property create a clear and create a collection:

1ClearCollect(colSelectedItems);

Add icon's OnSelect Property:

1Collect(colSelectedItems, {Title: ThisItem.Title}

Delete icon's OnSelect Property:

1Remove(colSelectedItems, {Title: ThisItem.Title})

Radio Buttons!

Screen OnVisible Property clear a collection:

1ClearCollect(colSelectedItems);

Default: ""

OnSelect:

 1If
 2    rdoToggleShoppingCart.Selected.Value = "ADD",
 3    Collect(
 4        colSelectedItems,
 5        {Title: ThisItem.Title}
 6    ),
 7    Remove(
 8        colSelectedItems,
 9        {Title: ThisItem.Title}
10    )
11)

Toggle Buttons!

Screen OnVisible Property create a collection:

1ClearCollect(colSelectedItems);

Default:

1false

TrueText:

1"Remove"

FalseText:

1"Add"

OnCheck:

1Collect(colSelectedItems, {Title: ThisItem.Title})

OnUncheck:

1Remove(colSelectedItems, {Title: ThisItem.Title})

Change the DisplayMode!

Screen OnVisible Property create a collection:

1ClearCollect(colSelectedItems);

ThumbsUp Icon DisplayMode:

1
2If
3    ThisItem.Title = "Approved",
4    DisplayMode.Disabled,
5    Edit
6)(

ThumbsDown Icon DisplayMode:

1If
2    ThisItem.Title = "Rejected",
3    DisplayMode.Disabled,
4    Edit
5)(
6Status Text Color:
7If(ThisItem.Title = "Approved",ColorValue("#00E676"),ThisItem.Title = "Rejected",ColorValue("#FF3D00"),ColorValue("#E3F2FD"))

Change Icon Visibility!

Screen OnVisible Property create a collection

1ClearCollect(colSelectedItems);

ThumbsUp Icon Visibility:

1If(
2    ThisItem.Title = "Rejected",
3    true,ThisItem.Title = "Pending",true
4)

ThumbsDown Icon Visibility:

1If(
2    ThisItem.Title = "Approved",
3    true,ThisItem.Title = "Pending",true
4)

If the line item has been Approved, we hide the Rejected Icon and slightly fade the Approved icon.

If the line item has been Rejected, we hide the Approved Icon and slightly fade the Rejected icon.

If no action has been taken on the line item, we show both the Approved and Rejected icons.

Status Text Color:

1If(ThisItem.Title = "Approved",ColorValue("#00E676"),ThisItem.Title = "Rejected",ColorValue("#FF3D00"),ColorValue("#E3F2FD"))

Just some of my thoughts on this!