CUSTOM ACTION AND DATA BINDING

Create a Custom Action

In this section, we have identified the custom actions we need and now we will create them. You can use the artificial intelligence assistant provided by Kuika to generate the SQL queries you will need during the custom action creation process.

First of all, let's list the actions we will need within the scope of our employee management application.

After determining the custom actions we need, let's start creating these actions.

You can use the artificial intelligence assistant offered by Kuika to generate the SQL queries you will need during the custom action creation process.

1. TotalEmployee action

In the 3rd module, we will create a custom action called TotalEmployee for the total number of employees on the Dashboard screen we created.

First, open the Datasources view mode.

In Datasources view mode, hover over Actions on the left with the cursor and open the detail menu by clicking the + icon.

Select the New SQL Action item in the menu that opens.

In the SQL editor that opens after the selection process, first name your custom action. In this example, you can use the TotalEmployee naming. Then, write the query text that will provide the total number of employee using the Employee table. The query text below will help you.

select Count(Id) as TotalEmployee from Employee

If you want, you can also create the SQL query by entering the relevant prompt into the AI assistant.

After typing the query text, you can test the query with the TEST button on the top right. After the test process, complete the action creation process by clicking the CREATE button. You can view, edit, and delete the action you created by expanding the Actions sub-panel on the left.

2. TotalDepartment action

Let's create a special action called TotalDepartment for the total number of departments on the Dashboard screen. Let's follow the steps above again to create the TotalDepartment action.

Using Datasources view mode, click the plus icon next to the Custom Actions sub-panel and select New SQL Action from the drop-down menu.

In the SQL editor that opens after the selection process, first name your custom action. You can use the name TotalDepartment for the action we will create in this application.

In the SQL editor, just like in the TotalEmployee action, write the query text that will provide the total number of departments using the Employee table. The query text below will help you.

select Count(Id) as TotalDepartment from Department

After writing the query text, you can test the query with the TEST button on the top right, as in the previous action. After the test process, complete the action creation process by clicking the CREATE button.

3. SaveEmployee action

Let's create a SaveEmployee action for the employee management application to add new employee and update employee information. In this sample application, we will use the Custom Actions panel in the UI Design view mode to create this action. If you want, you can also create this action through Datasources view mode.

To create the action, open the Custom Actions panel in UI Design view mode.

Then click the Add SQL Action button in the Custom Actions panel. On the next screen, the data source tables you added to your application and the SQL Editor will greet you. First, change your action name to SaveEmployee.

Kuika offers you the SaveUpdate query by default for ease of use in action creation. To create a new action by adding this query, hover over the Employee table on the left side of the screen.

You can see that the query has been added to the SQL editor on the right side by clicking Save via the detail menu on the right of the Employee table.

The Save query added to the SQL editor has query lines that will perform both update and insert a new record. We will continue by making a small edit to this query statement. Replace @CreatedDate in the Values parenthesis with GetDate() to automatically retrieve the date of addition of a new employee. With this action, you will be able to automatically retrieve the employee registration date. The current version of the SQL action you created will be as shown below.

UPDATE Employee
   SET BirthdayDate = @BirthdayDate, CreatedDate = @CreatedDate, Department = @Department, Email = @Email, EmployeeImage = @EmployeeImage, FullName = @FullName, PhoneNumber = @PhoneNumber, Title = @Title WHERE Id = @Id
   IF @@ROWCOUNT = 0
   BEGIN
     INSERT INTO Employee (Id, BirthdayDate, CreatedDate, Department, Email, EmployeeImage, FullName, PhoneNumber, Title)
     VALUES (@Id, @BirthdayDate, GETDATE (), @Department, @Email, @EmployeeImage, @FullName, @PhoneNumber, @Title);
     END

You can also view the parameters in the query via the Parameters tab.

Click the CREATE button to complete the creation of the SaveEmployee action.

With this action you will be able to add new employees and update the information of existing employees.

You can view, edit, and delete the action you created through the Custom Actions panel.

4. SelectEmployeebyDate action

Let's create a SelectEmployeebyDate action to retrieve and list the employee's information in the employee management application with the Custom Actions panel in the UI Design view mode.

To add the SelectEmployeebyDate action, click on the Add SQL Action button in the Custom Actions panel.

To create the SelectEmployeebyDate action on the screen that opens, first, enter the action name as SelectEmployeebyDate. Then, enter the query statement in the SQL editor.

Select e.FullName, e.Id , EmployeeImage, d.DepartmentNamefrom Employee eleft join Department d on d. Id = e.Departmentorder by CreatedDate desc

To complete the process of creating the SelectEmployeebyDate action, click the CREATE button to create the action.

That's it, now let's look at the next action.

5. SelectEmployeebyTI action

Let's create a Select action named SelectEmployeebyTI using the Custom Actions panel to retrieve employee information according to the value entered with TextInput on the list screen and to list the employee information. Open a new action creation screen via the Add SQL Action button in the Custom Actions panel.

Enter the action name as SelectEmployeebyTI. Then, type the relevant query text in the SQL editor on the screen. The query below will work for this action.

select e.*,d.DepartmentName from employee eleft join Department d on d.Id =e.DepartmentWHERE FullName LIKE @searchFor OR @searchFor is null OR @searchFor = '''

After writing the query text in the SQL editor, save the action you created with the CREATE button.

6. SelectEmployeebyID action

The display screen allows you to show the information of an employee you select in the list screen. You can specify which employee's information will be displayed on the display screen with the ID of the employee. A custom action that you will create for this process may work for you. Open the new action creation screen through the Custom Actions panel using the same steps we used when creating the previous actions.

First, let's type the name of the action, SelectEmployeebyID. Then, type the relevant query in the SQL editor that welcomes you on the screen. The query given on the screen will allow you to retrieve employee information through the ID that the employee has. You can use the query below within the scope of this application.

select e.*, d.DepartmentName,t.Title as titleName from employee e
left join Department d on d.ID = e.Department
left join Title t on t.Id = e.Title
where e.Id = @Id

After writing the relevant query with the SQL editor, save the action you created with the CREATE button.

7. SelectDepartment action

A Department listing action is needed to pull the Department information from the form screen that allows adding new employees and editing employee information via Selectbox.

Open the screen to create a new action via the Custom Actions panel.

Let's set the action name as SelectDepartment. You can use the query below within the scope of this application in the SQL editor.

Select * from Department ORDER BY DepartmentName

After completing the query writing process, save the action with the CREATE button.

8. SelectTitle action

We need a Title listing action to pull the title information on the form screen that allows adding new employees and editing employee information via Selectbox.

Open the screen to create a new action via the Custom Actions panel.

Enter the action name as SelectTitle. Add the query shown below in this application to the SQL editor.

Select * from Title ORDER BY Title

Save the action you created with the CREATE button.

9. DeleteEmployee action

Let's create the DeleteEmployee action for employee deletion, which is the last action for the application we are developing, together using the Custom Actions panel. Open the Add SQL Action window in the Custom Actions panel. To quickly add the Delete query, hover over the Employee table on the left side of the screen and open the detail menu. You can quickly add the query to the SQL editor on the right by clicking Delete from the menu that opens.

In the last step of creating the DeleteEmployee action, name the action you created and complete the process by clicking the CREATE button.

Adding an action is that fast and simple.

In the next learning content, we will use Symbol Picker to link the actions we created to the screen designs we created in module 3.

In this section, we have identified the custom actions we need and now we will create them. You can use the artificial intelligence assistant provided by Kuika to generate the SQL queries you will need during the custom action creation process.

First of all, let's list the actions we will need within the scope of our employee management application.

After determining the custom actions we need, let's start creating these actions.

You can use the artificial intelligence assistant offered by Kuika to generate the SQL queries you will need during the custom action creation process.

1. TotalEmployee action

In the 3rd module, we will create a custom action called TotalEmployee for the total number of employees on the Dashboard screen we created.

First, open the Datasources view mode.

In Datasources view mode, hover over Actions on the left with the cursor and open the detail menu by clicking the + icon.

Select the New SQL Action item in the menu that opens.

In the SQL editor that opens after the selection process, first name your custom action. In this example, you can use the TotalEmployee naming. Then, write the query text that will provide the total number of employee using the Employee table. The query text below will help you.

select Count(Id) as TotalEmployee from Employee

If you want, you can also create the SQL query by entering the relevant prompt into the AI assistant.

After typing the query text, you can test the query with the TEST button on the top right. After the test process, complete the action creation process by clicking the CREATE button. You can view, edit, and delete the action you created by expanding the Actions sub-panel on the left.

2. TotalDepartment action

Let's create a special action called TotalDepartment for the total number of departments on the Dashboard screen. Let's follow the steps above again to create the TotalDepartment action.

Using Datasources view mode, click the plus icon next to the Custom Actions sub-panel and select New SQL Action from the drop-down menu.

In the SQL editor that opens after the selection process, first name your custom action. You can use the name TotalDepartment for the action we will create in this application.

In the SQL editor, just like in the TotalEmployee action, write the query text that will provide the total number of departments using the Employee table. The query text below will help you.

select Count(Id) as TotalDepartment from Department

After writing the query text, you can test the query with the TEST button on the top right, as in the previous action. After the test process, complete the action creation process by clicking the CREATE button.

3. SaveEmployee action

Let's create a SaveEmployee action for the employee management application to add new employee and update employee information. In this sample application, we will use the Custom Actions panel in the UI Design view mode to create this action. If you want, you can also create this action through Datasources view mode.

To create the action, open the Custom Actions panel in UI Design view mode.

Then click the Add SQL Action button in the Custom Actions panel. On the next screen, the data source tables you added to your application and the SQL Editor will greet you. First, change your action name to SaveEmployee.

Kuika offers you the SaveUpdate query by default for ease of use in action creation. To create a new action by adding this query, hover over the Employee table on the left side of the screen.

You can see that the query has been added to the SQL editor on the right side by clicking Save via the detail menu on the right of the Employee table.

The Save query added to the SQL editor has query lines that will perform both update and insert a new record. We will continue by making a small edit to this query statement. Replace @CreatedDate in the Values parenthesis with GetDate() to automatically retrieve the date of addition of a new employee. With this action, you will be able to automatically retrieve the employee registration date. The current version of the SQL action you created will be as shown below.

UPDATE Employee
   SET BirthdayDate = @BirthdayDate, CreatedDate = @CreatedDate, Department = @Department, Email = @Email, EmployeeImage = @EmployeeImage, FullName = @FullName, PhoneNumber = @PhoneNumber, Title = @Title WHERE Id = @Id
   IF @@ROWCOUNT = 0
   BEGIN
     INSERT INTO Employee (Id, BirthdayDate, CreatedDate, Department, Email, EmployeeImage, FullName, PhoneNumber, Title)
     VALUES (@Id, @BirthdayDate, GETDATE (), @Department, @Email, @EmployeeImage, @FullName, @PhoneNumber, @Title);
     END

You can also view the parameters in the query via the Parameters tab.

Click the CREATE button to complete the creation of the SaveEmployee action.

With this action you will be able to add new employees and update the information of existing employees.

You can view, edit, and delete the action you created through the Custom Actions panel.

4. SelectEmployeebyDate action

Let's create a SelectEmployeebyDate action to retrieve and list the employee's information in the employee management application with the Custom Actions panel in the UI Design view mode.

To add the SelectEmployeebyDate action, click on the Add SQL Action button in the Custom Actions panel.

To create the SelectEmployeebyDate action on the screen that opens, first, enter the action name as SelectEmployeebyDate. Then, enter the query statement in the SQL editor.

Select e.FullName, e.Id , EmployeeImage, d.DepartmentNamefrom Employee eleft join Department d on d. Id = e.Departmentorder by CreatedDate desc

To complete the process of creating the SelectEmployeebyDate action, click the CREATE button to create the action.

That's it, now let's look at the next action.

5. SelectEmployeebyTI action

Let's create a Select action named SelectEmployeebyTI using the Custom Actions panel to retrieve employee information according to the value entered with TextInput on the list screen and to list the employee information. Open a new action creation screen via the Add SQL Action button in the Custom Actions panel.

Enter the action name as SelectEmployeebyTI. Then, type the relevant query text in the SQL editor on the screen. The query below will work for this action.

select e.*,d.DepartmentName from employee eleft join Department d on d.Id =e.DepartmentWHERE FullName LIKE @searchFor OR @searchFor is null OR @searchFor = '''

After writing the query text in the SQL editor, save the action you created with the CREATE button.

6. SelectEmployeebyID action

The display screen allows you to show the information of an employee you select in the list screen. You can specify which employee's information will be displayed on the display screen with the ID of the employee. A custom action that you will create for this process may work for you. Open the new action creation screen through the Custom Actions panel using the same steps we used when creating the previous actions.

First, let's type the name of the action, SelectEmployeebyID. Then, type the relevant query in the SQL editor that welcomes you on the screen. The query given on the screen will allow you to retrieve employee information through the ID that the employee has. You can use the query below within the scope of this application.

select e.*, d.DepartmentName,t.Title as titleName from employee e
left join Department d on d.ID = e.Department
left join Title t on t.Id = e.Title
where e.Id = @Id

After writing the relevant query with the SQL editor, save the action you created with the CREATE button.

7. SelectDepartment action

A Department listing action is needed to pull the Department information from the form screen that allows adding new employees and editing employee information via Selectbox.

Open the screen to create a new action via the Custom Actions panel.

Let's set the action name as SelectDepartment. You can use the query below within the scope of this application in the SQL editor.

Select * from Department ORDER BY DepartmentName

After completing the query writing process, save the action with the CREATE button.

8. SelectTitle action

We need a Title listing action to pull the title information on the form screen that allows adding new employees and editing employee information via Selectbox.

Open the screen to create a new action via the Custom Actions panel.

Enter the action name as SelectTitle. Add the query shown below in this application to the SQL editor.

Select * from Title ORDER BY Title

Save the action you created with the CREATE button.

9. DeleteEmployee action

Let's create the DeleteEmployee action for employee deletion, which is the last action for the application we are developing, together using the Custom Actions panel. Open the Add SQL Action window in the Custom Actions panel. To quickly add the Delete query, hover over the Employee table on the left side of the screen and open the detail menu. You can quickly add the query to the SQL editor on the right by clicking Delete from the menu that opens.

In the last step of creating the DeleteEmployee action, name the action you created and complete the process by clicking the CREATE button.

Adding an action is that fast and simple.

In the next learning content, we will use Symbol Picker to link the actions we created to the screen designs we created in module 3.

Yardımcı kaynaklar

Glossary