Overview
Wayfast Actions 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 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:
| Code Block | ||
|---|---|---|
| ||
CREATE TABLE HelloWorld_HR_CandidatesUsers ( FirstName NVARCHAR(128120), LastName NVARCHAR(120), DomainDescription NVARCHAR(128), EmailUserDescription NVARCHAR(128), Age SMALLINT Email NVARCHAR(128), ) GO |
Wayfast database framework will automatically create a set of store procedures.Once the table is created, automatically the ID attribute will be generated by default including the procedures to manage the information stored in the Database for this table. These are the set of store procedures:
spWF_HelloWorld_Users_CreateOrUpdatespWF_HelloWorld_Users_DeletespWF_HelloWorld_Users_Get
For this example we will use “spWF“spWF_HelloWorld_HR_Candidates_CreateOrUpdate”Users_CreateOrUpdate”.
Let’s go back to Wayfast Editor and Update Wayfast DB Model.
...
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 we need to create a page with the following controls:
...
.
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_Users 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_Users_Get. This information will let the page to display automatically the information that we will insert using an action.
...
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:
LABEL: This control will display our header title
INPUTBOX: This control will allow us to insert data into our databaseButton: This control will trigger the insert and it should be connected to the Action that . In this example, we are going to create Grid_column5 controls, 1 per each attribute in our
HelloWorld_Usersdatabase table (FirstName, LastName, DomainDescription, UserDescription and EmailDescription)GRID_COLUMN: This control will display the values that we have stored into our database
Let’s create a page called “HR_Candidates” with the following details:
...
. Again, we repeat 1 per each attribute in our
HelloWorld_Usersdatabase table (FirstName, LastName,
...
Now let’s add a button to save this fields and a grid with five columns to show saved values including autogenerated IDs.
DomainDescription, UserDescription and EmailDescription)
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. 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
...
In each entry, we need to include the “HelloWolrdUsers” dataset and layout details where we can display the fields on page. Click on “Submit” button and the control will be created.
...
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 “HelloWolrdUsers” dataset. These 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.Database.
...
| Info |
|---|
You We 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 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 “Create”“Add New User”. In the example, everytime that user input the “Name”, “Role” “FirstName”, “LastName”, “Domain”, “UserName” and “Email” inputboxes data and then click on “Create” this button, the new value are going to data will be added in “HWDHelloWorld_Roles” Users 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?
Wayfast allow us to create a new action at the same time that we create the control. Now that we have “Create” 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 the this control and create a new action. In the “Edit Control” popup, click 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.
Search the “SPfor spWF_HWDHelloWorld_Roles_Insert” Stored Procedure Users_CreateOrUpdate in the “Stored Procedure” search field. Remember that this was created in database at the beginning of this lesson. Add the parameters “&FirstName”, “&InpName”LastName”, “&DomainDescription”, “&InpRole” UserDescription” and “&InpEmail” EmailDescription” parameters that are connected to the Column’s table “Name”, “Role” and “Email”. In Wayfast, we database HelloWorld_Users table . One important thing to notice, Wayfast 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 After completing the required fields, clicks 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. If we check on the SQL, the new values are updated:
...
However, we are not able to see the data refreshed on screen. 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.
...
Focus on “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.
...
Let’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
...
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 Let’s try this interaction, fill the input fields available
...
Click on “Create” “Add New User” button.
...
Notice that the entry is displayed on screen after clicking on “Create” “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.
...
| 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.