WYSWYG
- Sergio Rodriguez
- Matias
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.
First let’s click on “Project Pages” icon in the Main Menu.
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.
Let’s click on the “WYSWYG” button at the top right corner.
Now the WYSIWYG editor opened let’s take a look at its main sections.
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.
Select “TextArea” control and drop the element below the grid table.
Automatically the new control was 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 WYSWYG 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 preview the page to verify that the control is added. Click on “Preview” button
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.
Click on “Edit” button.
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
A new popup is displayed where we need to complete all the required fields associated to the dataset. Click on “Submit” button
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.