While developing applications with Kuika, you can perform data binding operations through system actions and custom actions you create.
In this learning content, we will examine the binding of the data in your data sources to the screen designs in detail for each screen we have created.
While developing applications with Kuika, you can perform data binding operations through system actions and custom actions you create.
In this learning content, we will examine the binding of the data in your data sources to the screen designs in detail for each screen we have created.
Let's start with our first screen, the Dashboard screen.
Now, let's remember the Dashboard screen we have prepared and visualized below.
Let's start the data binding process on the Dashboard screen first with the menu in the Header. When we click on the hamburger menu icon in the Header, first select the menu icon to open the Left Menu page. Click the ADD ACTION button in the Properties panel of the menu icon. Then select onClick → Navigation → Navigate. Then select the menu screen that will be opened via To Screen in the Navigate action you added, that is, the screen titled Left Menu, and select Drawer as the screen opening type.
After selecting Drawer, select the opening direction as Left and click the Close button.
After connecting the menu screen to the Dashboard screen, let's add the Logout system action to the Logout item in the Content Menu in the next step.
For this process, first, select the Logout item via the Content Menu properties panel. With Logout selected, select ADD ACTION → onClick → Authorization → Logout in the Properties panel.
With this process, we have completed the data binding process for the Header on the Dashboard screen; now, let's provide the data connection for other data on the Dashboard screen.
First of all, let's add the actions that will provide the employee listing in the table on the Dashboard screen and display the total number of employees and departments in the card structure as Initial. For this, click on an empty area on the Dashboard screen and select ADD ACTION → Initial Actions → Custom>ManagedDB → SelectEmployeebyDate through the Properties panel of the screen.
Then ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee and add the action that will provide the total number of employees and ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment and add the action that will provide the total number of departments as Initial.
Adding these actions as Initial will enable the actions to run on this screen every time the Dashboard screen is opened.
Now, let's connect the values from these actions to the related fields.
First, select the Label where the total number of total employees will be written. Then click the Symbol Picker next to Fixed Value under Value in the Properties panel.
From the menu that opens, select Action Results → TotalEmployee → First → TotalEmployee → To String.
Thus, we have performed the data binding process for the total number of employees.
In the second step, select the Label for the total number of departments. Click Symbol Picker next to Fixed Value under Value in the Properties panel.
From the menu that opens, select Action Results → TotalDepartment → First → TotalDepartment → To String.
With this process, we have completed the data binding process in the card structure on the Dashboard screen.
Let's start the data binding process for the table structure that lists the last added employee on the Dashboard screen.
First, when we click on the Show All statement, let's switch to the list screen that will list all employees. Select the Label where Show All is written. Click the ADD ACTION button in the Properties panel. Then select onClick → Navigation → Navigate. In the Navigate action you added, select the list screen that will be opened via To Screen, that is, the screen titled Employee List, and select Current Page as the screen opening type.
Click the Close button to save the action.
Then, let's perform the data binding process to the table that lists the last added employee on the Dashboard screen.
Select the Table element via Item Tree or BreadCrumb. Select the SelectEmployeebyDate action via Datasource in the Properties panel.
Then, let's bind data to the contents in the columns of the Table element.
First, select the Image element in the Horizontal Stack in the first column and select value → Field to display → Image in the Properties panel.
Then select the Label element in the Horizontal Stack in the first column and select value → Field to display → FullName in the Properties panel.
Next, select the Label element in the second column and select value → Field to display → Department in the Properties panel.
Finally, select the icon in the third column and perform ADD ACTION → onClick → Navigation → Navigate. In the Navigate action you added, select the list screen that will be opened via To Screen, that is, the screen titled Display, and select Drawer as the screen opening type.
After selecting Drawer, select the opening direction as Right and click the Close button.
With this process, we have completed the data binding process on the Dashboard screen.
Now, let's move on to the data binding process on another screen, the Listing screen.
Open the screen titled EmployeeList for data binding on the listing screen.
In order to bind the relevant actions to the elements in the Header on the screen, perform the action binding operations just like on the Dashboard screen.
To open the Left Menu page, first select the menu icon in the Header. Click the ADD ACTION button in the Properties panel of the menu icon. Then select onClick → Navigation → Navigate. Then select the menu screen that will be opened via To Screen in the Navigate action you added, that is, the screen titled Left Menu, and select Drawer as the screen opening type.
After selecting Drawer, select the opening direction as Left and click the Close button.
After connecting the Dashboard screen to the menu screen, let's add the Logout system action to the Logout item in the Content Menu in the next step.
For this process, first select the Logout item through the Content Menu properties panel. With Logout selected, select ADD ACTION → onClick → Authorization → Logout in the Properties panel.
Now, let's add the action that will provide the listing function and complete the data-binding operations on the list screen.
Click on an empty field on the list screen and select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyTI via the Properties panel of the screen. Then, define the SearchFor parameter under the SelectEmployeebyTI action. Click Symbol Picker next to SearchFor and then select Components → TextInput1 → Value.
This will run the action that will provide the listing function every time the Employee List screen is opened. The SearchFor parameter will filter the listing according to the value in TextInput.
Now, let's connect the Initial action to the elements on the screen to display the data.
First, select the TextInput element and select ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebyTI via the Properties panel. Then, define the SearchFor parameter under the SelectEmployeebyTI action. Click Symbol Picker next to SearchFor and then select Components → TextInput1 → Value. This will provide filtering on the listing screen as you enter values in the TextInput element.
Then select the Button element and click the ADD ACTION button in the Properties panel. Then choose onClick → Navigation → Navigate. In the Navigate action you added, select the list screen that will be opened via To Screen, that is, the screen titled New Employee, and select Drawer as the screen opening type.
Click the Close button to save the action.
Then, select the Table element that will provide the listing function.
Select the SelectEmployeebyTI action via Datasource in the Properties panel.
You have now bound the Table element to a datasource. Now, let's bind data to the contents in the columns of the Table element.
First, select the Image element in the Horizontal Stack in the first column and select value → Field to display → Image in the Properties panel.
Then select the Label element in the Horizontal Stack in the first column and select value → Field to display → FullName in the Properties panel.
Then select the Label element in the second column and select value → Field to display → PhoneNumber, again using the Properties panel.
In the next step, select the Label element in the third column and select value → Field to display → Email in the Properties panel.
Then select the Label element in the fourth column and select value → Field to display → DepartmentName in the Properties panel.
Select the other icon in the Horizontal Stack and perform ADD ACTION → onClick → Navigation→Navigate. In the Navigate action you added, select the employee detail screen that will be opened via To Screen, that is, the screen titled Display, and select Drawer as the screen opening type. After selecting Drawer, select the opening direction as Right and click the Close button.
Select the edit icon in the Horizontal Stack and perform ADD ACTION → onClick → Navigation → Navigate. In the Navigate action you added, select the form screen that will be opened via To Screen, that is, the screen titled New Employee, and we can define Drawer as the screen opening type.
With this action, complete the data binding on the Listing screen.
In the next step, we will perform data binding operations on the Add and Update employee screen.
Open the screen titled New Employee for the data binding process on the employee addition and update screen.
Connect the relevant system action for the close screen icon in the Header on the screen that allows you to return to the previous screen.
For this, first select the icon in the Header. Click the ADD ACTION button in the Properties panel of the icon. Then select onClick → Navigation →GoBack and save the action by clicking Close.
Then click on a blank area on the screen and add an Initial action and a Screen Input to pull the information of the relevant employee to perform the update operations. You can use Screen Input to transfer data between two or more screens during application development with Kuika.
First of all, after clicking on an empty place on the screen, select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyId via the Properties panel.
Let's add two more Initial Actions to fill the SelectBox elements on the screen with existing data. First, select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectDepartment.
Then select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectTitle.
Then click ADD SCREEN INPUT, also in the Properties panel. Set the Screen Input name as prmsave, select the Screen Input type as Guid, and click Create.
Then select Screen Inputs → prmsave via Symbol Picker for Id parameter under SelectEmployeebyId action.
Now, it is necessary to define the Screen Input parameter to provide data transfer from the listing screen that directs to the employee addition and update screen.
For this, open the List screen. First, select the New Add button. Expand the Navigate action you added before in the Properties panel.
You should have seen that a new parameter named prmsave has been added under the Navigate action. Now select Default → New Guid via Symbol Picker next to prmsave parameter. Thus, you will be able to redirect to the employee addition and update screen with the New Add button.
Another element on the List screen that provides redirection to the employee add and update screen is the edit icon in the fifth column of the table. Select the edit icon and expand the Navigate action you added before in the Properties panel.
You should have seen that a new parameter named prmsave has been added under the Navigate action. Now select Current>id via Symbol Picker next to the prmsave parameter. This way, when you navigate to the add and update employee screen with the edit icon, the employee you want to edit will be automatically pulled.
Now, let's go back to the data-binding operations on the employee addition and update screen.
First, select the Cloud icon that allows uploading images. With the icon element selected, select ADD ACTION → OnClick Actions → Device → PhotoFromGallery.
Next, let's add a UI Control action to list the image we selected from the gallery in the Image element. For this action, choose ADD ACTION → OnClick Actions → UIControl → SetValueOf.
Select the Image1 element under the Component to Change parameter under the SetValueOf action. Select ActionResult→PhotoFromGallery for the Value parameter that opens. Then, add a condition to this action. This condition will query in the background if the image is selected or not. To add a condition, open the dot-dot-dot-dot menu next to the SetValueOf action and select Add Condition. You will then notice that a Condition field appears under SetValueOf.
Under Condition, click Symbol Picker for the parameter under Will execute if..... Choose ActionResult→PhotoFromGallery. Then, add the Is Not Empty condition from the drop-down menu at the bottom. Thus, as soon as an image comes from the gallery, it will be displayed in the Image element.
In the next step, let's define the data sources of Department and Title SelectBoxes.
Select the SelectBox opposite Department. In the Properties panel Options field, select SelectDepartment as Action, DepartmentName as Field to display, and Id as Field to Use as Key.
Similarly, for the Title SelectBox, select SelectTitle as Action, Title as Field to display, and Id as Field to Use as Key in the Properties panel Options area.
Select the button. Select ADD ACTION → onClick → Custom → ManagedDB → EmployeeSave via the Properties panel. Let's define the parameters of the action added to the Action panel. Defining parameters will specify where the new data to be added will be taken from.
Parameter definition is done according to the alphabetical order of the columns in the data table.
First, select Components → Date1 → Value via Symbol Picker next to the BirthdayDate parameter. Date1 here is the Default name of the element. When you change the name of the element, it will be listed here with the new name.
Then select Default → Now via Symbol Picker next to CreatedDate, the second parameter.
Select Components → SelectBox1 → Value via the Symbol Picker next to the third parameter Department.
Select Email1 → Value for Email and Value under Image for EmployeeImage.
TextInput1 for FullName and NumberInput1 for PhoneNumber, SelectBox0_1→ Value for Title.
For the last parameter definition, select Screen Input → prmSave via Symbol Picker next to Id.
With these steps, we have completed the parameter definition process.
Then, add a GoBack action to the Save button to return to the list screen automatically after saving. For this process, it will be enough to select Add Action → onClick → Navigation → GoBack.
Another function of the add and update employee screen is to update the information of the employee on the list screen. In order to perform this operation, it is necessary to update the information of the user whose information you want to retrieve in the relevant fields. Now, let's do the necessary operations to fulfill this function.
Select the Image element on the screen.
In the Properties panel, select Value → Actions Results → SelectEmployeebyID → First → EmployeeImage.
Select Value → Actions Results → SelectEmployeebyID → First → FullName in the TextInput1 element that we will use for the employee name in the next step.
Similarly, after selecting each element, under SelectEmployeebyID, select the value according to the relevant field step.
Now, in an update process, the employee information will be listed automatically.
Our last operation on this screen is the deletion operation in Footer. Select Delete written Label to perform the deletion.
Select ADD ACTION → onClick → Custom → DeleteEmployee via the Properties panel. Select the ID parameter in the action with Symbol Picker and select Screen Inputs → prmsave.
That's it!
With these operations, we have completed data binding on the add and update employee screen. Our next screen is the Display screen, which allows you to view the details of the employee information. Now, let's take a closer look at the data-binding operations on the Display screen
Open the Display screen. Let's start by adding a system action for the close icon in the Header.
To do this, first select the icon in the Header. Select the ADD ACTION → onClick → Navigation → GoBack action.
Then click on an empty space on the screen and add an Initial action and a Screen Input to pull the information of the relevant employee to perform the update operations. Select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID via the Properties panel.
Then click ADD SCREEN INPUT again. Set the Screen Input name as prmdetail, select the Screen Input type as Guid, and click Create.
Select Screen Inputs>prmdetail via Symbol Picker next to ID parameter under SelectEmployeebyID action.
It is necessary to define the Screen Input parameter to provide data transfer from the dashboard and listing screen that provides routing to the employee detail screen.
For this, first open the Dashboard screen. Select the icon in the last column of the table. Expand the Navigate action you added before in the Properties panel.
You should have seen that a new parameter named prmdetail has been added under the Navigate action. Now select Current → id via Symbol Picker next to the prmdetail parameter. Thus, when you navigate to the employee detail screen with the detail icon, the information of the employee whose details you want to view will be automatically retrieved.
Then open another screen, the List screen. Select the display icon in the fifth column of the table and expand the Navigate action you added earlier in the Properties panel.
You should have seen that a new parameter named prmdetail has been added under the Navigate action. Now select Current → id via Symbol Picker next to the prmdetail parameter. Thus, when you navigate to the employee detail screen with the detail icon, the information of the employee whose details you want to view will automatically appear.
Now, let's go back to the employee detail screen and perform data binding operations.
First, select the Image element on the screen.
Properties panel Value → Actions Results → SelectEmployeebyID → First → EmployeeImage.
Similarly, for other Labels and similar elements on the screen, select Fullname, Phone, Email, DepartmentName, TitleName, and BirthdayDate definitions.
With these operations, we have completed data binding on the employee detail screen.
Let's do the related action additions together to provide navigation with the menu you will use in the application.
Open the LeftMenu screen. Select the icon in the Header on the screen that will return to the previous screen; that is, close the Left Menu and add the GoBack system action.
Then select the Row elements with Dashboard and Employee List Labels and define Navigate actions by selecting each one separately.
Select the Row element containing the New Employee Label element and select ADD ACTION → onClick → Navigation → Navigate in the Properties panel. Select the screen titled New Employee that will be opened via To Screen in the Navigate action you added. Then select Default → New Guid via Symbol Picker for the screen input titled prmsave. Select Drawer as the screen opening type.
In the next learning content, we will examine how to make the above operations easier with the CRUD structure on the Add Department screen.
While developing applications with Kuika, you can perform data binding operations through system actions and custom actions you create.
In this learning content, we will examine the binding of the data in your data sources to the screen designs in detail for each screen we have created.
While developing applications with Kuika, you can perform data binding operations through system actions and custom actions you create.
In this learning content, we will examine the binding of the data in your data sources to the screen designs in detail for each screen we have created.
Let's start with our first screen, the Dashboard screen.
Now, let's remember the Dashboard screen we have prepared and visualized below.
Let's start the data binding process on the Dashboard screen first with the menu in the Header. When we click on the hamburger menu icon in the Header, first select the menu icon to open the Left Menu page. Click the ADD ACTION button in the Properties panel of the menu icon. Then select onClick → Navigation → Navigate. Then select the menu screen that will be opened via To Screen in the Navigate action you added, that is, the screen titled Left Menu, and select Drawer as the screen opening type.
After selecting Drawer, select the opening direction as Left and click the Close button.
After connecting the menu screen to the Dashboard screen, let's add the Logout system action to the Logout item in the Content Menu in the next step.
For this process, first, select the Logout item via the Content Menu properties panel. With Logout selected, select ADD ACTION → onClick → Authorization → Logout in the Properties panel.
With this process, we have completed the data binding process for the Header on the Dashboard screen; now, let's provide the data connection for other data on the Dashboard screen.
First of all, let's add the actions that will provide the employee listing in the table on the Dashboard screen and display the total number of employees and departments in the card structure as Initial. For this, click on an empty area on the Dashboard screen and select ADD ACTION → Initial Actions → Custom>ManagedDB → SelectEmployeebyDate through the Properties panel of the screen.
Then ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee and add the action that will provide the total number of employees and ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment and add the action that will provide the total number of departments as Initial.
Adding these actions as Initial will enable the actions to run on this screen every time the Dashboard screen is opened.
Now, let's connect the values from these actions to the related fields.
First, select the Label where the total number of total employees will be written. Then click the Symbol Picker next to Fixed Value under Value in the Properties panel.
From the menu that opens, select Action Results → TotalEmployee → First → TotalEmployee → To String.
Thus, we have performed the data binding process for the total number of employees.
In the second step, select the Label for the total number of departments. Click Symbol Picker next to Fixed Value under Value in the Properties panel.
From the menu that opens, select Action Results → TotalDepartment → First → TotalDepartment → To String.
With this process, we have completed the data binding process in the card structure on the Dashboard screen.
Let's start the data binding process for the table structure that lists the last added employee on the Dashboard screen.
First, when we click on the Show All statement, let's switch to the list screen that will list all employees. Select the Label where Show All is written. Click the ADD ACTION button in the Properties panel. Then select onClick → Navigation → Navigate. In the Navigate action you added, select the list screen that will be opened via To Screen, that is, the screen titled Employee List, and select Current Page as the screen opening type.
Click the Close button to save the action.
Then, let's perform the data binding process to the table that lists the last added employee on the Dashboard screen.
Select the Table element via Item Tree or BreadCrumb. Select the SelectEmployeebyDate action via Datasource in the Properties panel.
Then, let's bind data to the contents in the columns of the Table element.
First, select the Image element in the Horizontal Stack in the first column and select value → Field to display → Image in the Properties panel.
Then select the Label element in the Horizontal Stack in the first column and select value → Field to display → FullName in the Properties panel.
Next, select the Label element in the second column and select value → Field to display → Department in the Properties panel.
Finally, select the icon in the third column and perform ADD ACTION → onClick → Navigation → Navigate. In the Navigate action you added, select the list screen that will be opened via To Screen, that is, the screen titled Display, and select Drawer as the screen opening type.
After selecting Drawer, select the opening direction as Right and click the Close button.
With this process, we have completed the data binding process on the Dashboard screen.
Now, let's move on to the data binding process on another screen, the Listing screen.
Open the screen titled EmployeeList for data binding on the listing screen.
In order to bind the relevant actions to the elements in the Header on the screen, perform the action binding operations just like on the Dashboard screen.
To open the Left Menu page, first select the menu icon in the Header. Click the ADD ACTION button in the Properties panel of the menu icon. Then select onClick → Navigation → Navigate. Then select the menu screen that will be opened via To Screen in the Navigate action you added, that is, the screen titled Left Menu, and select Drawer as the screen opening type.
After selecting Drawer, select the opening direction as Left and click the Close button.
After connecting the Dashboard screen to the menu screen, let's add the Logout system action to the Logout item in the Content Menu in the next step.
For this process, first select the Logout item through the Content Menu properties panel. With Logout selected, select ADD ACTION → onClick → Authorization → Logout in the Properties panel.
Now, let's add the action that will provide the listing function and complete the data-binding operations on the list screen.
Click on an empty field on the list screen and select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyTI via the Properties panel of the screen. Then, define the SearchFor parameter under the SelectEmployeebyTI action. Click Symbol Picker next to SearchFor and then select Components → TextInput1 → Value.
This will run the action that will provide the listing function every time the Employee List screen is opened. The SearchFor parameter will filter the listing according to the value in TextInput.
Now, let's connect the Initial action to the elements on the screen to display the data.
First, select the TextInput element and select ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebyTI via the Properties panel. Then, define the SearchFor parameter under the SelectEmployeebyTI action. Click Symbol Picker next to SearchFor and then select Components → TextInput1 → Value. This will provide filtering on the listing screen as you enter values in the TextInput element.
Then select the Button element and click the ADD ACTION button in the Properties panel. Then choose onClick → Navigation → Navigate. In the Navigate action you added, select the list screen that will be opened via To Screen, that is, the screen titled New Employee, and select Drawer as the screen opening type.
Click the Close button to save the action.
Then, select the Table element that will provide the listing function.
Select the SelectEmployeebyTI action via Datasource in the Properties panel.
You have now bound the Table element to a datasource. Now, let's bind data to the contents in the columns of the Table element.
First, select the Image element in the Horizontal Stack in the first column and select value → Field to display → Image in the Properties panel.
Then select the Label element in the Horizontal Stack in the first column and select value → Field to display → FullName in the Properties panel.
Then select the Label element in the second column and select value → Field to display → PhoneNumber, again using the Properties panel.
In the next step, select the Label element in the third column and select value → Field to display → Email in the Properties panel.
Then select the Label element in the fourth column and select value → Field to display → DepartmentName in the Properties panel.
Select the other icon in the Horizontal Stack and perform ADD ACTION → onClick → Navigation→Navigate. In the Navigate action you added, select the employee detail screen that will be opened via To Screen, that is, the screen titled Display, and select Drawer as the screen opening type. After selecting Drawer, select the opening direction as Right and click the Close button.
Select the edit icon in the Horizontal Stack and perform ADD ACTION → onClick → Navigation → Navigate. In the Navigate action you added, select the form screen that will be opened via To Screen, that is, the screen titled New Employee, and we can define Drawer as the screen opening type.
With this action, complete the data binding on the Listing screen.
In the next step, we will perform data binding operations on the Add and Update employee screen.
Open the screen titled New Employee for the data binding process on the employee addition and update screen.
Connect the relevant system action for the close screen icon in the Header on the screen that allows you to return to the previous screen.
For this, first select the icon in the Header. Click the ADD ACTION button in the Properties panel of the icon. Then select onClick → Navigation →GoBack and save the action by clicking Close.
Then click on a blank area on the screen and add an Initial action and a Screen Input to pull the information of the relevant employee to perform the update operations. You can use Screen Input to transfer data between two or more screens during application development with Kuika.
First of all, after clicking on an empty place on the screen, select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyId via the Properties panel.
Let's add two more Initial Actions to fill the SelectBox elements on the screen with existing data. First, select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectDepartment.
Then select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectTitle.
Then click ADD SCREEN INPUT, also in the Properties panel. Set the Screen Input name as prmsave, select the Screen Input type as Guid, and click Create.
Then select Screen Inputs → prmsave via Symbol Picker for Id parameter under SelectEmployeebyId action.
Now, it is necessary to define the Screen Input parameter to provide data transfer from the listing screen that directs to the employee addition and update screen.
For this, open the List screen. First, select the New Add button. Expand the Navigate action you added before in the Properties panel.
You should have seen that a new parameter named prmsave has been added under the Navigate action. Now select Default → New Guid via Symbol Picker next to prmsave parameter. Thus, you will be able to redirect to the employee addition and update screen with the New Add button.
Another element on the List screen that provides redirection to the employee add and update screen is the edit icon in the fifth column of the table. Select the edit icon and expand the Navigate action you added before in the Properties panel.
You should have seen that a new parameter named prmsave has been added under the Navigate action. Now select Current>id via Symbol Picker next to the prmsave parameter. This way, when you navigate to the add and update employee screen with the edit icon, the employee you want to edit will be automatically pulled.
Now, let's go back to the data-binding operations on the employee addition and update screen.
First, select the Cloud icon that allows uploading images. With the icon element selected, select ADD ACTION → OnClick Actions → Device → PhotoFromGallery.
Next, let's add a UI Control action to list the image we selected from the gallery in the Image element. For this action, choose ADD ACTION → OnClick Actions → UIControl → SetValueOf.
Select the Image1 element under the Component to Change parameter under the SetValueOf action. Select ActionResult→PhotoFromGallery for the Value parameter that opens. Then, add a condition to this action. This condition will query in the background if the image is selected or not. To add a condition, open the dot-dot-dot-dot menu next to the SetValueOf action and select Add Condition. You will then notice that a Condition field appears under SetValueOf.
Under Condition, click Symbol Picker for the parameter under Will execute if..... Choose ActionResult→PhotoFromGallery. Then, add the Is Not Empty condition from the drop-down menu at the bottom. Thus, as soon as an image comes from the gallery, it will be displayed in the Image element.
In the next step, let's define the data sources of Department and Title SelectBoxes.
Select the SelectBox opposite Department. In the Properties panel Options field, select SelectDepartment as Action, DepartmentName as Field to display, and Id as Field to Use as Key.
Similarly, for the Title SelectBox, select SelectTitle as Action, Title as Field to display, and Id as Field to Use as Key in the Properties panel Options area.
Select the button. Select ADD ACTION → onClick → Custom → ManagedDB → EmployeeSave via the Properties panel. Let's define the parameters of the action added to the Action panel. Defining parameters will specify where the new data to be added will be taken from.
Parameter definition is done according to the alphabetical order of the columns in the data table.
First, select Components → Date1 → Value via Symbol Picker next to the BirthdayDate parameter. Date1 here is the Default name of the element. When you change the name of the element, it will be listed here with the new name.
Then select Default → Now via Symbol Picker next to CreatedDate, the second parameter.
Select Components → SelectBox1 → Value via the Symbol Picker next to the third parameter Department.
Select Email1 → Value for Email and Value under Image for EmployeeImage.
TextInput1 for FullName and NumberInput1 for PhoneNumber, SelectBox0_1→ Value for Title.
For the last parameter definition, select Screen Input → prmSave via Symbol Picker next to Id.
With these steps, we have completed the parameter definition process.
Then, add a GoBack action to the Save button to return to the list screen automatically after saving. For this process, it will be enough to select Add Action → onClick → Navigation → GoBack.
Another function of the add and update employee screen is to update the information of the employee on the list screen. In order to perform this operation, it is necessary to update the information of the user whose information you want to retrieve in the relevant fields. Now, let's do the necessary operations to fulfill this function.
Select the Image element on the screen.
In the Properties panel, select Value → Actions Results → SelectEmployeebyID → First → EmployeeImage.
Select Value → Actions Results → SelectEmployeebyID → First → FullName in the TextInput1 element that we will use for the employee name in the next step.
Similarly, after selecting each element, under SelectEmployeebyID, select the value according to the relevant field step.
Now, in an update process, the employee information will be listed automatically.
Our last operation on this screen is the deletion operation in Footer. Select Delete written Label to perform the deletion.
Select ADD ACTION → onClick → Custom → DeleteEmployee via the Properties panel. Select the ID parameter in the action with Symbol Picker and select Screen Inputs → prmsave.
That's it!
With these operations, we have completed data binding on the add and update employee screen. Our next screen is the Display screen, which allows you to view the details of the employee information. Now, let's take a closer look at the data-binding operations on the Display screen
Open the Display screen. Let's start by adding a system action for the close icon in the Header.
To do this, first select the icon in the Header. Select the ADD ACTION → onClick → Navigation → GoBack action.
Then click on an empty space on the screen and add an Initial action and a Screen Input to pull the information of the relevant employee to perform the update operations. Select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID via the Properties panel.
Then click ADD SCREEN INPUT again. Set the Screen Input name as prmdetail, select the Screen Input type as Guid, and click Create.
Select Screen Inputs>prmdetail via Symbol Picker next to ID parameter under SelectEmployeebyID action.
It is necessary to define the Screen Input parameter to provide data transfer from the dashboard and listing screen that provides routing to the employee detail screen.
For this, first open the Dashboard screen. Select the icon in the last column of the table. Expand the Navigate action you added before in the Properties panel.
You should have seen that a new parameter named prmdetail has been added under the Navigate action. Now select Current → id via Symbol Picker next to the prmdetail parameter. Thus, when you navigate to the employee detail screen with the detail icon, the information of the employee whose details you want to view will be automatically retrieved.
Then open another screen, the List screen. Select the display icon in the fifth column of the table and expand the Navigate action you added earlier in the Properties panel.
You should have seen that a new parameter named prmdetail has been added under the Navigate action. Now select Current → id via Symbol Picker next to the prmdetail parameter. Thus, when you navigate to the employee detail screen with the detail icon, the information of the employee whose details you want to view will automatically appear.
Now, let's go back to the employee detail screen and perform data binding operations.
First, select the Image element on the screen.
Properties panel Value → Actions Results → SelectEmployeebyID → First → EmployeeImage.
Similarly, for other Labels and similar elements on the screen, select Fullname, Phone, Email, DepartmentName, TitleName, and BirthdayDate definitions.
With these operations, we have completed data binding on the employee detail screen.
Let's do the related action additions together to provide navigation with the menu you will use in the application.
Open the LeftMenu screen. Select the icon in the Header on the screen that will return to the previous screen; that is, close the Left Menu and add the GoBack system action.
Then select the Row elements with Dashboard and Employee List Labels and define Navigate actions by selecting each one separately.
Select the Row element containing the New Employee Label element and select ADD ACTION → onClick → Navigation → Navigate in the Properties panel. Select the screen titled New Employee that will be opened via To Screen in the Navigate action you added. Then select Default → New Guid via Symbol Picker for the screen input titled prmsave. Select Drawer as the screen opening type.
In the next learning content, we will examine how to make the above operations easier with the CRUD structure on the Add Department screen.
