Button
- ejaramillo
- Matias
- Sergio Rodriguez
Overview
Buttons allow users to execute an action inside a page like saving data, closing a windows, showing other controls and many many more. A Button can be clicked by using the mouse or pressing ENTER or SPACEBAR keys when the button has focus.
Getting ready for this exercise
For this exercise we are going to reuse “HRSampleApp” project and “NewEmployeeForm” page but you can use any project and page you want.
Remember to create a ticket and activate it.
We will need a table and a stored procedure so let’s create them.
Open SQL Server Management Studio and run the following queries in you project’s DB.
CREATE TABLE Employees(
Name nvarchar(50) NULL,
Role nvarchar(50) NULL,
StartDate datetime NULL
)CREATE PROCEDURE AddEmployee
@Name nvarchar(50) =NULL,
@Role nvarchar(50) =NULL
AS
BEGIN
INSERT Employees (Name, Role, StartDate)
SELECT @Name,@Role,GETDATE()
ENDThis Stored Procedure simply inserts a new record to the Employees table so we can see the results of the action we are triggering with our Button.
Remember to run a Synchronization process after creating Database objects before trying to use them in Wayfast. You can find this feature in Wayfast Editor’s Menu under Database/Synchronize.
Adding controls and creating an Action
We need a Wayfast Action to integrate a Stored Procedure with a Button control.
Go to “HRSampleApp” project and open “NewEmployeeForm”. Then open the “WYSIWYG” editor.
Drag an Inputbox control and drop it in the Layout. Double-click it to edit its properties.
Let’s call it “txtName” and use “Name” for “Displayed name”.
Drag another Inputbox control and drop it in the Layout. Double-click it to edit its properties.
Let’s call it “txtRole” and use “Role” for “Displayed name”.
Drag a Button control and drop it in the Layout. Double-click the Button to edit its properties.
A popup will be prompted where we can edit Button’s properties. Name this button “btnAddEmployee”.
Go to “Actions” tab and Click on “New Action” button:
Another popup will be displayed to create a new action. Let’s review required properties:
In the Name field type “AddEmployee”.
In “Action Groups” field select the “Form” option. The stored procedure field will be displayed.
Search the stored procedure created at the beginning of this exercise (sp_AddEmployee). In the parameters field add “&txtName” and “&txtRole” parameters to indicate that this action will use whatever is entered in the Inputbox controls to call the stored procedure and save those valued in Employee table. The order in which the parameters are added must match the order of the parameters declared in the Stored Procedure to make sure each field is persisted in the right column.
Remember that we can reference Wayfast controls as variables to use them as parameters by preceding control’s name with an ampersand (“&”) symbol.
Click on the “Accept” button to save this action.
Now we are ready to see this Button triggering our action and saving data in the database.
Trigger Grid data load with a Button click
Now we are in a point in which we can add data with the form but we cannot see it so let’s go to Dataset section and and create a new one to retrieve the content of Employee table.
In the Dataset popup let’s name it “EmployeeList”. Set Execution Type to “On demand” and go the “Data Binding” tab.
This will allow us to include the new button to update our table every time that we want to insert new values from the application.
Focus on “Control Run” and search the action we just created (“AddEmployee”).
Click on “Add Relationship” and we will have the elements associated.
Let’s preview the application with the new button and all the objects associated to the database. Click on “Preview” button.
Fill the “Role” and “Name” inputbox fields and then click on “Add” button
Automatically the table is updated with the new data added to the table in the database.
Click on “Preview” to run the app an Voilá.
Recap
This is a big step in our learning path, the interaction between the buttons and the database is made of different actions and stored procedures. The example in this lesson is a good way to reach another level. We are connecting our data with actions that impacts directly from the app. Let's keep up the good work!