Data Binding in Mobile App

Let's add a function to our mobile application by connecting the actions and system actions we have created to the mobile screen designs we have prepared.

Let's start with the Dashboard screen first.

Let's start the data binding process on the Dashboard screen with the Logout icon in the Header. Select the Logout icon in the Header. Add the Logout action in Authorization actions via the Properties panel.

Click on an empty place on the screen.

Let's add Initial Actions to pull the total number of staff, the total number of departments, and the list of recently added staff each time the screen opens.

Let's start in order.

Add the action that will provide the total number of employees by performing the ADD ACTION → Initial Actions → Custom → ManagedDB → TotalEmployee steps through the Properties panel.

Then add the action that will bring the total number of departments by performing ADD ACTION → Initial Actions → Custom → ManagedDB → TotalDepartment.

Finally, add the SelectEmployeebyDate action as an Initial action through the Properties panel.

Now, let's connect these actions to the related fields.

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 and make the relevant selection returned as a result of the action. Enter a temporary value in the Design Plascholder field. This value will only be valid to eliminate the cluttered look when designing.

In the second step, select the Label with the total number of departments. In the Properties panel, click on Symbol Picker next to Fixed Value under Value and make the relevant selection. Enter a temporary value from the Design Plascholder field.

Let's connect the action on the Dashboard screen that will list the recently added employee.

Select the Table element on the screen and select the SelectEmployeebyDate action as Datasource in the Properties panel.

Select the Image element in the first column of the Table element and select value → Field to display → employeeImage in the Properties panel.

Select the Label in the second column and select value → Field to display → FullName in the Properties panel.

Select the Label with the department name and select value → Field to display → DepartmentName in the Properties panel.

Select the Icon element in the last column of the Table element and add the Navigate action to navigate to the EmployeeDetail screen.

Let's continue with the Tabbar that will provide navigation within the application.

Select the parent column with the Dashboard icon and text. Using the Properties panel, add the Navigate action that will redirect to the Dashboard screen.

Select the parent column with the Employee List icon and text. Use the Navigate action to navigate to the List screen.

Finally, select the parent column with the Profile icon and text. Add the Navigate action to navigate to the Profile screen.

We have completed the Dashboard screen.

Let's open the listing screen where the employees are listed.

Select the Logout icon in the header. Add the Logout action in Authorization actions via the Properties panel.

Click on an empty field on the list screen and select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebySearch through the Properties panel of the screen.

Then click Symbol Picker next to SearchFor under SelectEmployeebySearch action. Select Components → TextInput1 → Value.

This will run the action that will provide the listing function every time the Employee List screen is opened. SearchFor parameter will filter the listing according to the value in TextInput.

Select the TextInput element on the screen. Select ADD ACTION → onChange → Actions → Custom → ManagedDB → SelectEmployeebySearch via the Properties panel.

Click the Symbol Picker next to the SearchFor parameter 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 Table element that will provide the listing function.

In the Properties panel, select the SelectEmployeebySearch action via Datasource.

Select the Image element in the first column of the Table element and select value → Field to display → employeeImage in the Properties panel.

Select the Label in the second column and select value → Field to display → FullName in the Properties panel.

Select the Label with the department name and select value → Field to display → DepartmentName in the Properties panel.

Select the Icon element in the last column of the Table element and add the Navigate action to navigate to the EmployeeDetail screen.

Let's continue with Tabbar, which will provide navigation within the application.

Select the parent column with the Dashboard icon and text. Using the Properties panel, add the Navigate action to navigate to the Dashboard screen.

Select the parent column with the Employee List icon and text. Use the Navigate action to navigate to the List screen.

Finally, select the parent column with the Profile icon and text. Add the Navigate action to navigate to the Profile screen.

With these actions, we have completed data binding on the List screen.

Open the Employee Detail screen.

Add the action that returns to the previous screen to the arrow icon on the screen. Select the icon in the Header. Select Add Action>Navigation>GoBack using the Properties panel.

On the detail screen, let's add the actions needed to pull the detailed information of the staff.

Click on an empty space on the screen. Select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectEmployeebyID via the Properties panel.

Click ADD SCREEN INPUT in the Properties panel. Set the Screen Input name as detail, select the Screen Input type as Guid, and click Create.

Then select Screen Inputs>detail via Symbol Picker next to the ID parameter under the SelectEmployeebyID action you added as Initial Action.

Now, let's return to the dashboard and listing screens that provide routing to the employee detail screen and define the Screen Input parameter.

Open the Dashboard screen. Select the icon in the last column of the table. Expand the Navigate action you added earlier in the Properties panel. Select Current → id via Symbol Picker next to the detail parameter.

Then open another screen, the List screen. Select the icon in the table and expand the Navigate action. Select Current → id via Symbol Picker next to the detail parameter.

Now, let's go back to the employee detail screen and perform data binding operations.

First, select the Image element on the screen.

In the Properties panel, select Value → Actions Results → SelectEmployeebyID → First → EmployeeImage.

In the next step, select the Label element where the employee name will be written.

In the Properties panel, select Value → Actions Results → SelectEmployeebyID → First → FullName.

Similarly, for other Label elements on the screen, select SelectEmployeebyID under the action

DepartmentName

TitleName

Email

phoneNumber

BirthdayDate

Make your choices

That's it!

With these operations, we have completed data binding on the employee detail screen.

Finally, let's carry out data-binding operations on the Profile screen.

Select the Logout icon in the Header. Add the Logout action in Authorization actions via the Properties panel.

Click on an empty area on the Profile screen and select ADD ACTION → Initial Actions → Custom → ManagedDB → SelectProfile via the Properties panel of the screen.

Now, let's bind this action to the relevant places on the screen.

Select the Image element on the screen.

In the Properties panel, select Value → Actions Results → SelectEmployeebyID → First → EmployeeImage.

Similarly, for the other Label elements on the screen, under the SelectEmployeebyID action

FullName

DepartmentName

TitleName

Email

phoneNumber

BirthdayDate

Make your choices.

Let's continue with Tabbar.

Select the parent column with the Dashboard icon and text. Using the Properties panel, add the Navigate action to navigate to the Dashboard screen.

Select the parent column with the Employee List icon and text. Use the Navigate action to navigate to the List screen.

Finally, select the parent column with the Profile icon and text. Add the Navigate action to navigate to the Profile screen.