Versions Compared

Key

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

...

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 “Project Pages” icon in the Main Menu.Then we need to click “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 “Team“HR_Roles_Members” Screen” link.

...

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

...

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

...

If the control is not reflecting the changes, please refresh the screen to verify the edition.

...

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.

...