Daten

variables

Im Bereich variables einer page werden alle Variablen definiert, die auf dieser Page zur Verfügung stehen.

Es gibt sowohl simple Variablen mit einem der Typen:

• string

• number

• boolean

• date

• datetime

• array

als auch komplexe Variablen mit einem der Typen:

• entitySet

• entityInstance

• style

Simple Variablen

data:
  variables:
    <name>:
      type: string | number | boolean
      [value]: any
      [events]: VariableEvent
  

Kontext:

// schreiben
$.variables.<name> = 'Wert' | 4711 | false

// lesen
debug.log($.variables.<name>)

Besonderheiten bei date und datetime

• Die Variablentypen date und datetime stehen im JavaScript-Context als JavaScript-Date-Objekte zur Verfügung.

• Wenn der Wert einer solchen Variable geändert werden soll, kann entweder ein ISO-8601 konformer String oder ein Zeitstempel in Millisekunden oder ein JavaScript-Date-Objekt verwendet werden.

OData Variablen

data:
  variables:
    <name>:
      type: entitySet | entityInstance
      source: odata
      entity: <EntityName>
      attributes: Array von Feldnamen/NavigationProperty-Definitionen | '*'
      [filter]: Binding | Filter-String
      [orderBy]:
        - column: Feldname
          [desc]: true | false
      [events]: VariableEvent

Eine NavigationProperty kann bei attributes wie folgt angegeben werden:

# Variante 1: Alle Felder der NavigationProperty laden
attributes:
  - dmsDocumentVersion: "*"
# Variante 2: Nur bestimmte Felder der NavigationProperty laden
attributes:
- dmsDocumentVersion:
    - uuid
    - fileName

Kontext:

// Beim Schreiben muss eine Eigenschaft der Entität geschrieben werden und nicht die Variable selbst
// entitySets haben keine schreibbaren Eigenschaften
$.variables.<name>.artnr = 'MUTTER M4';
$.variables.<name>.artgruppe = 4711;

// lesen
debug.log($.variables.<name>)
debug.log($.variables.<name>.artnr)

VariableEvent

...
  [beforeValueChanged]: $script | $backend
  [afterValueChanged]: $script | $backend

Variablen können je nach Typ an Inputs, Grids oder Dropdowns gebunden werden. Falls sich der Wert einer Variablen ändert, unabhängig ob durch eine Oberflächen-Interaktion oder durch ein Skript, werden alle abhängigen Variablen und Controls aktualisiert.

entitySet

Ein entitySet enthält selbst keine Daten, sondern beschreibt wie und welche Daten von der gebundenen Komponente geladen werden. Daher kann ein entitySet immer nur an eine einzige Komponente gebunden werden.

Funktionen des $-Unterobjekts:

• items(): Gibt eine Liste der aktuell geladenen Datensätze zurück.

• size(): Gibt die Anzahl aller ladbaren Datensätze zurück.

• reload(): Initiiert ein erneutes Laden der Daten.

• load(): Initiiert das Laden der Daten.

• sortValue(): Gibt die aktuellen Sortierungseinstellungen zurück.

• filterValue(): Gibt die aktuellen Filtereinstellungen zurück.

• deselectIfNotAvailable(): (async)

  • Voraussetzungen: Das EntitySet ist an ein entityGrid gebunden, dessen selected-Eigenschaft an eine Variable gebunden ist. Beim EntityGrid muss außerdem die Eigenschaft keepGridSelection auf true gesetzt sein.

  • Funktionsweise: Wenn ein ausgewählter Datensatz nicht mehr geladen ist (bspw. durch Scrollen, durch eine geänderte Sortierung oder durch eine geänderte Filterung), dann wird die Selektion aufgehoben. Dabei wird der value der gebundenen selected-Variable entfernt.

• executeAction(actionFQN: string, body: Record<string, any>): Promise<any>: (async)

  • Führt die angegebene OData Aktion des entitySets aus

• executeFunction(functionFQN: string, body: Record<string, any>): Promise<any>: (async)

  • Führt die angegebene OData Funktion des entitySets aus

entityInstance

Eine entityInstance enthält zum einen die Werte eines Datensatzes und zum anderen das Unterobjekt $ mit dem ein Datensatz geändert, gelöscht oder neu angelegt werden kann. Außerdem gibt die Eigenschaft state Auskunft über den Zustand der entityInstance - browse, edit oder insert.

data:
  variables:
    artikel:
      type: entityInstance
      source: odata
      entity: Dab010
...
controls:
- controlType: button
  label: Speichern
  disabled:
    $expr: $.variables.artikel.$.state !== 'browse' || !$.variables.artikel.$.hasChanged()
  events:
    click:
      $script: |
        await $.variables.artikel.$.save();
        notify.success('Der Artikel wurde gespeichert');

Funktionen des $-Unterobjekts:

• edit(): (async) Versetzt die EntityInstance in den Edit-Modus. Danach darf diese bearbeitet werden.

• new(): (async) Versetzt die EntityInstance in den Insert-Modus. Danach darf diese bearbeitet werden.

• save(): (async) Speichert die aktuell in der EntityInstance gehaltenen Daten.

• delete(): (async) Löscht den aktuell ausgewählten Datensatz.

• cancel(): (async) Wenn die EntityInstance im Edit-/Insert-Modus ist, kann hiermit zurück in den Browse-Modus gewechselt werden, ohne dass Änderungen gespeichert werden.

• hasChanged(): gibt Auskunft darüber, ob die Werte einer EntityInstance geändert wurden. Nur im Edit-Modus verwendbar.

• executeAction(actionFQN: string, body: Record<string, any>): Promise<any>: (async)

  • Führt die angegebene OData Aktion der entityInstance aus

• executeFunction(functionFQN: string, body: Record<string, any>): Promise<any>: (async)

  • Führt die angegebene OData Funktion der entityInstance aus

Style

Eine Style Variable kann einen statischen Style definieren. Dieser kann dann an GUI Elemente statt der dortigen Styleeinstellungen gebunden werden.

some_style:
    type: style
    value:
      fontSize: 2.5rem
      color: "#ff8742"
      backgroundColor: "#cf4fff"
      height: 30px
      width: 30px

Besonderheit:

Style Variablen können außerdem in der be_package.install.yaml definiert werden und stehen so als Style Variablen im kompletten package zur Verfügung. Diese sind dort als Liste anzugeben, ber der der Variablenname als name Eigenschaft an das Object gehängt wird:

objects:
  styles:
    - name: some_style
      value:
        fontSize: 2.5rem

Alternativ können diese styles mit gleichem Schema in einer Datei .objects/<...>.styles.yaml hinterlegt werden und via

objects:
  styles: $include 

ins package geladen. Existiert in einer Page sowohl ein globaler Style, als auch ein lokaler Style mit selben Namen, so wird der Style gemerged, d.h. für eine Page können so einzelne globale Styleeinstellungen überschrieben werden. Ein genestetes Binding von Größen ist nicht möglich.

Input/Output

Eine Page kann mit Inputs und Outputs versehen werden.

Diese erlauben den Zugriff auf primitive Page Variablen von außen, entweder schreibend oder lesend.

id: DEMO.demo_kundendetails
title: Kundendetails
type: mainPage
objectType: pagecontainer
inputs:
  - detailKundenId
outputs:
  - recordCount

Inputs können entweder über URL Query Parameter

<tenant>.businessexpress.cloud/page/DEMO.demo_kundendetails?detailKundenId=20

oder durch eine parent Page bereitgestellt werden.

- controlType: pageContainer
  size: auto
  id: DEMO.demo_kundendetails
  data:
    inputs:
      detailKundenId: 
        $bind: kundenId

Outputs können nur von einer parent Page verwendet werden.

- controlType: pageContainer
  size: auto
  id: DEMO.demo_kundendetails
  data:
    outputs:
      detailKundenId: 
        $bind: kundenId

Es ist zudem möglich zwei Variablen aus parent und child Page zu synchronisieren. Dadurch werden die Werte gleich gehalten, unabhängig davon in welcher Page dieser geschrieben wird.

- controlType: pageContainer
  size: auto
  id: DEMO.demo_kundendetails
  data:
    inputs:
      detailKundenId: 
        $bind: kundenId
    outputs:
      detailKundenId: 
        $bind: kundenId