Support

Support

  • Olympe Website

›Getting Started

Olympe support overview

  • Olympe Support
  • Olympe Training Plan

DRAW

    Getting Started

    • Introduction
    • Content Organization
    • User Interface - Main concepts
    • User Interface - Functions
    • User Interface - Custom Visual Components
    • User Interface - Interactions
    • User Interface - Navigation
    • Data - Data Models
    • Data - Data Sets
    • Logic - Functions vs Actions
    • Create and modify data
    • Query Data
    • Transition with data
    • Generate Rest API connectors from OpenAPI files
    • Themes
    • Project dependencies
    • Export & Import

    Tutorials

    • Simple App Example
    • Expense App Tutorial

CODE

  • CODE API
  • Tutorials

    • Bootstrap a CODE development environment
    • Initialize the versioning system
    • Extend DRAW with custom logic bricks made with CODE
    • Extend DRAW with custom visual bricks made with CODE
    • Retrieve data from Olympe datacloud, transform it and display it in a custom Visual Component
    • Modifying the data on the data cloud
    • Visualizing participants interaction with a graph

    Further reading

    • A Beginner's Guide to Dataflows

Platform

  • VM Supported Hosts

Release notes

  • DRAW
  • CODE
  • Orchestrator

Demos

  • Charts Example
  • Workflows Management

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
  • ...

See continuous queries module documentation page for more details.

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

Clicking on “Edit” button opens the row in the UI Editor list_edit_renderer_btn

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).

These 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 13 – 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_13_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_13_result

Exercise 14 – Display list of notes

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

  1. Go to Screen “Home”
  2. Add a Text Field named “Filter field”
    • X = Center
    • Placeholder = “Summary filter”
  3. Add a List element named “Notes list”
    • X = Center, Width=90%
    • Data = A function which calls “Filter notes” function, providing ”Filter field” text property as input
  4. Click Edit button on “Notes list” to edit its item renderer
  5. In the item renderer, add a label
    • X = Left, Y = Middle
    • Width = 100%
    • Text = A function which displays the summary of the note of the current line

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

← Create and modify dataTransition with data →
  • Introduction
  • List Visual Component
    • Introduction
    • Selecting data
    • Specify row content
    • Formatting data display
    • Example
  • Exercise 13 – Notes filtering function
  • Exercise 14 – Display list of notes
Olympe Website
Copyright © 2021 Olympe