Work With Data Views

Last updated 12/03/2025

This how to guide will demonstrate how to work with data views. Data views simply display the results from your selected data source, however, you can add action buttons, clickable data fields, and screen fields to display, filter, and navigate through records.

The following video shows the features you will learn in this tutorial and how they are applied in an application.

note

If you want the Filter Customer application as a reference, click to download the FDF file FilterCustomer.fdf and you can import this FDF into your Five account.

If you are building the application, you can't have both application ID's called FilterCustomer.

In this tutorial you will learn how to:

• Add a parameterized query for a data view
• Add a function that will display and open a form record
• Create a data view with screen fields and clickable data fields
• Add an action button to return back to your data view

A small application with just one table will be used to demonstrate this.

Figure 1 - Filter Customer database model

The application has one form that is attached to a menu item. The form has all the fields from the table except the primary key field.

Figure 2 - Form fields

Before beginning this tutorial you will need to:

• Create your application
• Create the Customer table with the fields in image 1
• Create the Customers form with the fields in image 2

tip

If you make your form in the form wizard, your menu item will automatically be created!

Add the CustomerSearchQuery

The CustomerSearchQuery will be added and used as our data source for the data view. We are selecting the CustomerKey, FirstName, and LastName fields from our Customer table and adding a

WHERE

clause which can be used to filter the records using the screen fields First Name and Last Name which will be added to the data view. Because our search values are being used as a wild card search, we need to use

CONCAT

to surround the parameters with wild card notation, so the database can use the

LIKE

search keyword to filter the records. The CustomerKey field is to have uniqueness for each record.

The parameters need to be defined in your query using the

variable

property on the

Five

object, example

{{five.variable.variableName}}

.

1. Select Data in the menu.

2. Select Queries in the sub-menu.

Figure 3 - Queries menu item

3. Click the Add Item button.

4. Type CustomerSearchQuery in the Data Source ID field.

5. Click in the Query field to open the Query Editor.

Figure 4 - Add CustomerSearchQuery

6. Click the SQL tab in the editor app bar.

Figure 5 - SQL tab

7. Copy and paste the syntax below.

Selects FirstName and LastName fields

SELECT 
    CustomerKey,
    FirstName,
    LastName
FROM
    Customer
WHERE 
    FirstName LIKE CONCAT('%', ?, '%')
    AND
    LastName LIKE CONCAT('%', ?, '%')

8. Click the Save button in the editor app bar.

Figure 6 - Save button

9. Click the Parameters tab.

Figure 7 - Parameters tab

10. Click the Add Parameters button.

Figure 8 - Add Parameters button

11. Type FirstName in the Parameter ID field.

12. Type

{{five.variable.FirstName}}

in the Parameter field.

Figure 9 - Add FirstName parameter

13. Click the Save button.

Figure 10 - Save button

14. Click the Add Parameters button.

Figure 11 - Add Parameters button

15. Type LastName in the Parameter ID field.

16. Type

{{five.variable.LastName}}

in the Parameter field.

Figure 12 - Add LastName parameter

17. Click the Save button in the form app bar.

Figure 13 - Save button

18. Click the Save button in the form app bar above the list.

Figure 14 - Save button

Add the ShowCustomerRecord Function

The

ShowCustomerRecord()

function will be attached to the On Click event for the First Name screen field on the data view. The First Name screen field will have a display type of _Text, this will turn the First Name screen field into a clickable field on the data view. When clicked the

ShowCustomerRecord()

function will execute and display the record for the field that was clicked. Five's

selectRecord()

function is used to select and display the form record.

1. Select Logic in the menu.

2. Select Functions in the sub-menu.

Figure 15 - Functions menu item

3. Click the Add Item button.

4. Type ShowCustomerRecord in the Function ID field.

5. Click in the Code field to open the Code Editor.

Figure 16 - Add ShowCustomerRecord function

6. Copy and paste the code block below into the editor.

note

The code block needs to be pasted over the template that Five creates in the editor.

Selects the customer's form record

function ShowCustomerRecord(five, context, result)  {
    five.selectRecord('Customers', five.field.CustomerKey)
    return five.success(result);
}

7. Click the Save button in the Code Editor app bar.

Figure 17 - Save button

8. Click the Save button in the form app bar.

Figure 18 - Save button

Add the Customer Search Data View

The Customer Search data view will enable you to filter the records with the First Name and the Last Name screen fields, once you have your targeted record you will be able to click the First Name data field in your data view and this will select and display the record for the selected customer record. The CustomerSearchQuery and the ShowCustomerRecord function will be used on the Customer Search data view.

The data fields will be displayed in your results and the screen fields will filter your results.

1. Select Visual in the menu.

2. Select Data Views in the sub-menu.

Figure 19 - Data Views menu item

3. Click the Add Item button.

4. Type Customer Search in the Title field.

5. Click the lookup icon in the Data Source field and select CustomerSearchQuery (Query).

Figure 20 - Add Customer Search data view

6. Click the Data Fields tab.

info

All your data fields in your query are automatically listed on the Data Fields page.

Figure 21 - Data Fields tab

7. Select the CustomerKey record.

Figure 22 - CustomerKey record

8. Either click the Edit button in the form app bar or click directly in the Show If field.

Figure 23 - Edit button

9. Click the Cancel button in the Show If field and type false.

info

By typing

false

in the Show If field, the CustomerKey field won't display on our data view. This is exactly what we want as the CustomerKey field holds a GUID which we don't want to display, this is purely used to have uniqueness for each record.

10. Click the Save button in the form app bar.

Figure 24 - Save button

11. Select the FirstName record.

Figure 25 - FirstName record

12. Either click the Edit button in the form app bar or click directly in the Caption field.

Figure 26 - Edit button

13. Add a space between First and Name.

tip

The caption will be displayed on your data view, hence, changing the caption to be more user friendly to read!

14. Click the Events tab.

Figure 27 - Events tab

15. Click the lookup icon in the On Click field and select ShowCustomerRecord.

Figure 28 - On Click event

16. Click the Save button in the form app bar.

Figure 29 - Save button

17. Select the LastName record.

Figure 30 - LastName record

18. Either click the Edit button in the form app bar or click directly in the Caption field.

Figure 31 - Edit button

19. Add a space between Last and Name.

20. Click the Save button in the form app bar.

Figure 32 - Save button

21. Click the Screen Fields tab.

Figure 33 - Screen Fields tab

22. Click the Add Screen Fields button.

Figure 34 - Add Screen Fields button

23. Type First Name in the Caption field.

24. Click the lookup icon in the Display Type field and select _Text.

Figure 35 - Add First Name field

25. Click the lookup icon in the Linked Parameter field and select

{{five.variable.FirstName}}

.

info

All the parameters from your query will be listed in the Linked Parameter field, when you select a parameter it will link the current screen field to the selected parameter in your query.

Figure 36 - Linked Parameter field

26. Click the Save button in the form app bar.

Figure 37 - Save button

27. Click the Add Screen Fields button.

Figure 38 - Add Screen Fields button

28. Type Last Name in the Caption field.

29. Click the lookup icon in the Display Type field and select _Text.

Figure 39 - Add Last Name field

30. Click the lookup icon in the Linked Parameter field and select

{{five.variable.LastName}}

.

Figure 40 - Linked Parameter field

31. Click the Save button in the form app bar.

Figure 41 - Save button

32. Click the Save button in the form app bar above the list.

Figure 42 - Save button

Add the BackToSearchCustomer Function

In the application, once you click the First Name data field on the data view, it will navigate you to the selected customer form record. To make it that you can return to the data view without selecting a menu item, you can add an action button to your form. The button needs a function attached, and the function can use Five's

previousAction()

function to navigate you back to your data view with a full list of records again.

1. Select Logic in the menu.

2. Select Functions in the sub-menu.

Figure 43 - Functions menu item

3. Click the Add Item button.

4. Type BackToSearchCustomer in the Function ID field.

5. Click in the Code field to open the Code Editor.

Figure 44 - Add BackToSearchCustomer function

6. Copy and paste the code block below into the editor.

note

The code block needs to be pasted over the template that Five creates in the editor.

Selects the previous action

function BackToSearchCustomer(five, context, result) {
    five.previousAction()
    return five.success(result);
}

7. Click the Save button in the Code Editor app bar.

Figure 45 - Save button

8. Click the Save button in the form app bar.

Figure 46 - Save button

Add an Action Button

Tha action button will be attached to the Customers form and when clicked will return you back to the data view as this was the previously selected action.

1. Select Visual in the menu.

2. Select Forms in the sub-menu.

Figure 47 - Forms menu item

3. Select the Customers record in the list.

4. Click the Action Buttons tab.

Figure 48 - Action Buttons tab

5. Click the Add Action Buttons button.

Figure 49 - Add Action Buttons button

6. Type Back To Search Customer in the Caption field.

7. Click the Events tab.

Figure 50 - Add Back To Search Customer action button

8. Click the lookup icon in the On Press field and select BackToSearchCustomer.

Figure 51 - On Press field

9. Click the Save button in the form app bar.

Figure 52 - Save button

10. Click the Save button in the form app bar above the list.

Figure 53 - Save button