Conditional Rendering
Render select elements depending on the cards current data payload.
Last updated
Render select elements depending on the cards current data payload.
Last updated
Different Payloads will be used against adaptive cards depending on the results from the previous states within a Looply Workflow. Different results may require you to change the card to accommodate these changes. e.g. an error message from a previous state in the Looply Workflow.
Each element has an "Only show when" attribute which is rendered as the $when
attribute in the . If this attribute is true
, will display the element.
Each element has an "Initially Visible" attribute which is rendered as the isVisible
attribute in the . If this attribute is true
, will display the element when the card first loads. We will not go into detail with this option as it is not as powerful as the $when
attribute as described above.
Adding a condition to trigger a true
or false
value for the $when
takes principles described in the section and standard logical operations commonly seen in programming languages such as JavaScript.
If you were to get an error from your Looply Workflow. We may need to display a red banner and a message about what has gone wrong. But we should only display this if we get an error otherwise we should display a success message.
An example payload from a Looply Workflow could look like the following:
As described above, the logical operators that are available are similar to those found in some programming languages. Below is a list:
&&
AND
||
OR
\
Escape Special Character
!=
Not Equals
==
Equals
We want to conditionally render the message at httpRequestSAP_1.output.data
if the status is 400
or 500
. Below is an example of the card payload from the to make this happen:
All conditions are encased in ${}
much like that of .
Note: Similar to the binding in the section. We can only see the result by testing the card using the Test Card action in the View menu from the .
You can make use of a number of prebuilt functions in your conditional rendering logic. For more information, visit .