...

Overview

The purpose of this lesson is explain Actions in Wayfast . In previous lessons, we analyzed how to create controls and how they can connect to a dataset. Actions are events that allow us to trigger application interactions including communicating with a database, an API or executing a DLL. In this example allow executing process or communicating with external systems incluiding databases, APIs or executing DLL methods. In this lesson we will review how to create an action to store information in a database.

Preconditions

In previous lessons, we talked about Dataset and Controls and how we can create them in our project’s page. Let’s review what are the necessary controls to make the interaction between the app and a database:

...

save data in a table with a Stored Procedure.

Preconditions

Step 1: Create a Table

Open SQL Server Management Studio and run the following script:

CREATE TABLE HelloWorld_UsersDemo (
FirstName         NVARCHAR(120),
LastName          NVARCHAR(120),
DomainDescription NVARCHAR(128),
UserDescription   NVARCHAR(128),
Email             NVARCHAR(128),
)
GO

One of the best Wayfast features is its Database framework which takes care of repetitive tasks to make Dev’s life easier and make development process super fast.

When a table is created Wayfast adds an ID attribute to make sure that consistency in the database can be enforced. At the same time it will create three stored procedures to manage classic CRUD operations: CREATE, REMOVE, UPDATE AND DELETE. After creating the aforementioned table you can see the following stored procedures in your DB:

• spWF_HelloWorld_UsersDemo_CreateOrUpdate

• spWF_HelloWorld_UsersDemo_Delete

• spWF_HelloWorld_UsersDemo_Get

For this exercise we will use “spWF_HelloWorld_UsersDemo_CreateOrUpdate”.

Let’s go back to Wayfast Editor and Update Wayfast DB Model.

Click on “End Task” button next to our active requirement.

...

A popup is displayed, click on “Synchronize” button. Now the stored procedure created in database will be available to connect with dataset.

...

Step 2: Setup the page

Let’s create a page called “HelloWorldUsers” before creating an action.

Click on “New Page” button at Project Pages like we learn in previous lessons

...

Click on “Submit” button and we are now ready to create the structure.

Step 3: Setup the Dataset & Controls

Our page should get the information from the table HelloWorld_UsersDemo using a dataset like we learnt in the latest lesson.

...

Click on “New Dataset” button and complete the required fields.

...

Navigate to “Data Binding” tab and point the Dataset to spWF_HelloWorld_UsersDemo_Get. This information will let the page to display automatically the information that we will insert using an action.

...

Click on “Submit” button

...

Let’s move to the controls that we need on this page to display and insert new users. We are thinking on the following structure according to the table that we created in the database:

1. LABEL: This control will display our header title

2. INPUTBOX: This control will allow us to insert data into our database

...

1. . In this example, we are going to create

...

1. 5 controls, 1 per each attribute in our HelloWorld_Users database table (FirstName, LastName, DomainDescription, UserDescription and EmailDescription)

2. GRID_COLUMN: This control will display the values that we have stored into our database

...

Following this instructions, we can easily build and connect any form page to fill information in minutes.

...

Click on “Preview” button to verify how the application is depicted in developer environment.  

...

Now that we have the page created, we will need a Stored Procedure to save the input information in the frontend. Let’s navigate to our database manager, in this example, we are going to open the SQL Server Manager to create the stored procedure. Make sure that we are pointing to the right database that we associate to this project in Wayfast.

CREATE PROCEDURE spHola_Mundo_AccionesTest_Insert
  @Data1  nvarchar(50)
  @Data2  nvarchar(50)
AS
  BEGIN
    INSERT Hola_Mundo_AccionesTest(Data1,Data2)
	SELECT @Data1, @Data2
  END
GO

@Data1 and @Data2 are connected to the inputbox controls and the grid_column controls previously created in Wayfast. Once that the Stored Procedure is created, we can go back to Wayfast application and synchronize the Stored Procedure in the environment.

Focus on any active requirement and click on “End Task” button

...

This step is only needed for synchronization of the new Table and Stored Procedure generated in database.

Now we have the new objects available in Wayfast Application to associate with Controls and Actions.

How to create an Action?

Return to Page’s information details.

...

Click on “Button” link and select “Actions” tab. Then click on “New Action” button to generate this new relation.

...

A new popup is displayed on screen.

...

1. . Again, we repeat 1 per each attribute in our HelloWorld_Users database table (FirstName, LastName, DomainDescription, UserDescription and EmailDescription)

2. BUTTON: This control will trigger the new user created and it should be connected to the “Insert” action that we are looking in the example

We can create one inputbox control for reference and then we can repeat the steps for the others needed. Select the “Inputbox” control and click on “New” button. A popup will be displayed to fill the information related to new control.

...

In each entry, we need to include the “HelloWorldUsersDemo” dataset and layout details where we can display the fields on page.

...

Click on “Submit” button and the control will be created. Repeat this step for each inputbox required.

...

Let’s add 1 grid column example to complete the page’s structure.

Select the “Grid Column” control and click on “New” button

...

Again we need to include the “HelloWorldUsersDemo” dataset. These columns are going to retrieve the readable information from Database.

...

Now let’s add a button to save this new data on HelloWorld_Users table in database.

Select the “Button” control and click on “New” button

...

This button will be named as “Add New User”. In the example, every time that user input the “FirstName”, “LastName”, “Domain”, “UserName” and “Email” data and then click on this button, the new data will be added in HelloWorld_UsersDemo table.

...

We can identify the “Link to Page” option in case we want to redirect the application to another screen or keep it open, in this example, we are going to continue showing the same page.

Turn to Layout tab and establish the order to display this control. We are going to place it next to the inputboxes. Click on “Submit” button

...

Finally we have the structure finished, click on “Preview” button and check what we created so far

...

How to include Actions in Controls?

We did a lot of work so far, now we are ready to learn the impact functionality that “Actions” feature make on the controls that we generated and how interact with our application.

In the last step from the Precondition, we added the “Add New User” button, let’s edit this control and create a new action. Click on the control to edit the details and focus on “Actions” tab

...

Click on “New Action” button

...

It’s very important to choose “Stored Procedure as the “Action Group” type since Wayfast already generated the stored procedure automatically. It’s a really good way to start using this functionality or we can create a new object with custom statements.

After we select the option, Wayfast will display 2 options on “Action” field:

• FORM is used in Wayfast as unique execution in the whole page. 

• LIST is an action that can be executed as many times that it’s requested. Mostly this is needed when the page has multiple registries in grid views.

In this example, we are going to execute the action over the entire form.

Make sure that the search on “Stored Procedure” lookup field remain the created stored procedure in database. Once we select the right procedure, we can observe that Wayfast automatically detect the parameters: “Data1” and “Data2”.

These parameters should also be added in the “Parameters” text field “&InpData1” and “&InpData2”. They have to be separated by commas.

Finally choose the instance (environment) where we are going to apply the Actions setting.

Click on “Accept” and the new action is created and connected to the Application.

Run the app

Let’s verify the new action running the application, click on “Preview” button on the page and input new values. Then click on “Add” button which is the control associated to the action that we made recently.

...

Search for spWF_HelloWorld_UsersDemo_CreateOrUpdate in the “Stored Procedure” search field. Remember that this was created in database at the beginning of this lesson. Add the parameters “&FirstName”, “&LastName”, “&DomainDescription”, “&UserDescription” and “&EmailDescription” parameters that are connected to the database HelloWorld_UsersDemo table . One important thing to notice, Wayfast associate the entry parameters using an “&” sign instead “@” sign.   

 After completing the required fields, click on “Submit” button, the new action is linked to the “Button” control.

...

Let’s check how the application works after the connection between Controls & Actions. Click on “Preview” button

...

Complete the inputbox fields and click “Add New User” button to insert the new data on the HelloWorld_Users table.

Let’s see what we can do in this case to make the inserted values on the page.

How to update Database with an Action?

One of the common scenarios in the interaction between dataset and actions is the one where the database is updated with new input values but it's not reflected on screen at the moment that was triggered. Let’s analyze what we need to check and how the new action is connected to the Dataset.

...

A popup is displayed with dataset information. Turn to “Data Binding” tab

...

Focus on “Control run” “Dataset Refresh Binding” field and search by the “Button” “Add New User” button control that trigger the insert into our HelloWorld_Users database table. Then click on “Add Relationship” button. This interaction will update the input data on page in real time.  

...

 Click on “Preview” button again on Page

Input new data and click on “Add” button. Every time that we click on the button, the Dataset will be executed and consequently, the information will be refreshed in the grid

...

Let’s check the results in the example.

Let’s test the app

Now that the page is setup with Dataset, Controls and Actions, we can verify that the interaction is working as expected. Wayfast allow us to make a preview by click on “Preview” button at the top right corner

...

Layout is displayed on screen with the input fields created and the button to add the new values in “HelloWorld_UsersDemo” table on database.

Following the instructions, we can easily build and connect any form page to fill information in minutes.

Click on “Preview” button to verify how the application is depicted in developer environment.  Let’s try this interaction, fill the input fields available

...

Click on “Add New User” button.

...

Notice that the entry is displayed on screen after clicking on “Add New User” button. This is possible due to the “Dataset Refresh Binding” setting that was added in Dataset to post the information written in DB. This setting make a post-back that execute again the dataset to retrieve the new entry.

In few minutes, we setup a form to store all the information that we want in database and what is better, this new data is available in real time on the frontend for all the users.

Recap

In the first part, we revised the preconditions to create pages with a basic structure (dataset and controls) and then we learnt how to create new actions that can be related to these Controls previously added. In the second part, we verified how the interaction is executed in the application and how this can be edited to adjust the interaction regarding what we display and what we insert in the database.