Overview
All Wayfast controls require some minimum properties to be set in order to tell Wayfast Render Engine how to display them. In this lesson we will review standard settings required for EVERY control in Wayfast.
Why is the Layout tab so important?
The “Layout” tab is a key part of every control as it allows us to indicate Wayfast where to place a control in the UI. We do this by selecting a “place holder” and setting the “order” field. We can also set which CSS class will be applied to each control through these two properties: “Container Style” and “Item Style”.
...
Field | Description |
Place Holder | Sets the place holder where Wayfast will place the control. Placeholder name’s are defined in your Layout using a convention. You just prefix HTML tags ids with “PH_” and everything that comes after that in the ID property will be interpreted as a placeholder and displayed as an option in this field. You can use friendly names for your place holders. Layout’s from Wayfast library use these placeholder names: · B1: Related to buttons at the footer screen. |
Order | Indicates the order for each control in the page. Wayfast Render Engine will use this value while drawing your application in the screen and know which control should be displayed first. Order value can be a decimal intersperse controls. |
Alignment | Display the label at the beginning of the row (Normal) or to the right of the previous control contained in the selected placeholder. |
Container Style | Sets the CSS Class to apply to the control’s container. |
Item Style | Sets the CSS Class to apply to the control’s content. |
Why is important the Conditional tab?
If this control needs to be displayed only under certain conditions, we can use “Conditional” tab to define visibility conditions.
Conditional tab
Wayfast allows us to manage control’s visibility using conditional clauses. This is helpful for cases when you want to tie UI behavior to some variable like a user role. For instance we could do something like, if User’s Roles is Admin display Save button. Else, hide it. For such condition we use a conditional Syntax. Let’s review how it works.
Conditional clauses have this structure: ‘&VariableNameA’<operator>’&VariableNameB'
Please notice that variables in Wayfast start with & symbol but when contained in a conditional clauses they need to be enclosed between single quotes. Variables can refere to Wayfast objects like Controls, Datasets, Page Variables, Context Variables or Global Variables.
In the aforementioned syntax <operator> can be one of the following:
Operator Name | Symbol | Description |
|---|---|---|
Equality | = | This operators compares if the term in the left side is equal to the term in the right side. |
Difference | # | This operators compares if the term in the left side is different to the term in the right side. |
Bigger than | > | This operators compares if the term in the left side is bigger than the term in the right side. |
Less than | < | This operators compares if the term in the left side is less than the term in the right side. |
Multiple conditions can be evaluated together as whole using boolean logical operators such as AND & OR concatenating conditions using the pipe symbol (|). Let’s see a few examples assuming variable &Ligh is set to green:
Expression | Result | Description |
|---|---|---|
'&Light'='green' | true | This clause evaluates if &Light variable is equal to “green”. As the variable was actually set to green the result is true. |
‘&Light’#'green' | false | This clause evaluates if &Light variable is different than “green”. As the variable was actually set to green the result is false. |
‘&Light’='green'|AND|‘&Light’#'yellow' | true | This clause evaluates if &light is green and not Yellow. As &light is green it returns true. |
‘&Light’='Red'|OR|‘&Light’='Yellow' | false | This clause evaluates if &light is Red or Yellow. As &light is green it returns false. |
For example, let’s create a Dropdown List control to apply conditions over Button control. This is a regular scenario on applications, if certain field is not selected, then we can’t submit a form.
...
Let’s select “Conditionally” option to analyze how it works.
We talked in other lessons about how Wayfast associate the entry parameters using an “&” sign. In the conditional clause, we use the ampersand to indicate the object name that we need to focus. It’s important to mention that this could be controls or actions.
We are going to also include As described before, conditionally option requires conditional syntax. In this example we are going to use “#” sign to denote inequation. Beside that expression, we will include '' (single quotationcompare if terms are different. On the right side of the expression we are going to include two single quotation marks (') without any value which means between them to indicate an empty value. We can include the specific value in single quotation if we want to avoid that option. Let’s check the following syntaxIt should look like this:
| Code Block |
|---|
'&ActiveDropdownList'#'' |
Under this conditional sentence, Wayfast will look into the “ActiveDropdownList” control when any option is selected and will display the button to continue with the submissionreplace “&ActiveDropdownList” control by its value and then execute the comparison. This comparisson will be triggered every time an item in the dropdown is selected.
...
Click on “Submit” button.
...
| Info |
|---|
We can set multiple conditions using the syntax to create these rules. These are other common examples:
|
Recap
On this lesson, we reviewed two important sections to setup controls in Wayfast. In the first part, we learnt the Layout importance to indicate where to place our objects in the screen by place and order. In the second part, we had our first approach on Conditional rules that give us the chance to display or edit our objects depending on the clauses that we establish.