...
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 be displayed in Wayfast.
The General Tab
There are some basic attributes required for every control to work in Wayfast so both Users and Wayfast Render Engine can identify objects, relate give life to features. Let’s review the ones that can be found in the General Tab.
Field | Description |
|---|---|
Object Name | Indicates the name of an object. In case a control can contain values (like labels, dropdowns, etc) we can reference those values using “Object Name” as a variable preceding it with an ampersand symbol (&). Object names can’t contain spaces or special characters. |
Displayed Name | Sets the value that will be displayed when the control is rendered. |
Comment | Allows to add additional information for future reference during the development process. It can be useful for team work. |
ToolTip | Sets a tooltip that will be displayed during the application execution when users hovers over the control. Usability best practices recommend adding explanations about control’s purposes in tooltips. |
Why is
...
the Layout tab so important?
The “Layout” tab is a key part of every control as it lets you 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. Wayfast allows you to choose We can also set which CSS class will be applied to each control through these two properties: “Container Style” and “Item Style”.
...
Let’s review all its properties in detail:
Field | Description |
Place Holder | Sets the place holder where Wayfast will place the control. Placeholder name’s are defined in your our Layout using a convention. You We just prefix HTML tags ids with “PH_” and everything that comes after that in the ID property will be interpreted as a placeholder name and displayed as an option in this placeholder field under Layout tab. 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. so all developers in your team can reuse your Layouts. |
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 to know which control should be displayed first. Order value can be a decimal number. This is useful to intersperse controls. |
Alignment | Display Has two options: “Normal” to display the label at the beginning of the row (Normal) or to and “To the right of the previous control” that positions the control next to previous control contained in the selected same placeholder. |
Container Style | Sets the CSS Class applied to apply to the control’s container. |
Item Style | Sets the CSS Class applied 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 Role is Admin then display the “Save” button. Else, hide it. For these cases we use a conditional Syntax. Let’s review how it works.
Conditional clauses have this structure: ‘&VariableNameA’<operator>’&VariableNameB' (First variable name starting with ampersand and enclosed in single quotes followed by a logical operator and last another variable name starting with ampersand and enclosed in single quotes.
Variables can refer to Wayfast objects like Controls, Datasets, Page Variables, Context Variables or Global Variables.
In the aforementioned syntax, <operator> can be one of the following relational operators:
Operator Name | Symbol | Description |
|---|---|---|
Equality | = | This operator compares if the term in the left side is equal to the term in the right side. |
Difference | # | This operator compares if the term in the left side is different to the term in the right side. |
Bigger than | > | This operator compares if the term in the left side is bigger than the term in the right side. |
Less than | < | This operator compares if the term in the left side is less than the term in the right side. |
Multiple conditions can be evaluated together as a whole using AND & OR logical operators.
Logical operators use this syntax:
‘&<variable1>’<relational_operator1>'<value1>'|<logical_operator1>|‘&<variable3>’<relational_operator2>'<value2>'
Note that logical operators are enclosed in pipes (|).
Let’s see a few examples assuming variable &Light 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. |
Example
Let’s create a Dropdown control with two options (“Yes”/”No”) to apply a condition over a Button to make it visible only when the selected option is “Yes”. If the selected option is “No” the Button will remain hidden. This is a common use case in many applications: if certain field is not selected, then we can’t submit a form.
...
Go First you need a page. We are going to create one and call it “ConditionalButtonSample”.
...
Then open it and click “WYSIWYG” button to open the visual editor.
...
Locate the Dropdown control, drag it and drop it in the layout.
...
The control will be added to the page. Let’s add a Button control too.
...
Double-click on the Dropdown to edit its properties.
Let’s name it “ddlTermsAcceptance” and enter a “Do you agree with terms and conditions?” in the “Displayed Name” field.
...
Now let’s go to “Data Binding” tab and include the list of items that we want to display.
...
Click on “Submit” button to generate the dropdown control.
...
Now that we have the control created, we can edit our Button to include the conditional in case we need to avoid the submission if there’s any field not selected.
Edit the “Button” control and navigate through “Conditional” tab
...
. Set the “Mode” field to “Free”.
...
In the “Options” field type “1,Yes;2,No” (without double quotes) and then click on the “Submit” button to save changes.
Click on the Button control to edit its properties.
...
Let’s name it “btnSubmit” and enter a “Submit” in the “Displayed Name” field.
Navigate to “Conditional” tab. Here is where we can include a condition to hide the button to prevent the form submission when the selected option is different than “Yes”.
We will observe 3 options available:
...
Let’s select “Conditionally” option to analyze review 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 a 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 |
|---|
'&ActiveDropdownListddlTermsAcceptance'#'' |
...
Under this conditional sentenceWhen users navigate this page and Wayfast needs to render it, Wayfast will look into the “ActiveDropdownList” control when any option is selected and will display the button to continue with the submission.
...
Click on “Submit” button.
...
Now we are able to verify Render Engine will replace control’s name (“&ddlTermsAcceptance”) in the conditional sentence with control’s value and then run the comparison. This comparison will be triggered every time an item in the dropdown is selected.
Click on the “Submit” button to save these changes.
...
Now we are ready to see if the conditional clause is working as expected. Let’s click on the “Preview” button
...
Since the “Is Active?” dropdown doesn’t have any option selected.
As we haven’t selected any option, the button is not available to and we can’t submit the form. Once the option is chosen, “Add New User” button will be displayed automatically.
...
Recap
On
...
When we choose “Yes” or “No” then “Submit” button is displayed.
...
| Info |
|---|
We can set multiple conditions using the syntax to create these rules. These are some examples:
|
Recap
In this lesson, we reviewed two important sections to setup controls in Wayfast. In the first part, we learnt reviewed the Layout importance to indicate tab and its critical role while rendering pages and dictate where to place put our objects in the screen by place and order. In the second part, we had our first approach deep dived on Conditional rules that give us the chance to display or edit our objects depending on the clauses that we establish, a powerful Wayfast feature to control page’s behavior. Remember Layout tab and Conditional tab key settings across the board and applicable to every control in Wayfast.