Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 4 Next »

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”.

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 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.
·        B2: Related to buttons at the top right corner screen.
·        E1: Related to main body screen.
·        F1: Recommended for the top screen and commonly used for search filters
·        T1: Related to header titles at the top left corner 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 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.

Recap

  • No labels