Overview
In this lesson we will explain how our WYSWYG (“What You See is What You Get”) editor can provide a website editing tool that will display all the elements that we want to develop in real-time and how they are impacting in our model.
WYSWYG editor
Initially we need to create a new page under the Project. In the following example, we got the page created with different elements (dataset, controls and actions). Let’s see how the WYSWYG editor can help us to improve the design.
...
Then we need to click the Page link. In this case we will click the “HW_Team_Members” 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.
...
Section | Subsection | Description |
|---|---|---|
Header | Project Name | This title indicates the project that we are working on. |
Dropdown Page | This dropdown list populates all the pages associated to the project. We can navigate through all the pages to edit using WYSWYG tool. | |
New/Preview | We can create new pages by clicking “New” button and a popup will be displayed to enter all the new page’s details. Also we can preview what are we editing at the moment. | |
View | We can see the editor in different formats (Laptop, Tablet-Landscape, Tablet-Portrait and Mobile) | |
Left Panel | Dataset | We can create new datasets or pick any dataset associated to the page using the drag and drop feature. If we created a new dataset, a popup will be displayed on screen to complete the details. |
Controls | We can create new controls using the drag and drop feature over the different containers in the screen. | |
Layout | WYSWYG editor identify all the layout containers created on this page. | |
Tools | This checkbox will offer the ability to enable or disable the containers in the body. | |
Body | This is the main area where we can drop all the elements that we want to develop and display accurate what we are developed. |
How to add a control using WYSWYG?
In the example page, we have a grid table with 4 columns. We are going to add a new text field at the bottom page. Let’s click on “Control” section at the left panel.
...
And finally we can navigate to the Page’s detail in Wayfast to check how the WYSWYG editor generated the control.
...
How to edit an existing control using the WYSWYG?
In case we want to make changes on existing controls using WYSWYG editor, we can focus on the specific control and right-click over the element.
...
Similar than the other example, we can change all the options available for the control. Also it’s possible to press the column and drag it to modify the position order that we display the grid table
...
How to remove a control using the WYSWYG?
In case we want to remove existing controls using WYSWYG editor, we can focus on the specific control and right-click over the element. In the example, we focused our cursor in the label control.
...
Click on “Delete” button.
...
Automatically the WYSWYG editor reloads the screen and the label control is not available anymore. Let’s return to the Page’s detail screen to confirm that the control was removed.
...
“Label” control is not available on “Controls” section.
How to create a new dataset using WYSWYG?
Following the lesson to create datasets, our WYSWYG editor give us the opportunity to generate new datasets on the fly. Click on “New” button under “Dataset” subsection at left panel
...
New dataset will be listed in the subsection. In case we want to double check the dataset in page’s detail, navigate through the page and verify that new element is added.
...
Recap
This feature allows users to see what the end result will look like (more or less) while we are doing drag and drop over the controls. This is an easy way to start coding pages having a clear idea about the design screen.
...