Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In this lesson, we are going to focus on “Variable” control under the pages. This feature will give us the chance to establish conditions that we can print on screen using other controls simply referring to the variable as parameter.

How to setup a “Variable” control in page?

First, we need to create a new page or select anyone previously created in the application.

Under page details, expand the “General Information” section

...

This control, unlike the previously created ones, needs to be setup on the “Variables” tab under the “General Information” section. Click on “New” button

...

A popup will be prompted to setup the “Variable” control

...

Fill in the name and select the type. This dropdown offers 2 options:

  • Local: In this case, the variable only can be used under the page where you are located.

  • Global: Variable can be used in all the pages from the Project’s application.

Click on “Data Binding” tab

...

In this section, we can establish default value for the variable. On the example, using the ampersand, we are going to make the value persists every time that the page is refreshed. Otherwise, we can set an specific value like “1” and this should be retrieved on loading screen.

Info

Wayfast offers the ability to link the value from any dataset created in the project.

Turn to “Layout” tab

...

Set the “Order” to 0 and click on “Submit” button to save the changes.

New variable is displayed under “Variables” tab

...

How to include a variable under any other control?

Now that we have the variable generated, we need to take into consideration that this a “Local” variable type so it will be only available in this page.

Turn to “Controls” section and select “Label” control

...

Click on “New” button

...

Under the “General” tab, complete the required fields and focus on the “Value” field. Since this is a label, we can put a legend text and beside the fixed text, introduce the “Variable” using the ampersand like we explained in previous lessons regarding parameters. This reference will be retrieving the data from the variable.

Click on “Submit” button to save the changes and take a look about how this “Variable” control is combined with “Label” control using the preview screen.

...

How to set any control as variable?

We learnt how to create a variable from General Information, now we are going to set a control as a variable from its creation.

If we click on “New” related to “Label” control like we explained in previous steps, there’s a checkbox “Add as a variable” option

...

Checking this option, we can define the label as variable at the same time.

Recap

...

Overview

A variable is a container for storing values that can be set statically or dinamically. One the key characteristics of a variable is that is subject to change during the life of an app.
Variables have names so the value in it can be referenced in one or multiple places easily. Let's see how to use it.

For this exercise we need to have a Project with at least one Page. Let’s continue using “HR App”.

How to declare a “Variable” in a page?

The first thing we need to do for using a variable is declare it. To do that let’s go to our HR Sample APP” project and open “Add Employee Form” Page.

Under page details expand the “General Information” section.

...

Let’s click on the "New" button.

...

A Popup will be displayed.

...

In the “Object Name” field let’s name the variable. We are going to call it “Message”.

The “Type” field sets the variable’s scope. We have two options:

  • Local: Variable’s scope is the current page.

  • Global: Variable scope is the entire application.

For now let’s use “Local”.

Now click on the “Data Binding” tab.

...

In the “Default” field we initialize the variable with a specific value. Set it to “Welcome to HR Sample App” and click on the “Submit” button to save changes.

Now we can see the new variable displayed under “Variables” tab:

...

How to use a variable?

We can reference variables using the ampersand (&) symbol at the left of a variable name.

Variables can be used in almost any value field in wayfast.

Variables can also be used as part of conditional statements. See conditional syntax reference if you want to know more about it.

In this example we will simply create a label and display the value contained in the variable.

Double click the Label and name it lblMessage.

In the “Default Value” field let’s enter “Main Title &” (without quotation marks) and click on the Submit button.

Keep in mind we can intersperse Variables anywhere in a given text and Wayfast will take care of replacing the variable’s name with its content.

...

Last, let’s click “Preview” to see it working.

...

Recap

Variables are a powerful feature that can be used almost anywhere to give your app a dynamic behavior by keeping states, controlling logical flows or sending them as parameters.
We will be seeing many more examples of variables in the rest of Control’s Unit.