Skip to main content

Introduction to Dataviews


Creating a Dataview for an employee directory

This example lesson will introduce Dataviews in LiveCode Create and explain how they optimize data management. By the end of this, you will have a functional Employee Directory that displays a filtered list of employees from a collection.

What You Will Build​

In this lesson, you will:

  • Create a Collection to store raw employee data.
  • Build a Dataview to efficiently retrieve and display relevant records.
  • Set up Filtering Placeholders for refining results.
  • Bind a Simple List widget to a Dataview.
  • Create workflows to filter data using dropdowns and a search field.

Here is a screenshot of the UI shown in the video. You can use this as a reference when following this guide.

Sample UI

Step 1: Creating the Employee Collection​

Before working with a Dataview, we need a Collection to store employee data. If you would like to use the same data set as used in this example, download the CSV file here.

  1. Open the Data Section from the left-hand panel.
  2. Click New Collection.
  3. Name the collection Employees.
  4. Choose Build from CSV and select your dataset. (You can manually define fields if you prefer.)
  5. Review the imported fields and ensure they include:
    • Employee Name (Text)
    • Job Title (Text)
    • Department (Text)
    • Office (Text)
  6. Click Proceed.

Your Employees Collection is now ready.

Step 2: Creating a Dataview​

A Dataview allows your app to retrieve only the necessary data, improving performance.

  1. Open the Data Section and switch to the Dataviews tab.
  2. Click New Dataview.
  3. Name the Dataview Employee List View and click Continue.
  4. Select Employees as the Default Collection.
  5. Choose the fields you want to include:
    • Employee Name
    • Job Title
    • Department
    • Office

Step 3: Adding Filtering Placeholders​

To filter data dynamically, we need placeholders.

  1. Scroll down to the Filter section.
  2. Click Create New Filter and configure:
    • Placeholder Name: Department
    • Field: Department
    • Operator: Exact Match
  3. Click Create New Filter again:
    • Placeholder Name: Office
    • Field: Office
    • Operator: Exact Match
  4. Click Create New Filter again:
    • Placeholder Name: Search
    • Field: Employee Name
    • Operator: Contains
    • Add Another Condition with the + button: Job Title (Contains)
  5. Scroll down and create a Sorting Rule:
    • Sorting Name: Sort Name
    • Field: Employee Name
  6. Click Save Dataview.

Step 4: Binding Data to the User Interface​

Now that the Dataview is set up, we will bind it to a Simple List.

  1. Navigate back to your project UI by clicking on the Tools Palette icon in the left bar.
  2. Drag a Simple List onto the layout.
  3. Open the Property Inspector and navigate to the Data Binding tab at the top of the Inspector.
  4. Click Select Data Source and choose Employee List View.
  5. Set the Title field to Employee Name.
  6. Set the Subtitle field to Job Title.

Your list will now display all employees from the Dataview.

Step 5: Adding UI Controls for Filtering​

We will now add dropdowns and a search field to filter the list.

Adding the Department Dropdown​

  1. Drag a Dropdown onto the layout.
  2. Rename it to Department Dropdown in the property inspector
  3. Change the label to Department
  4. Manually enter the following options into the menu elements section of Dropdown contents.
    • Engineering
    • Finance
    • HR
    • IT
    • Legal
    • Marketing
    • Operations
    • Sales

Adding the Office Dropdown​

  1. Drag another Dropdown onto the layout.
  2. Rename it to Office Dropdown.
  3. Change the label to Office
  4. Manually enter the following options:
    • Austin
    • Berlin
    • Edinburgh
    • London
    • New York
    • San Francisco
    • Seattle
    • Tokyo

Adding the Search Field​

  1. Drag an Input Field onto the layout.
  2. Rename it to Search.
  3. Change the label to Search

Step 6: Creating Workflows for Filtering​

Department Dropdown Filter​

  1. Right-click the Department Dropdown and select Edit Actions.
  2. Click New Workflow and name it Department Dropdown.
  3. Set the trigger to Menu Pick.
  4. In the Actions Panel, drag out Filter Dataview.
  5. Configure the action:
    • Dataview: Employee List View
    • Filter Name: Department
    • Value: Fetch the text value of widget → Select Department Dropdown
  6. Add another action: Refresh Dataview.
  7. Click Save Workflow.
  8. Click Close Workflow Editor to return to your layout.

Office Dropdown Filter​

  1. Right-click the Office Dropdown and select Edit Actions.
  2. Create a New Workflow named Office Dropdown.
  3. Set the trigger to Menu Pick.
  4. Drag out Filter Dataview. and configure:
    • Dataview: Employee List View
    • Filter Name: Office
    • Value: Fetch the text value of widget → Select Office Dropdown
  5. Add Refresh Dataview action.
  6. Click Save Workflow.
  7. Click Close Workflow Editor to return to your layout.

Search Field Filter​

  1. Right-click the Search field and select Edit Actions.
  2. Create a New Workflow named Search Employees.
  3. Set the trigger to Text Change.
  4. Drag out Filter Dataview and configure:
    • Dataview: Employee List View
    • Filter Name: Search
    • Value: Fetch the text value of widget → Select Search
  5. Add Refresh Dataview action.
  6. Click Save Workflow.
  7. Click Close Workflow Editor to return to your layout.

Step 7: Adding Sorting and Reset Functionality​

Sorting the List​

  1. Drag a Button onto the layout.
  2. Resize it to 40x40 px.
  3. Uncheck Show Label.
  4. Enable Show Icon and select a Sort icon.
  5. Right-click the button and select Edit Actions.
  6. Set the trigger to Click.
  7. Create a New Workflow named Sort List.
  8. Drag out Sort Dataview and configure:
    • Dataview: Employee List View
    • Sort Name: Sort Name
    • Order: Ascending
  9. Add Refresh Dataview action.
  10. Click Save Workflow.
  11. Click Close Workflow Editor to return to your layout.

Resetting the Filters​

  1. Drag another Button onto the layout.
  2. Resize it to 40x40 px.
  3. Uncheck Show Label.
  4. Enable Show Icon and select a Refresh icon.
  5. Right-click the button and select Edit Actions.
  6. Set the trigger to Click.
  7. Create a New Workflow named Reset Dataview.
  8. Drag out Reset Dataview and choose Employee List View.
  9. Add Refresh Dataview action.
  10. Click Save Workflow.
  11. Click Close Workflow Editor to return to your layout.

Step 8: Testing Your Filters​

  1. Switch to Run Mode.
  2. Select a Department from the dropdown.
  3. The list should filter to show only employees in that department.
  4. Select an Office—the list should refine further.
  5. Type in the Search Field—the list should filter by name or job title.
  6. Click Sort List—the list should reorder alphabetically.
  7. Click Reset Dataview—all filters should clear.

Conclusion​

You have successfully created a Dataview, bound it to a Simple List, and added filtering, sorting, and reset functionality.

For further learning:

Thank you for your feedback!

Was this page helpful?