@Vaneza try below nested If statement. Use calculated control on the form (name it calc_ctrl_HidePanelFormula) and always hide it. Make sure you calculate formula in all 3 modes.
If(equals(DD1, "PSV"), True, If(and(equals(DD1, "PSE"), equals(DD2, "No")), True, If(and(equals(DD1, "PSE"), and(equals(DD2, "Yes"), equals(DD3, "No"))), True, If(and(equals(DD1, "PSE"), and(equals(DD2, "Yes"), and(equals(DD3, "Yes"), equals(DD4, "No")))), True, False)))
Now, on you panel add formatting rule:
calc_ctrl_HidePanelFormula != "True" ----> Check Hide Panel
Thank you for your help! I have created the calculated field and added the formula. Its currently not hiding the panel. I don't think I am calculating the formula in all 3 modes.
Can you tell me how I need to calculate the formula in all 3 modes?
Thanks
@Vaneza when you open your calculated control's configuration window, you will see "Recalculate formula on ******* mode", make sure it's Yes for all 3 modes.
Also, could you please confirm if you're using Named Control or Item Property in the formula I gave you?
I created a little test form with a few controls on it
The controls are named, quite literally, DropDown1 ~ DropDown4. The only difference is that DropDown1 has the values of "PSE", and "PSV". all of the other controls only have the values of "YES" and "NO":
If we take a look at the logic you've hammered out and convert it into javascript, we get something that looks like:
(
(DropDown1 === "PSV") ||
(DropDown1 === "PSE" && DropDown2 === "NO") ||
(DropDown1 === "PSE" && DropDown2 === "YES" && DropDown3 === "NO") ||
(DropDown1 === "PSE" && DropDown2 === "YES" && DropDown3 === "YES" && DropDown4 === "NO")
);
(note 1: In JavaScript the "||" symbol refers to Logical OR, and "&&" refers to Logical AND, because they are easier to use than the or / and runtime functions, I will be using them instead)
I've exaggerated the formatting to make it a bit more apparent, but this code is very literally following what you wrote in your original post:
I have a panel that needs to unhidden based on four different scenarios:
- DropDown1 must equal: "PSV" for the panel to unhide
- If DropDown1 is equals: "PSE" but field value DropDown2 is equal to "NO" the panel should unhide.
- If DropDown1 is equals: "PSE" but field value DropDown2 is equal to "YES" and DropDown3 is equal to "NO" the panel should unhide.
- If DropDown1 is equals: "PSE" but field value DropDown2 and DropDown3 are equal to "YES" and DropDown4 is equal to "NO" the panel should unhide.
In JavaScript, just like in mathematics, enclosing things inside of parentheses means that they will be "grouped" and take precedence over anything outside of the walls of those parens. So, even though we have more than 4 logical expressions above, we have 4 *groupings* of statements as dictated by the parentheses that are enclosing each discrete section between our OR (||) statements.
Now that we have some understanding of the code and logic behind it, we can apply this to a Rule on the form that will show us our Panel if one of the 4 conditions are met. Obviously taking the above and plonking it down into a Rule's function would almost get us there, but we need to remember that a Rule only does that thing it's set to do whenever the conditions its evaluating return a value of **true**. Using our code above, if DropDown1 is set to "PSV", it would be true, and would actually HIDE the form which is not what we want at all!
We need a way to 'invert' the result of the above code, and to do that, we can use JavaScript's Logical NOT operator which is represented by the exclamation point !. That changes our code to look like:
!(
(DropDown1 === "PSV") ||
(DropDown1 === "PSE" && DropDown2 === "NO") ||
(DropDown1 === "PSE" && DropDown2 === "YES" && DropDown3 === "NO") ||
(DropDown1 === "PSE" && DropDown2 === "YES" && DropDown3 === "YES" && DropDown4 === "NO")
);
So that should do it... but... inserting the Named Control Reference for each one of those controls is a pain in the butt, and frankly, I'm lazy. What if there was a way we could just set a few variables to the value of those controls, and then use those variables in our actual logic so that we can just copy paste instead of selecting a control from a list over and over?
Well, we can do that too by wrapping our code inside of an immediately invoking function expression (IIFE)!:
(function(DropDown1, DropDown2, DropDown3, DropDown4){
return !(
DropDown1 === "PSV" ||
(DropDown1 === "PSE" && DropDown2 === "NO") ||
(DropDown1 === "PSE" && DropDown2 === "YES" && DropDown3 === "NO") ||
(DropDown1 === "PSE" && DropDown2 === "YES" && DropDown3 === "YES" && DropDown4 === "NO")
);
}(DropDown1, DropDown2, DropDown3, DropDown4))
Now we only need to add the references to the very bottom of our function! See the image below of my Rule's formula to better see what I mean:
The Results should be in line with what you wanted:
I hope this helps you to solve your problem and shine some light on the logic operators of js.
It WORKED!! Thank you great learning. I will be sharing this to others.
