Skip to main content
Version: Next

Query Data

Introduction​

Data can be accessed through Functions.

  1. Get a list of objects of a specific model
  2. Apply a filter to the list of objects. This filter is usually applied server side (to avoid fetching all data). query_data_function

There are other actions to query and explore data:

  • Get Object
  • Get Object Property
  • Sort Object List
  • ...

List Visual Component​

Introduction​

List is a Visual Component which displays list of objects (e.g. coming from the data base).

list_overview

List rows content can be fully customized:

list_renderer_custom

When they are too many items to fit in the list, it becomes scrollable:

list_scroll

Selecting data​

Data property specifies the objects to be displayed. It can be defined using a function…

list_data

… which will return the list of objects:

list_data_function

Specify row content​

The content of a row can be edited just as any custom UI Component. It is called an Item Renderer.

list_edit_renderer

Formatting data display​

Item Renderer provides information about the object of the current object to be displayed in the row (the object itself and its rank).

This information can be used in functions (e.g. to display a property of the object in a label)

list_format_display

Example​

Property data is set by a function which gets all the Notes:

list_data_function

The Item Renderer (row content) can be edited using Edit button:

list_edit_renderer_btn

The Item Renderer provides a reference to the object to be displayed in the row:

example_4

The list displays summary of all Notes available in database:

example_5

Exercise 12 – Notes filtering function​

The goal of this exercise is to create a function which returns a list of notes whose summary contains a given text.

exercise_12_signature

  1. Go to Project “Notes”.
  2. Open Folder “Logic”.
  3. Create a new Function named “Filter notes”.
  4. Open the new Function and complete is as follow:

exercise_12_result

Exercise 13 – Display list of notes​

The goal of this exercise is to update the home scren to list all notes.

exercise_13_result

  1. Go to Screen “Home”.
  2. Add a Text Field named “Filter field”.
    • X = Center
    • Placeholder text = “Summary filter”
  3. Add a List element named “Notes list”.
  4. Click Edit button on “Notes list” to edit its item renderer
  5. In the item renderer, add a label:

For step 5, you’ll need to create a function which gets the Current Item property of the Item Renderer and plug it to the Note’s Attributes function that you’ve designed earlier. To retrieve the Current Item property, you can drag'n'drop the Item Renderer from the UI Property picker panel (left side of function editor).