Open

Overview

Controls are graphical elements that allow users to interact with an application through direct manipultation to read or edit information.
Wayfast has plenty of them including Button, Image, Map and Autocomplete Text Box among others.
In this lesson we will review how to add controls to a page and understand the basic principles of designing a user interface in Wayfast.

How to add controls to a page?

Preconditions: In this example we are going to assume we already created a page in our project. You can know more about how to do that in the Pages section.

First let’s click on “Solutions” and choose your project. Application will redirect to “Menu Pages” screen and we can access to the page clicking on the Page link. In this case we will click the “HR_Roles_Screen” link.

Open

In the “Controls” toggle button we will see a list of all the objects included in this page.

We used this page to learn how to create datasets and actions in other lessons.

Let’s click on the “WYSIWYG” button at the top right corner.

In the example page, we have a grid table with 3 columns. We are going to add a new text field at the bottom of the page. Let’s click on “Control” section at the left panel.

Select “TextArea” control and drop the element below the grid table.

Automatically the new control will be added as “TextArea_1”. Right-click over the control and the editor will display 4 options.

In this example, we are going to edit the control and make sure that the text area has the correct label. Click on “Edit” button

Click on “Submit” button and verify that the value is reflecting the changes on the WYSIWYG body.

Now the control is showing the new value. Let’s Click on “Preview” button to verify that the control was actually added.

And finally we can navigate to the Page’s detail in Wayfast to check how the WYSIWYG editor generated the control.

Recap

Controls are the cornerstone of our application’s User Interface. You can explore all the controls available in Wayfast your self our take our guided tour in Controls Reference section.