Auri

Last updated: 10/25/2020

What is it for?

AURI is a tool with which you can create a native application for Android and iOS connected to your existing database or API in a few minutes.

WITH AURI:

  • You do not deal with licenses, development tools and other specifics of Android and iOS ecosystems.
  • You don't have to learn Java or Objective-C, you define the application using an intuitive configuration language.
  • You have instantly solved monitoring, alerting and statistics.
  • You are not waiting for any certifications or lengthy build packages. Editing and updating the application will take you seconds, not days.
  • The created applications belong to you. You have an application server running locally on your network, and a mobile application may have your company logo and name.
  • You create applications that automatically work on the display of a phone, tablet or TV screen in the production hall.
  • You have a barcode reader at your disposal, which surpasses specialized hardware for tens of thousands of crowns in accuracy and robustness.

Take a look at how simple it is:

Getting started

First run

All you need to try AURI is a PC with the Windows / MacOS / Linux operating system. You can try the application on an Android mobile phone, and both devices must be on the same local network.

  1. Copy the AURI application server to any directory and start it. A web interface for developing your application will open in your browser.
  2. If you want to use a mobile phone for development, install the AURI mobile application . Then click on the "+" button and scan the QR code, which is available in the web interface (after clicking on the button with the mobile phone icon).

That is all! You can now edit the application settings and test the changes immediately in the mobile application.

Useful tips:

  • The configuration of your application is generated in a file config.yamlin the application directory the first time it is run . This file saves the changes you make in the web interface, but you can also edit it directly in your favorite text editor.
  • By default, the mobile phone communicates with the application on port 3001. If you have connection problems, make sure that this port is available for your phone.
  • To load a configuration from a file other than config.yaml, pass the file name as a parameter on the command line (for example ./auri-server moje-aplikace.yaml).
  • Pay attention to the console messages of the application server - it will alert you to configuration errors and other problems.
  • Whenever you save changes to a configuration file, the application server automatically loads them. If the configuration contains an error, you do not need to restart the server - simply save the corrected version of the configuration and the application server will load it.

Screens and components

Your application consists of a list of named screens (eg login screen, order list, item detail) and each screen consists of a list of components (eg label, button, text box).

Example of a simple application with three screens:

start: HlavniMenu
screens:
  HlavniMenu:
    title: Hlavní nabídka
    components:
      - label:
          value: "Vyber agendu:"
      - button:
          value: Výdej zboží
          onClick:
            - goToScreen: Vydej
      - button:
          value: Příjem zboží
          onClick:
            - goToScreen: Prijem
  Prijem:
    title: Příjem zboží
    components:
      - button:
          value: Zpět
          onClick:
            - goToScreen: HlavniMenu
  Vydej:
    title: Výdej zboží
    components:
      - button:
          value: Zpět
          onClick:
            - goToScreen: HlavniMenu

Variables and backend queries

In order for the application to communicate with your database, HTTP API, or backend in general , you must backendsspecify the type and parameters for the connection in the section . For example, for a MySQL database, enter:

backends:
  - MySQL:
      host: localhost
      port: 3306
      database: sklad
      user: exampleUsername
      password: examplePassword
                                    

For a list of supported backends and instructions for setting up each, see the Backends section .

Once you have the backend set up:

  • You can use backend data in components. Use the property queryin the screen configuration, or in a onClickhandler , for example . The value of each attribute returned will be automatically stored in a variable of the same name , which you can use almost anywhere in the component definition:
  • You can use user-selected values ​​in the component in backend queries. Use a property, queryfor example, in a onClickhandler.

Components

The current version of AURI supports components:

label

A label displayed on a standalone row. You can use variables.

If you need to only use the value property, you can describe this component in a simplified manner as label: <value>.

Příklady

Shortform syntax
- label: Jméno
Customizing appearance
- label:
    value: Jméno
    textColor: white
    backgroundColor: red
    size: large
Using variables
- label: Logged in as $firstName $lastName
Hiding the label based on variable
- label:
    value: Name $firstName $lastName
    visible: $querySucceeded
More complex example
- label:
    value: Jméno $firstName $lastName
    visible: $querySucceeded
    textColor: white
    backgroundColor: green
    size: large

Vlastnosti

value text

The text displayed to the user.

Například: value: Hello world value: 123 value: $name value: Hello $name 

backgroundColor
volitelně
color

Sets the background color of the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: backgroundColor: "#fff" backgroundColor: green backgroundColor: "#ff3020" 

size
volitelně
size

Tweaks the size of the component. Default size is medium.

Například: size: small size: medium size: large 

textColor
volitelně
color

Sets the color of the text in the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: textColor: "#fff" textColor: green textColor: "#ff3020" 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

button

A clickable button. The button label is set via the value property and the commands executed upon click go to the onClick property.

Příklady

A simple navigation button
- button:
    value: OK
    onClick:
      - goToScreen: HomeScreen
Updating variables using a backend query before showing the next page
- button:
    value: Warehouse Brno
    onClick:
      - goToScreen: ProductDetail
      - query: select id, price, name, code from products where id=123
Using variable inside the button title
- button:
    value: "Random number: $number"
    onClick:
      - query: select RAND() as number
Appearance customization
- button:
    value: OK
    backgroundColor: green
    size: small
    textColor: white
A "submit" button is automatically disabled unless all inputs on the screen pass validation
- button:
    value: Uložit
    type: submit
An icon-only button
- button:
    icon: check-circle
    onClick:
      - goToScreen: ProductDetail
A button with an icon and title
- button:
    value: Potvrdit
    icon: check-circle
    onClick:
      - goToScreen: ProductDetail
A more complex example
- button:
    value: Warehouse Brno
    backgroundColor: green
    size: small
    textColor: white
    type: submit
    visible: $querySucceeded
    onClick:
      - goToScreen: ProductDetail
      - query: select id, price, name, code from products where id=123

Vlastnosti

backgroundColor
volitelně
color

Sets the background color of the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: backgroundColor: "#fff" backgroundColor: green backgroundColor: "#ff3020" 

enabled
volitelně
true/false

Setting to false makes the button unclickable. You can use variable.

Například: enabled: true enabled: false enabled: $canSelect 

icon
volitelně
icon name

Icon name, can contain variables. The following icons are supported.

Například: icon: computer icon: home icon: $icon 

onClick
volitelně
list of commands

Specifies what is to be done after button press.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onClick:
  - goToScreen: Home
onClick:
  - goToScreen: Home
  - set loggedIn: false
onClick:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onClick:
  - set foundProductId: $id
  - set success: true
onClick:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

size
volitelně
size

Tweaks the size of the component. Default size is medium.

Například: size: small size: medium size: large 

textColor
volitelně
color

Sets the color of the text in the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: textColor: "#fff" textColor: green textColor: "#ff3020" 

type
volitelně
button type

Assings a specific role to this button, which affects it's behavior.

Possible values are:

  • regular: No special behavior (default type).
  • submit: This button will be clickable only if all other component on the screen passed validation.

Například: type: regular type: submit 

value
volitelně
text

Button label.

Například: value: Hello world value: 123 value: $name value: Hello $name 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

selectbox

Good for allowing user to select an optino from a small list of options.

If there's a lot of options and you'd like the user to be able to search by keyword, use autocomplete instead.

The options can be specified either via a static listing (the items property) or dynamicaly from backend using the query property.

When using query, each row returned from the backend should have the id and title properties. id is the primary identifier of the item which will be stored to the variable on selection and title is the label shown to the user. If the properties in the backend result are named differently, you can customize how the id and title of each item are determined, using the itemId and itemTitle properties.

Příklady

Choosing from a static list of values with preselected value
- selectbox:
    name: gender
    items:
      - M: male
      - F: female
      - "-": it's complicated
    default: M
Selecting from a list of items from backend
- selectbox:
    name: warehouseId
    query: select wid, name from warehouses where country=$currentCountry
    itemId: $wid
    itemTitle: $name
    onSelect:
      - goToScreen: WarehouseDetail
Appearance customization
- selectbox:
    backgroundColor: green
    textColor: white
    items:
      - "1": cat
      - "2": dog
A more complex example
- selectbox:
    name: warehouseId
    placeholder: Select value
    backgroundColor: green
    textColor: white
    required: true
    visible: $querySucceeded
    enabled: $areInputsFilledOut
    query: select wid, name from warehouses where country=$currentCountry
    itemId: $wid
    itemTitle: $name
    default: $defaultItem
    onSelect:
      - goToScreen: WarehouseDetail

Vlastnosti

backgroundColor
volitelně
color

Sets the background color of the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: backgroundColor: "#fff" backgroundColor: green backgroundColor: "#ff3020" 

default
volitelně
text

id of item, which should be selected by default if no item is specified in the associated variable (see name). You can use variables.

Například: default: 53 default: ID-1568 default: $preSelectedItem 

enabled
volitelně
true/false

Setting to false disables interaction with the component. You can use variables.

Například: enabled: true enabled: false enabled: $canSelect 

itemId
volitelně
text

Can be used to specify custom expression for getting the id (primary identifier) for each item in the list.

Například: itemId: $key itemId: product-$id 

items
volitelně
item

The list of options the user can pick from.

Can be entered in two ways:

  • As a plain list of items. The selected item will be stored to the associated variable (according to the name of the component).
  • As a list of key: value tuples. The key is the item identifier that will be stored to variable while the value is shown to the user.

Například:

items:
  - apples
  - oranges
  - plums
  - pears
items:
  - M: Male
  - F: Female
  - "-": Other

itemTitle
volitelně
text

Can be used to specify custom expression for getting the title (user-facing description) for each item in the list

Například: itemTitle: $firstName $lastName itemTitle: $amount USD 

name
volitelně
identifier

The name of variable associated with this select box. The variable will always contain the id of currently selected item. (For example: if I name the component selectedItem, then the $selectedItem variable will contain the id of currently selected item

The name can only contain lower case and upper case letters without accents and underscore (_).

Například: name: selectedProduct name: current_item 

onSelect
volitelně
list of commands

Specifies what is to be done after item selection.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onSelect:
  - goToScreen: Home
onSelect:
  - goToScreen: Home
  - set loggedIn: false
onSelect:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onSelect:
  - set foundProductId: $id
  - set success: true
onSelect:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

placeholder
volitelně
text or number

Hint shown inside the component, when no value is entered/selected.

Například: placeholder: Username placeholder: Amount placeholder: $placeholderText 

query
volitelně
backend query

Specifies the backend query used to get the list of options the user can pick from.

Each row returned from the backend should have the id and title properties. id is the primary identifier of the item which will be stored to the variable on selection and title is the label shown to the user. If the properties in the backend result are named differently, you can customize how the id and title of each item are determined, using the itemId and itemTitle properties.

Například: query: SELECT name, surname FROM customers query: /customers 

query:
  method: GET
  path: /api/v1/products
  headers:
    x-client-id: auri
    device-id: $$deviceId

required
volitelně
true/false

Set to true if this component should be mandatory to fill in before user uses a submit button.

Například: required: true required: false required: $variable 

textColor
volitelně
color

Sets the color of the text in the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: textColor: "#fff" textColor: green textColor: "#ff3020" 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

input

An input box where user can enter a value from keyboard. It can be a text, number, date etc. Also supports entering the value via barcode scanner and custom validation.

Příklady

Simple usage
- input:
    name: comment
    placeholder: Comment
Whole number from 1 to 100 with 50 as default
- input:
    name: count
    type: number
    default: 50
    min: 0
    max: 99
    decimals: 0
Validating with regular expression
- input:
    withScanner: true
    name: code
    regExp: PRODUCT-[0-9]+
Customizing appearance
- input:
    backgroundColor: white
    textColor: black
With skener
- input:
    withScanner: true
    placeholder: scan the code
A more complex example
- input:
    name: count
    placeholder: Number of items
    type: number
    default: 50
    min: 0
    max: 100
    required: true
    visible: $querySucceeded
    enabled: $canSelect
    backgroundColor: white
    textColor: black

Vlastnosti

backgroundColor
volitelně
color

Sets the background color of the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: backgroundColor: "#fff" backgroundColor: green backgroundColor: "#ff3020" 

decimals
volitelně
number

For type: number it specifies the number of decimal places (0=integers). Numbers with more decimal spaces are automaticky rounded.

Například: decimals: 0 decimals: 2 decimals: $selectedPrecision 

default
volitelně
text

Default value, used if the associated variable (see name) has no content. Can contain variables.

Například: default: 1 default: John default: $defaultName 

enabled
volitelně
true/false

Setting to false disables interaction with the component. You can use variables.

Například: enabled: true enabled: false enabled: $canSelect 

max
volitelně
number

For type: number it specifies the highest allowed number (inclusive); for type: text it specifies the maximum length of the text entered.

Například: max: 100 max: 1.5 max: $maxValue 

min
volitelně
number

For type: number it specifies the lowest allowed number (inclusive); for type: text it specifies the minimum length of the text entered.

Například: min: -100 min: 0 min: 0.5 min: $minValue 

multiline
volitelně
true/false

Setting to true allows user to enter a multiline text. You can use variables.

Například: multiline: true multiline: false multiline: $canBeMultiline 

name
volitelně
identifier

The name of variable associated with this text input. (For example: if I name the component id, then the input will always display the content of the $id and editing the input will update the variable).

The name can only contain lower case and upper case letters without accents and underscore (_).

Například: name: product_id name: selected_item name: UserName 

onChange
volitelně
list of commands

Specifies what is to be done after change of the text in the input box.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onChange:
  - goToScreen: Home
onChange:
  - goToScreen: Home
  - set loggedIn: false
onChange:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onChange:
  - set foundProductId: $id
  - set success: true
onChange:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

placeholder
volitelně
text or number

Hint shown inside the component, when no value is entered/selected.

Například: placeholder: Username placeholder: Amount placeholder: $placeholderText 

regExp
volitelně
text

A regular expression that the entered value must match in order to be considered valid.

Například: regExp: "[0-9]{3}-[0-9]{5}" regExp: \s+ 

required
volitelně
true/false

Set to true if this component should be mandatory to fill in before user uses a submit button.

Například: required: true required: false required: $variable 

textColor
volitelně
color

Sets the color of the text in the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: textColor: "#fff" textColor: green textColor: "#ff3020" 

type
volitelně
input type

With this property you can specify what kind of input the user can enter. Default is text.

The options are:

  • text (default): any text (you can use regExp to narrow the allowed values using a regular expression)
    • password: like text but displays placeholder characters instead of the entered value - useful when inputting sensitive information
  • number: numeric values only (you can use min, max and decimals to further narrow down what kind of numbers can be entered)

Například: type: text type: number type: password 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

withScanner
volitelně
true/false

Set to true if user should be able to scan the value from a barcode or QR code with the camera.

If scanning a barcode is the main input method, consider using the scan component instead.

Například: withScanner: true withScanner: false withScanner: $variable 

autocomplete

Component useful for selecting a value from a large amount of options. Allows searching by typing in the input box.

Příklady

Simple example with static data
- autocomplete:
    name: kg
    items:
      - 10 kg
      - 20 kg
      - 30 kg
Simple example with data from backend (as long as query contains id and title columns, you don't need to specify itemId a itemTitle properties)
- autocomplete:
    query: SELECT id, title FROM products
Choice from a list of values from backend with option to scan the id from a barcode
- autocomplete:
    name: warehouseId
    withScanner: true
    query: select wid, name from warehouses where country=$currentCountry
    itemId: $wid
    itemTitle: $name
    onSelect:
      - goToScreen: WarehouseDetail
Appearance customization
- autocomplete:
    backgroundColor: white
    textColor: black
    query: select wid, name from warehouses where country=$currentCountry
    itemId: $wid
    itemTitle: $name
A more complex example
- autocomplete:
    name: warehouseId
    withScanner: true
    query: select wid, name from warehouses where country=$currentCountry
    itemId: $wid
    itemTitle: $name
    onSelect:
      - goToScreen: WarehouseDetail
    backgroundColor: white
    textColor: black
    placeholder: Select value
    visible: $querySucceeded
    enabled: $areFieldsFilledOut

Vlastnosti

backgroundColor
volitelně
color

Sets the background color of the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: backgroundColor: "#fff" backgroundColor: green backgroundColor: "#ff3020" 

default
volitelně
text

id of item, which should be selected by default if no item is specified in the associated variable (see name). You can use variables.

Například: default: 53 default: ID-1568 default: $preSelectedItem 

enabled
volitelně
true/false

Setting to false disables interaction with the component. You can use variables.

Například: enabled: true enabled: false enabled: $canSelect 

itemId
volitelně
text

Can be used to specify custom expression for getting the id (primary identifier) for each item in the list.

Například: itemId: $key itemId: product-$id 

items
volitelně
item

The list of options the user can pick from.

Can be entered in two ways:

  • As a plain list of items. The selected item will be stored to the associated variable (according to the name of the component).
  • As a list of key: value tuples. The key is the item identifier that will be stored to variable while the value is shown to the user.

Například:

items:
  - apples
  - oranges
  - plums
  - pears
items:
  - M: Male
  - F: Female
  - "-": Other

itemTitle
volitelně
text

Can be used to specify custom expression for getting the title (user-facing description) for each item in the list

Například: itemTitle: $firstName $lastName itemTitle: $amount USD 

name
volitelně
identifier

The name of variable associated with this select box. The variable will always contain the id of currently selected item. (For example: if I name the component selectedItem, then the $selectedItem variable will contain the id of currently selected item

The name can only contain lower case and upper case letters without accents and underscore (_).

Například: name: selectedProduct name: current_item 

onSelect
volitelně
list of commands

Specifies what is to be done after item selection.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onSelect:
  - goToScreen: Home
onSelect:
  - goToScreen: Home
  - set loggedIn: false
onSelect:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onSelect:
  - set foundProductId: $id
  - set success: true
onSelect:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

placeholder
volitelně
text or number

Hint shown inside the component, when no value is entered/selected.

Například: placeholder: Username placeholder: Amount placeholder: $placeholderText 

query
volitelně
backend query

Specifies the backend query used to get the list of options the user can pick from.

Each row returned from the backend should have the id and title properties. id is the primary identifier of the item which will be stored to the variable on selection and title is the label shown to the user. If the properties in the backend result are named differently, you can customize how the id and title of each item are determined, using the itemId and itemTitle properties.

Například: query: SELECT name, surname FROM customers query: /customers 

query:
  method: GET
  path: /api/v1/products
  headers:
    x-client-id: auri
    device-id: $$deviceId

required
volitelně
true/false

Set to true if this component should be mandatory to fill in before user uses a submit button.

Například: required: true required: false required: $variable 

textColor
volitelně
color

Sets the color of the text in the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: textColor: "#fff" textColor: green textColor: "#ff3020" 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

withScanner
volitelně
true/false

Set to true if user should be able to scan the value from a barcode or QR code with the camera.

If scanning a barcode is the main input method, consider using the scan component instead.

Například: withScanner: true withScanner: false withScanner: $variable 

separator

A horizontal separator line.

If you need to only use the value property, you can describe this component in a simplified manner as separator: <value>.

Příklady

Simple separator
- ? separator
A separator with title
- separator: Section $sectionName
Conditionally visible separator
- separator:
    value: Section $sectionName
    visible: $querySucceeded

Vlastnosti

value
volitelně
text

A label displayed in the middle of the separator.

Například: value: Hello world value: 123 value: $name value: Hello $name 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

scan

A button that triggers a barcode scanner and stores the data into variable.

Příklady

Basic usage
- scan:
    name: productCode
Go to next screen on successful scan
- scan:
    name: scannedValue
    onScan:
      - goToScreen: ItemDetail
Importing variables from a barcode containing JSON
- scan:
    onScan:
      - importVariablesFromScanResult
Appearance customization
- scan:
    backgroundColor: white
    textColor: black
A more complex example
- scan:
    backgroundColor: white
    textColor: black
    visible: $querySucceeded
    enabled: $formIsFilledOut
    required: true
    onScan:
      - importVariablesFromScanResult

Vlastnosti

backgroundColor
volitelně
color

Sets the background color of the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: backgroundColor: "#fff" backgroundColor: green backgroundColor: "#ff3020" 

default
volitelně
text

Default value, used if the associated variable (see name) has no content. Can contain variables.

Například: default: 1 default: John default: $defaultName 

enabled
volitelně
true/false

Setting to false prevents the user from scanning a new code.

Například: enabled: true enabled: false enabled: $canSelect 

name
volitelně
identifier

The name of variable bound to this component. (For example: if I name the component id, the $id variable will always contain the value entered in the component).

The name can only contain lower case and upper case letters without accents and underscore (_).

Například: name: product_id name: selected_item name: UserName 

onScan
volitelně
list of commands

Specifies what is to be done after scanning of barcode.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onScan:
  - goToScreen: Home
onScan:
  - goToScreen: Home
  - set loggedIn: false
onScan:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onScan:
  - set foundProductId: $id
  - set success: true
onScan:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

regExp
volitelně
text

A regular expression that the entered value must match in order to be considered valid.

Například: regExp: "[0-9]{3}-[0-9]{5}" regExp: \s+ 

required
volitelně
true/false

Set to true if this component should be mandatory to fill in before user uses a submit button.

Například: required: true required: false required: $variable 

textColor
volitelně
color

Sets the color of the text in the component.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: textColor: "#fff" textColor: green textColor: "#ff3020" 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

checkbox

A checkbox.

If you need to only use the label property, you can describe this component in a simplified manner as checkbox: <label>.

Příklady

Simple example
- checkbox:
    name: dontAskAgain
    label: Don't ask again
Reacting when checkbox was checked/unchecked
- checkbox:
    name: acceptTerms
    label: I accept the terms and conditions
    onChange:
      - switch $acceptTerms:
          when false:
            - notification: Cannot continue without accepting the terms

Vlastnosti

label text

Checkbox label (displayed next to the checkbox). Can contain variables.

Například: label: Hello world label: 123 label: $name label: Hello $name 

default
volitelně
text

Default value, used if the associated variable (see name) has no content. Can contain variables.

Například: default: 1 default: John default: $defaultName 

enabled
volitelně
true/false

Setting to false disables interaction with the component. You can use variables.

Například: enabled: true enabled: false enabled: $canSelect 

name
volitelně
identifier

The name of the variable associated with this checkbox. The variable that will be set to true or false based on the checked state of the checkbox. (For example if I name the component checked, then the $checked variable will contain true/false based on the checkbox state)When reading the variable content, false or empty variables are interpreted as unchecked checkbox and anything else as checked.

The name can only contain lower case and upper case letters without accents and underscore (_).

Například: name: agreeToTerms name: subscribeToNewsletter 

onChange
volitelně
list of commands

Specifies what is to be done after the checking/unchecking of the checkbox.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onChange:
  - goToScreen: Home
onChange:
  - goToScreen: Home
  - set loggedIn: false
onChange:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onChange:
  - set foundProductId: $id
  - set success: true
onChange:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

required
volitelně
true/false

Set to true if this component should be mandatory to fill in before user uses a submit button.

Například: required: true required: false required: $variable 

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

item

WARNING: This is an early version of a component, which is under development. The behavior and configuration of this component may change in future versions!

A flexible component for displaying a data item with various details.

Příklady

Simple example
- item:
    title: John Doe
    icon: person
Clickable item
- item:
    title: John Doe
    onClick:
      - goToScreen: PersonDetail
Item with an additional detail
- item:
    title: John Doe
    details:
      - Věk:
          value: 32 let
          size: small
Collapsible item with number of additional information
- item:
    title: Microwave oven
    details:
      - Cena: 3000 Kč
      - Skladem: 56
      - Záruka: 2 roky
Item with status icon
- item:
    title: Brno branch
    details:
      - Otevřeno:
          value: $openingHours
          icon: lens
          iconColor: $isOpenColor

Vlastnosti

actions
volitelně
action

List of actions available for this item and shown as buttons to the user. Not fully supported yet!.

Například:

actions:
  - $name
  - value: $name
    size: large

details
volitelně
item attributes

A list of item attributes that should be displayed less prominently than the title.

Například:

details:
  - $name
  - value: $name
    size: large

enabled
volitelně
true/false

Setting to false disables interaction with the component. You can use variables.

Například: enabled: true enabled: false enabled: $canSelect 

icon
volitelně
icon name

Icon name, can contain variables. The following icons are supported.

Například: icon: computer icon: home icon: $icon 

iconColor
volitelně
color

Icon color.

Hex code (RGB) or name of the color. All CSS3 color names are allowed.

**Warning: ** when entering color as hex code (for example #ff0040) make sure you wrap the code in quotes. Otherwise it may be interpreted as a YAML comment and thus ignored!

Například: iconColor: "#fff" iconColor: green iconColor: "#ff3020" 

onClick
volitelně
list of commands

Specifies what is to be done after item click.

You can enter a list of commands that will be executed one after the other.

Each command in sequence awaits the completion of the previous one. If one of the commands in sequence fails the remaining ones are not executed.

When a command modifies variables, the following commands in sequence do have access to the updated variables.

Například:

onClick:
  - goToScreen: Home
onClick:
  - goToScreen: Home
  - set loggedIn: false
onClick:
  - query: SELECT * FROM products WHERE product.id = $selectedProduct
onClick:
  - set foundProductId: $id
  - set success: true
onClick:
  - switch $role:
      when guest:
        - goToScreen: GuestMenu
      when user:
        - goToScreen: UserMenu
      when admin:
        - goToScreen: AdminMenu

title
volitelně
text

Main title of the item.

Například:

visible
volitelně
true/false

Setting to false will hide the component from the screen. You can use variables.

Například: visible: true visible: false visible: $showAdvancedOptions 

repeat

A special component that renders a set of other components repeatedly for each result of a query to backend.

The variables derived from the backend query result are usable only inside the repeat component and nowhere else. But if an action such as button press is triggered inside the repeat component, the variables for the given row are automatically promoted to the global scope and can be used on the following screens.

Příklady

Basic usage
- repeat:
    query: select productName from products
    components:
      - label: $productName
    placeholder: The list of products is empty!
Dynamic menu
- repeat:
    query: select actionId, actionName from availableActions
    components:
      - button:
          value: $actionName
          onClick:
            - goToScreen: ActionResultScreen
            - query: select * from actionResults where actionId=$actionId
Grouping items into categories
- repeat:
    query: select productName from products order by productCategory
    groupBy: $productCategory
    components:
      - label: $productName
Placeholder components when query returns no results
- repeat:
    query: select actionId, actionName from availableActions
    components:
      - button:
          value: $actionName
          onClick:
            - goToScreen: ActionResultScreen
            - query: select * from actionResults where actionId=$actionId
    placeholder:
      - label: Oops! There are no actions available
      - button:
          value: Contact helpdesk
          onClick:
            - goToScreen: ContanctHelpDesk

Vlastnosti

components list of components

List of components to be rendered for each row of the query result. The components can use variables from the query result.

For each row of the repeated components, both the global variables and the row-specific ones are available - the row-specific ones take precedent before the global ones in case of conflict.

Například:

components:
  - label: $itemTitle
  - input:
      name: currentCount
      allow:
        number: true

query backend query

Dotaz na backend. Každý záznam ve výsledku dotazu způsobí jedno vykreslení všech komponent definovaných ve vlastnosti components.

Například: query: SELECT name, surname FROM customers query: /customers 

query:
  method: GET
  path: /api/v1/products
  headers:
    x-client-id: auri
    device-id: $$deviceId

groupBy
volitelně
text

You can specify an expression which will be used to group the results into annotated groups. You can use variables.

Například:

placeholder
volitelně
text or list of components

Placeholder content shown if the backend query produces no results. You can use text or a list of components

Například: placeholder: The basket is empty. 

placeholder:
  - label: Basket is empty
    button:
      value: Add new item
      onClick:
        - goToScreen: AddItem

Backends

The current version of AURI supports the following types of backends:

HTTP

This type of backend will let your application talk to an external HTTP or HTTPS API and map the response to variables.

It allows you to use queries on screens, such as. /items/$itemId/name to send or receive data from HTTP API.

The HTTP response body is expected to be a JSON object, the keys of which are mapped to variable names. For example when the API returns response body:

{
   "productId": 15
   "props": {
     "code": "xyz",
     "count": 5
   } 
}

The values from body will be stored in variables productId, props.code a props.count. You are then free to use them in components, for example like this:

components:
  - label: "Product code: $props.code"

Vlastnosti

name
volitelně
identifier

If you're using mutliple backends in your application, assigning name to each of them will let you chose which backend to use for each query.

Například: name: productsApi name: Users_DB 

baseUrl URL

The base URL of the backend, shared by all requests to the backend.

If you set it for example to https://api.example.com, it means that when you specify query: /customers/1 in a component, a request will be sent to https://api.example.com/customers/1.

Například: baseUrl: https://github.api.com baseUrl: http://api.example.com 

Příklady

- HTTP:
    baseUrl: http://api.example.com

SQLAnywhere

This backend enables sending SQL queries directly to a SAP SQL Anywhere database and map query result to variables. Tested against SAP SQL Anywhere v16.

When mapping the results of a query to variables, typically only the first returned row is taken into account (with the exception of multi-row components such as repeat). Variable names are derived from column names. So for example the query SELECT id, name FROM products will cause the variables id and name to be assigned values from the first row return by the query.

Vlastnosti

host text

IP address or hostname of the database server.

Například: host: localhost host: 192.168.0.103 host: db.example.com 

port number

The port number at which the database server is accepting connections.

Například: port: 3306 

database
volitelně
text

Database name. If not specified, the default database on the server server will be used.

Například: database: products database: customers 

user text

Username for connecting to the database

password text

Password for connecting to the database

server text

Database server name.

Například: server: main server: orders_server 

Příklady

- SQLAnywhere:
    host: localhost
    server: main
    database: mydb
    port: 2638
    user: auri
    password: oanc34k

SQLite

This backend allows you to send queries directly to a local SQLite database and map query result to variables.

Vlastnosti

database text

Database name.

Například: database: products database: customers 

Příklady

MSSQL

Tento backend umožňuje posílat SQL dotazy na Microsoft SQL Server a mapovat jejich výsledky na proměnné. Testováno proti Microsoft SQL Server 2017.

When mapping the results of a query to variables, typically only the first returned row is taken into account (with the exception of multi-row components such as repeat). Variable names are derived from column names. So for example the query SELECT id, name FROM products will cause the variables id and name to be assigned values from the first row return by the query.

Vlastnosti

host text

IP address or hostname of the database server.

Například: host: localhost host: 192.168.0.103 host: db.example.com 

port number

The port number at which the database server is accepting connections.

Například: port: 3306 

database text

Database name.

Například: database: products database: customers 

user text

Username for connecting to the database

password text

Password for connecting to the database

Příklady

- MSSQL:
    type: MSSQL
    host: localhost
    database: mydb
    port: 1433
    user: auri
    password: oanc34k

MySQL

Tento backend umožňuje posílat SQL dotazy na MySQL Server a mapovat jejich výsledky na proměnné. Testováno proti MySQL Community Server 5.7.29.

When mapping the results of a query to variables, typically only the first returned row is taken into account (with the exception of multi-row components such as repeat). Variable names are derived from column names. So for example the query SELECT id, name FROM products will cause the variables id and name to be assigned values from the first row return by the query.

Vlastnosti

host text

IP address or hostname of the database server.

Například: host: localhost host: 192.168.0.103 host: db.example.com 

port number

The port number at which the database server is accepting connections.

Například: port: 3306 

database text

Database name.

Například: database: products database: customers 

user text

Username for connecting to the database

password text

Password for connecting to the database

Příklady

- MySQL:
    type: MySQL
    host: localhost
    database: mydb
    port: 3306
    user: auri
    password: oanc34k

Deploy to production

In the Getting Started section, we have shown how easy it is to use AURI to develop and continuously test your application. In this part of the documentation, you will learn what to do when you are satisfied with the behavior of the application and it is time to deploy it to end users.

Start the server in production mode

Before deploying the application, you must enrich your configuration file with some additional information. See the following example:

name: vydej_zbozi
deployment:
  ip: 192.168.1.2
  port: 80
  publicURL: http://vydej.mycompany.cz

homeScreen: Home
screens:
  (...)
  • name is a unique name of the application that identifies it when installed on the phone (for example, the mobile application knows when to update an already installed application and when to install a new one).
  • ip (optional): IP address to which the application server should listen. If you do not fill it in, the application will accept clients on all available network interfaces.
  • port (optional): on which port the application server will listen. The default value is 80.
  • publicURL specifies under which URL the application server will be available to clients. Used to generate the installation QR code. (see Installing in the phone )

After completing the parameters, just copy the program auri-servertogether with your configuration to the machine where you want to run the application server and run it with the parameter -p. So for example:

auri-server.exe -p
Your application runs in production mode, which means:

  • The application server no longer automatically loads configuration changes. auri-serverYou must restart to load the new configuration .
  • Only basic information and error messages are written to standard output, a detailed log can be found in the log file (see Logging ).
  • The application can be registered in the mobile phone using a QR code.

Deploy with Docker

Before deploying the application, you must enrich your configuration file with some additional information. More info in the section above.

Then you have to run these commands:

docker pull goldtomas1/auri:latest
docker run -p 80:80 -v {config_yaml_absolute_path}:/app/config.yaml -v {auri_folder_absolute_path}:/app/.auri goldtomas1/auri:latest -p 
 
  • -p 80:80: You will expose the auri web application on 80 port.
  • {config_yaml_absolute_path}: Absolute path to your Auri configuration "config.yaml" file.
  • {auri_folder_absolute_path}: Absolute path to folder where the logs and Auri configuration will be stored.
  • -p: Parameter of the Auri executable, -p means production run.

If you want to connect to your database or API on localhost from the docker container you have to change the localhost (127.0.0.1) IP address to "host.docker.internal".

Creating a windows service

In order for your application to run as a service in windows, you need to download the "service manager" NSSM

To install the service, just follow these simple steps:

  • Run the console as an administrator and enter the command nssm.exe install.
  • The installation screen will open and you will enter:
    • "Application path" is the path to "auri-server.exe"
    • "Arguments" - arguments to run (ex: -p -l 3002). The service starts on port 3002 in production mode.
    • "Service name" - service name.

To start the service, open the Services panel in the operating system, start the service you installed in the previous step.

Administration interface

The AURI application server provides you with a web-based administration interface for managing and monitoring a running application.

The URL for accessing the interface is displayed when the application server is started in production mode. It is always the same IP address and port on which the application server receives requests from clients. Enter this URL into your favorite web browser.

Access to the administration interface is protected by a username and password - use the username and password for your customer account as specified in the application configuration.

Installation on the phone

To add an application to the end user's phone, all you need is one - Installation QR code of the application . You can get the QR code in the administration interface .

On each Android phone on which you want to use the app, follow these steps:

  1. Install and launch the AURI app from the Google Play Store ( link here ).
  2. From the Home screen, press the button +to allow the application to access the camera. The scanner screen appears.
  3. Aim the camera at the application QR installation code obtained above.

That is all! After scanning the code, the application will become available in the AURI main menu.

Authentication

AURI supports several ways to ensure that only authorized users can use the application.

  • List of allowed devices

    This approach requires manually enabling each new phone that attempts to use the application.

    Add a line to the application configuration auth: onlyAllowedDevices.

    To enable the application on a new device, follow these steps:

    1. Install the application on your phone ( see instructions above ).
    2. Try using the application from your phone. A message appears stating that the application is not enabled for this device.
    3. Now open the administration interface and allow access from the device in the access request table.

    The list of allowed devices is not saved in the configuration. Instead, AURI remembers it in a file .auri/settings.jsonthat is automatically created in the directory from which the application server is started.

  • Own authentication mechanism

    When creating your own authentication, you can assume that each user starts working with your application on the home screen ( homeScreen) and adds their own authentication logic to it. You can use the built-in variable $$deviceId , in which you will find a unique identifier of a particular device.

    To turn off device enumeration authentication and use your own mechanism, specify it in the configuration auth: none

    We will soon add more instructive examples and recommendations ...

  • More authentication mechanisms will soon follow ...

Default authentication behavior:

If authyou omit an entry in the configuration, the default behavior is as follows:

  • Authentication is disabled in development mode
  • Production mode uses authentication by enumerating allowed devices ( onlyAllowedDevices)

Maintenance and updates

This section describes various scenarios related to the long-term operation and maintenance of your application.

  • Release a new application configuration

    Simply overwrite the application configuration file with the new version and restart the program auri-server.

    The new version of the application will be immediately available on all connected phones.

  • Change the URL on which the application server listens

    When changing the URL of the application server, it is necessary to regenerate the installation QR code and scan it in all phones. The procedure is exactly the same as during the initial installation of the application, see Installation on the phone .

  • Update to a new version of the application server.

    To start using a newer version of the AURI application server, upload the new version of the program auri-server to the target machine and run it instead of the currently running instance.

    In future versions, it will be possible to update with one click from the administration interface, but this feature is not yet supported by the application server.

Logging, monitoring and alerting

To enable logging to a file, add the following settings to the application configuration:

logging:
  fileName: app.log
  level: error
  • fileName is the path to the file in which the log is to be saved (if you specify a relative path, it is applied from the directory from which it was auri-serverrun),
  • level determines the logging level (options are available error, warn, info, debug). The default setting is infowhen severity infoand more severe messages are logged .

The default logging settings are as follows:

  • In development mode, the application does not log to a file.
  • In production mode, the application logs to a file .auri/auri.login the application configuration directory.

If file logging is enabled, the application server automatically handles log rotation and deleting old records. After exceeding the file size of 200 MB, the old logs are rotated into a file with the extension .1, then .2etc. The files that add up to the extension .5are deleted. In total, the application logs always take up a maximum of 1 GB on the disk. In future versions, it will be possible to customize the logging parameters more.

We plan to add more logging, monitoring and alerting options in future versions.

Advanced topics

Built-in variables

In addition to its own variables, it is possible to use built-in variables in most places in the application, providing various useful information. For example, a built-in variable $$deviceIdalways contains the unique id of the device from which the request originates.

There will soon be a table of all built-in variables.

Split the configuration into multiple files

The application configuration can be divided into multiple files. E.g.:

main.yaml
include:
  - account.yaml
  - deployment.yaml

homeScreen: HomeScreen
screens:
  (...)
account.yaml
account:
  user: john.doe@example.com
  password: k3kd2SWo
deployment.yaml
deployment:
  ip: 192.168.32.107
  port: 3001

The include property ensures that the listed files are associated with the main configuration file. Using this technique, for example, you can:

  • Divide a large application into several modules with screen definitions and thus keep it clear.
  • Separate the general application core from deployment-specific settings.

Multiple instances of the application on one server

If you need to run the same application for different customers on one server, we recommend the following procedure:

  1. Divide the application configuration as follows:

    <root folder>
      ├─ auri-server.exe
      ├─ app.yaml
      ├─ customer1/
      │  └─ customer-config.yaml
      └─ customer2/
         └─ customer-config.yaml
                                               

    app.yamlKeep the core of the application common to all customers in the file .

    The files customer-config.yamlindicate those parts of the configurations that are specific to a particular customer. Assign each customer their own TCP port in section ( deployment.port) and anything else that makes it different (eg database name). customer-config.yamlSpecify at the beginning of each file

    include:
      - ../app.yaml
    See Dividing a configuration into multiple files .

  2. Run a separate application server instance for each customer. E.g.
    auri-server.exe -p customer1/customer-config.yaml

Template applications

Stock-taking

This simple application is used for asset inventory. Uses SQLite database .

backends:
  - SQLite:
      database: stocktaking
start:
  - query: |
      CREATE TABLE IF NOT EXISTS stocktaking (
          id INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
          stockNumber INTEGER NOT NULL UNIQUE,
          stockName text NOT NULL,
          timestamp DATE NULL DEFAULT NULL
      );
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`) VALUES
      ('111', 'Lenovo');
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`) VALUES
      ('222', 'HP');
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`) VALUES
      ('333', 'Mac Book');
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`) VALUES
      ('444', 'Monitor HP');
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`) VALUES
      ('555', 'Chair');
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`) VALUES
      ('666', 'Table');
  - query: INSERT OR IGNORE INTO `stocktaking` (`stockNumber`, `stockName`,
      `timestamp`) VALUES ('777', 'Coffee Machine', DATETIME('now'));
  - goToScreen: Home
style:
  header:
    backgroundColor: "#1564bf"
screens:
  Home:
    components:
      - scan:
          name: stockNumber
          onScan:
            - query: SELECT stockName FROM stocktaking WHERE stockNumber = $stockNumber
            - onEmptyResult:
                - notification: Stock not found!
                - set stockNumber: ""
            - query: UPDATE stocktaking SET timestamp = DATETIME('now') WHERE stockNumber =
                $stockNumber
            - notification: Stock ¨$stockName¨ added to stocktaking
            - set stockNumber: ""
      - label: ""
      - label:
          value: Missing stocks
          textColor: black
      - repeat:
          query: SELECT id, stockNumber, stockName FROM stocktaking WHERE timestamp IS
            NULL
          placeholder: null
          components:
            - item:
                icon: gps-fixed
                title: $stockName
      - label: ""
      - label:
          value: Scanned items
          textColor: black
      - repeat:
          query: SELECT id, stockNumber, stockName FROM stocktaking WHERE timestamp IS NOT
            NULL
          components:
            - item:
                icon: check
                title: $stockName

via GIPHY

Receipt and issue of goods

This simple application is used to receive and issue goods. Uses a MySQL database .

backends:
  - MySQL:
      host: localhost
      database: world
      port: 3306
      user: root
      password: root
start:
  - goToScreen: HlavniMenu
screens:
  HlavniMenu:
    title: Hlavní nabídka
    components:
      - button:
          value: Příjem zboží
          onClick:
            - set zbozi: ""
            - set pocet: ""
            - goToScreen: Prijem
          backgroundColor: "#00701a"
      - button:
          value: Výdej zboží
          onClick:
            - set zbozi: ""
            - set pocet: ""
            - goToScreen: Vydej
          backgroundColor: "#c2185b"
  Prijem:
    style:
      header:
        backgroundColor: "#00701a"
    onGoBack:
      - goToScreen: HlavniMenu
    title: Příjem zboží
    components:
      - autocomplete:
          name: zbozi
          withScanner: true
          placeholder: Kód zboží
          onSelect:
            - focusComponent: pocet
          query: SELECT id, name as title FROM zbozi
      - input:
          name: pocet
          type: number
          min: 0
          decimals: 0
          placeholder: Počet kusů
      - button:
          value: Přijmout zboží
          onClick:
            - query: UPDATE zbozi SET amount = amount + $pocet WHERE id = $zbozi
            - query: SELECT amount FROM zbozi WHERE id = $zbozi
            - notification: Aktualizováno na "$amount" položek!
            - goToScreen: HlavniMenu
          backgroundColor: "#00701a"
  Vydej:
    style:
      header:
        backgroundColor: "#ad1457"
    onGoBack:
      - goToScreen: HlavniMenu
    title: Výdej zboží
    components:
      - autocomplete:
          name: zbozi
          withScanner: true
          placeholder: Kód zboží
          onSelect:
            - focusComponent: pocet
          query: SELECT id, name as title FROM zbozi
      - input:
          name: pocet
          placeholder: Počet kusů
          type: number
          min: 0
          decimals: 0
      - button:
          value: Vydat zboží
          onClick:
            - query: UPDATE zbozi SET amount = amount - $pocet WHERE id = $zbozi
            - query: SELECT amount FROM zbozi WHERE id = $zbozi
            - notification: Aktualizováno na "$amount" položek!
            - goToScreen: HlavniMenu
          backgroundColor: "#c2185b"

via GIPHY

Attendance

This simple application is used for attendance records. Uses a MySQL database .

backends:
  - MySQL:
      host: localhost
      database: world
      port: 3306
      user: root
      password: root
start: Home
screens:
  Home:
    components:
      - button:
          value: Docházka
          onClick:
            - query: SELECT id as zamestnanecId, name FROM users WHERE deviceId = $$deviceId
            - onEmptyResult:
                - goToScreen: ZamestnanecNenalezen
            - query: SELECT start FROM vykazprace WHERE zamestnanec = $zamestnanecId AND datum
                = CURDATE() AND stop IS NULL LIMIT 1
            - onEmptyResult:
                - goToScreen: VykazPraceNepracuje
            - goToScreen: VykazPracePracuje
      - button:
          value: Historie docházky
          onClick:
            - goToScreen: HistorieDochazky
  VykazPracePracuje:
    query: SELECT start FROM vykazprace WHERE zamestnanec = $zamestnanecId AND datum
      = CURDATE() AND stop IS NULL LIMIT 1
    title: V práci
    onGoBack:
      - goToScreen: Home
    components:
      - label: Pracujete od $start
      - button:
          value: Ukončit práci
          onClick:
            - query: UPDATE `vykazprace` SET stop=CURTIME() WHERE zamestnanec = $zamestnanecId
                AND datum = CURDATE() AND stop IS NULL
            - goToScreen: VykazPraceNepracuje
            - set start: ""
          backgroundColor: red
  VykazPraceNepracuje:
    title: Odchod
    onGoBack:
      - goToScreen: Home
    components:
      - label: Stiskněte tlačítko a začněte pracovat
      - button:
          value: Začít pracovat
          onClick:
            - query: INSERT INTO `world`.`vykazprace` (`zamestnanec`, `start`, `datum`) VALUES
                ($zamestnanecId, CURTIME(), CURDATE());
            - goToScreen: VykazPracePracuje
            - set start: ""
  ZamestnanecNenalezen:
    onGoBack:
      - goToScreen: Home
    title: Chyba
    components:
      - label: Zamestnanec nenalezen, kontaktujte administrátora
      - label: Id zařízení je $$deviceId
  HistorieDochazky:
    title: Historie
    onGoBack:
      - goToScreen: Home
    components:
      - label: Historie docházky
      - repeat:
          query: SELECT SUM(TIMESTAMPDIFF(HOUR, start, stop)) as hodiny,
            DATE_FORMAT(datum, '%e.%c.%Y') as formatovaneDatum FROM vykazprace
            WHERE zamestnanec = (SELECT id FROM users WHERE deviceId =
            $$deviceId) GROUP BY datum
          components:
            - item:
                title: $formatovaneDatum
                details:
                  - Počet hodin: $hodiny h

via GIPHY