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 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 our Layout using a convention. 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 placeholder field under Layout tab. You can use friendly names for your place holders 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 to know which control should be displayed first. Order value can be a decimal number. This is useful to intersperse controls. |
Alignment | Has two options: “Normal” to display the label at the beginning of the row and “To the right of the previous control” that positions the control next to previous control contained in the same placeholder. |
Container Style | Sets the CSS Class applied to the control’s container. |
Item Style | Sets the CSS Class applied to the control’s content. |
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.
...
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.
...
Let’s add a Button control too.
Click Double-click on the Dropdown to edit its properties.
...
| 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 reviewed the Layout tab and its critical role while rendering pages and dictate where to put our objects in the screen. In the second part, we deep dived on Conditional rules, 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.