Nested If

Coding in a dynamic manner is usually one of the best ways to construct a solution. In doing so, designers and programmers try to reduce the amount of guess work that the end user has to do in an effort to keep them productive the process streamlined. To make this magic happen, developers have to do the guess work programmatically. This requires them to get creative and inject varying forms of logic into the solution. The end user may enter data the same way every time, but the output may not be as straight forward as the entry.

In Power Apps, one of the forms of logic that we have available to us that allows us to lower the amount thinking the user has to do is the If() function https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/functions/function-if. In short, the If() function checks to see if a condition is true then returns a result. The results of the evaluation can be a function that is nested inside of the If() or something as simple as a color or line of text.

Side note: The focus of this tutorial is the nested If() function. Additionally, the Switch() function will be featured as well. If I am being honest and I am, I didn’t want to write another section that spells out the switch function. The Microsoft Docs link that I provided about speaks about both functions.

The focus of the this blog will be nesting If() functions inside of another If() function. The scenario that we are programming for is moving an application from one environment to another. In order to move environments the application must have approval from the qualified individuals in the current environment. Our signoffs will be collected when a user checks a box. The checkbox visibility will be controlled by the selected items property in a dropdown control.

As always navigate to make.powerapps.com and what we want to do is create a canvas app it doesn’t matter which form factor you choose to utilize. For this exercise I will be using a mobile phone form factor.

Our first order of business is to add a dropdown control to our canvas.

In the items property enter the following

["","DEV","Test","UAT","All"]

Next we’re going to add a Switch() function into the OnChange property of the dropdown control. The purpose of this is to set a visibility variable based on the selected text in our dropdown.

Enter the following PowerFx expression into the OnChange property of the dropdown.

Switch(
Self.SelectedText.Value,
" ",
And(
UpdateContext({VarCheck1: false}),
UpdateContext({VarCheck2: false}),
UpdateContext({VarCheck3: false})
),
"DEV",
And(
UpdateContext({VarCheck1: true}),
UpdateContext({VarCheck2: false}),
UpdateContext({VarCheck3: false})
),
"Test",
And(
UpdateContext({VarCheck1: false}),
UpdateContext({VarCheck2: true}),
UpdateContext({VarCheck3: true})
),
"UAT",
And(
UpdateContext({VarCheck1: false}),
UpdateContext({VarCheck2: false}),
UpdateContext({VarCheck3: true})
),
"All",
And(
UpdateContext({VarCheck1: true}),
UpdateContext({VarCheck2: true}),
UpdateContext({VarCheck3: true})
)
)

Next we’re going to create our three checkboxes. The visibility of each checkbox will host one of the context variables that we created in the previous step.

For this instructional, the checkbox names will be generic. In the we will leverage two of the properties in our checkbox. The first being the default property. We want to use this property to set the default value of our checkbox to false if the checkbox is not visible. We will also use the visible property to toggle visibility on and off based on the selected item in the dropdown.

In the default property of the first checkbox or Checkbox 1 enter the following PowerFx expression If(VarCheck1 = false,false)

In the visible property of the first checkbox or Checkbox1 insert our context variable VarCheck1.

Using context variables VarCheck2 and VarCheck3, repeat the previous steps for Checkboxes 2 and 3.

Once we have our checkboxes wired up we can test the visibility of our checkboxes.

Now the moment that we’ve all been waiting for…..the Nested If().

If you have been following along and I hope that you have, the series of steps that we went through will all be brought together once we implement the Nested If(). Tying this altogether…If a checkbox is visible it must be checked in order for our submit button to become active. Removing a checkbox by changing the selection in the dropdown will clear it and only the remaining checkbox will need to be checked.

So…lets insert a button. We will leverage two properties here. The text property and the displaymode property.

In the text property of our button, enter in the following formula.

If(
If(
Checkbox1.Visible = true && Checkbox1.Value = true || If(
Checkbox1.Visible = false && Checkbox1.Value = false,
true
),
true
) && If(
Checkbox2.Visible = true && Checkbox2.Value = true || If(
Checkbox2.Visible = false && Checkbox2.Value = false,
true
),
true
) && If(
Checkbox3.Visible = true && Checkbox3.Value = true || If(
Checkbox3.Visible = false && Checkbox3.Value = false,
true
),
true
)

&& If(
And(
VarCheck1 = false,
VarCheck2 = false,
VarCheck3 = false
),
false,
true
),
"Ready to Move",
"Not Ready to Move"
)

At first glance this may not be easy to understand so I’ll break it down. Essentially, I have one If() function encasing multiple if functions, I then put another if function inside of that…still confusing. I know. So lets go with the basics.

The nested if works like this. We have a parent or top level If() function that houses the first If() function for Checkbox1 and it reads like this.

If(

If(Checkbox1 is visible(true) and Checkbox1 is checked (value = true) or

[another nested if]

If(

Checkbox1 is not visible(false) and Checkbox1 is not checked (value = false), then evaluate this If() to true

), If all conditions in this function are met, evaluate to true

)

If’s nested inside of another roll up to the parent, it is important that when you are designing your nested Ifs that you keep this in mind.

Finally we will leverage the display mode of the button. Paste the following into the displaymode property.

If(
If(
Checkbox1.Visible = true && Checkbox1.Value = true || If(
Checkbox1.Visible = false && Checkbox1.Value = false,
true
),
true
) && If(
Checkbox2.Visible = true && Checkbox2.Value = true || If(
Checkbox2.Visible = false && Checkbox2.Value = false,
true
),
true
) && If(
Checkbox3.Visible = true && Checkbox3.Value = true || If(
Checkbox3.Visible = false && Checkbox3.Value = false,
true
),
true
)

&& If(
And(
VarCheck1 = false,
VarCheck2 = false,
VarCheck3 = false
),
false,
true
),
DisplayMode.Edit,
DisplayMode.Disabled
)

And now for the final reveal..

I promise I’ll get better at these…Please leave feedback.