...
...
...
...
...
...
...
...
Overview
In this lesson we will explain how to create new databases at new Projects and the association between different instances depending on the environment that Wayfast users are going to develop the application.
How to create a new Database from Wayfast?
On Wayfast, make sure that the Project is created and you are logged in.
...
Click on “Database” icon at the top menu.
On Submenu, selects “Instances” and then click on “Associating Instances” to setup the new DEV Environment for the Application DB.
...
Wayfast automatically shows the different instances (Environments) that can be associated to the database that we are going to create in next step. This selection should be repeated each time that you want to link instances.
...
In the example, the dropdown is showing the “Development” environment. Depending on the Project, we can select the “Production” environment or any other instance.
On Submenu, click again on “Database” section.
...
Wayfast displays all the databases in a grid view, there are the related databases to our Project at this point. In case we have existent databases, there’s a chance to associate them by using the “Attach DB” button.
In this example, we are going to create a new database from the scratch. Click on “Create” button
...
A popup is displayed with the “Instance” dropdown field. We can choose by selecting between all the instances that we set it up in the previous step.
Click on “Save” button
...
Now we have the database object associated to the Project and we can continue defining the /wiki/spaces/~664035844/pages/1746600010.
How to verify that Database is generated in SQL Server Management Studio?
Open the SQL Server and connect to the “Instance” that we associate in the newly DB created.
...
Right-Click over the “Database” folder and click on “Refresh” option
...
New database object is available with all the default folders associated.
| Info |
|---|
Wayfast Admin users can create the database from the SQL Server Management Studio without login to Wayfast and then use the “Attach DB” button to associate the new object into the Project. |
Recap
In this lesson, we defined the structure by associating the Project with a Database. Also we learnt how to create a new database in the Project and associate the Instances to the created object. This relation will allow us to define which database is used in each environment that we are going to use in developmentour 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.
| Info |
|---|
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.