Versions Compared

Key

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

Overview

The purpose of On this lesson is , we will explain Actions in Wayfast. In previous lessons, we analyzed how to create controls and how they can connect to a dataset. Actions This are events that allow us to trigger application interactions including communicating with a database, an API or executing a DLL. In this example 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:

  1. Inputbox: This control will allow us to insert data into our database

  2. Button: This control will trigger the insert and it should be connected to the Action that we are going to create

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

...

How to create a Table and Stored Procedure in Project DB?

It’s important to reinforce the idea that all the Project’s information come from the database through Stored Procedures (SP) and these data is readable in the Application through the Controls. This document will show that there’s another way to interact with the DB information creating Actions that can modified the information in our database.

As precondition, we need to create a new table in SQL to verify the interaction between Dataset, Controls and Actions

Code Block
languagesql
CREATE TABLE HWD_Roles (
Name    nvarchar(50),
[Role]  nvarchar(50),
Email   nvarchar(50),
)
GO

This table has 3 columns “Name”, “Role” and “Email”. Then we can proceed to create a Stored Procedure related to “HWD_Roles” that will insert new values and consequently will select and display the new input information.

Code Block
languagesql
CREATE PROCEDURE spHolaspHWD_MundoRoles_AccionesTest_InsertInsert
    @Name    nvarchar(50),
  @Data1  @Role    nvarchar(50),
  @Data2  @Email   nvarchar(50)
AS
  BEGIN
 
  INSERT HolaHWD_Mundo_AccionesTest(Data1,Data2)
	SELECT @Data1, @Data2Roles(Name, [Role], Email)
  SELECT @Name, @Role, @Email
  END
GO

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

Focus on any active requirement and click Click on “End Task” button related to Project’s requirement.

...

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

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.

...

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

How to create Controls to interact with Application?

 Preconditions

Let’s review what are the necessary controls to make the interaction between the app and a database:

  1. Inputbox: This control will allow us to insert data into our database

  2. Button: This control will trigger the insert and it should be connected to the Action that we are going to create

  3. Grid_column: This control will display the values that we have stored into our database

Let’s navigate to Pages and open a specific Page’s Detail form. Focus on Controls section. Then select “Inputbox” control and click on “New” button

...

A popup will be displayed to fill the information related to new control. Complete the “Field” with the fieldname that we are going to identify the control in our page.

...

Turn to “Layout” tab and establish the place in Application’s page that this new input box will be displayed. In the example, the alignment is next to the previous control created and we define the length that user can input for this field.

...

At this point, it’s important to follow the structure that we previously defined in “HWD_Roles” database table. In this case, we are going to create 3 inputbox controls for “Name”, “Role” and “Email”. “ID” column table will be logged at the moment that we insert the value in database, so we won’t need to create an inputbox for this value.

Click on “Accept” button in popup to create the “Name” inputbox control and repeat the same step for the other mentioned columns.

...

Controls section now display the 3 input fields that user can add through the page and also there are 3 “Grid_Column” controls. This columns are going to retrieve the readable information from DB. Keep in mind that we created the Stored Procedure for this purpose in previous lesson.

Info

You can find the relationship between Controls & Dataset explained in the previous lessons.

Finally, we need to create a new “Button” control to trigger the insert value in database.

...

This button will be named as “Create”. In the example, everytime that user input the “Name”, “Role” and “Email” inputboxes and then click on “Create” button, the new value are going to be added in “HWD_Roles” table.

...

 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

...

How to add Actions in Controls?

Wayfast allow us to create a new action at the same time that we create the control. Now that we have “Create” button, let’s edit the this control and create a new action. In the “Edit Control” popup, click on “Actions” tab

...

Click on “New Action” button

...

Select “Action Group” as “Stored Procedure” type for the reasons that we described previously in this document. 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 the “SP_HWD_Roles_Insert” Stored Procedure created in database at the beginning of this lesson. Add “&InpName”, “&InpRole” and “&InpEmail” parameters that are connected to the Column’s table “Name”, “Role” and “Email”. In Wayfast, we associate the entry parameters using an “&” sign instead “@” sign.   

NOTE: “Return value” field has a complexity and depends on the type of logic that we created in our Stored Procedure. If certain information is needed after executing the SP, we can return a value as a variable and this value is available for next action created.

 

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

...

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” control that trigger the insert into our database. 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 gridLet’s check the results in the example.

How the Application works after all the definitions?

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 “HWD_Roles” table on 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.  

...

@Name, @Role and @Email are connected to the inputbox controls and the grid_column controls previously created in Wayfast.

Let’s try this interaction, fill the input fields available

...

Click on “Create” button.

...

Notice that the entry is displayed on screen after clicking on “Create” 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.

Info

In case we want to verify that the functionality is working as expected in database, open the SQL Server Manager and check if the table has the new input values inserted through the app.

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.