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 important the Layout tab?
The “Layout” tab is a key part of every control as it lets you indicate Wayfast where to place a control by selecting a “place holder” and setting the “order” field. Wayfast allows you to choose 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.
...
If we select “Yes” in the “Visible” field the control will always be visible.
If we select “No” in the “Visible” field the control will never be visible.
If we select “Conditional in the “Visible” field we 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.
...
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
...
We will observe 3 options available:
Option | Description |
|---|---|
Yes | Control will always be visible. |
No | Control will never be visible |
Conditionally | We can set a Wayfast conditional clause to be evaluated in runtime and determine this control’s visibility based on dynamic conditions. |
...
Now that we go through all the details to create the Label control, click on “Submit” button to save this control’s settings.
...
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 “#” sign to denote inequation. Beside that expression, we will include '' (single quotation) without any value which means an empty value. We can include the specific value in single quotation if we want to avoid that option. Let’s check the following syntax:
| 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 submission.
...
Click on “Submit” button.
...
Now we are able to verify if the conditional clause is working as expected. Let’s click on “Preview” button
...
Since the “Is Active?” dropdown doesn’t have any option selected, the button is not available to submit the form. Once the option is chosen, “Add New User” button will be displayed automatically.
...
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.