Javascript im Frontend

id: BSP.beispiel-page
controls:
  - controlType: button
    label: Zeige Page ID
    events:
      click:
        $script: |
          debug.log($.pageId);

controls:
  - controlType: button
    label: Zeige Login User
    events:
      click:
        $script: |
          $.debug.log($.loginUser);
          $.debug.log($.loginUser.isPackageAdmin('ERU'));
          $.loginUser.packageRoles('ERU').forEach(role => $.debug.log(role));

controls:
  - controlType: button
    label: Zeige Login User
    events:
      click:
        $script: |
          debug.log($.users.keyToName('U65'));
          debug.log($.users.keyToName($.loginUser.userKey));

controls:
  - controlType: button
    label: Zeige Login User
    events:
      click:
        $script: |
          const now = new Date(); // 24.05.2024 - 13:05:23 Uhr
          debug.log($.format.date(now)); // Ausgabe: "24.05.24"
          debug.log($.format.datetime(now)); // Ausgabe: "24.05.24, 13:05:23"
          debug.log($.format.time(now)); // Ausgabe: "13:05:23"
          // mit Optionen:
          debug.log($.format.datetime(now, {weekday:'long',
                                            year:'numeric',
                                            month:'long',
                                            hour12:true}));
          // Ausgabe: "Freitag, 24. Mai 2024 um 1:05:23 PM"

# article.page.yml
data:
  variables:
    matchcode:
      type: string
      value: TOPF_B1
controls:
  - controlType: input
    type: text
    value:
      $bind: matchcode
  - controlType: button
    label: Zeige Matchcode
    events:
      click:
        $script: |
          debug.log($.variables.matchcode);
  - controlType: button
    label: Lösche Matchcode
    color: danger
    events:
      click:
        $script: |
          $.variables.matchcode = '';

data:
  variables:
    artnr:
      type: string
      value: TOPF_B1
    article:
      type: entityInstance
      source: odata
      entity: Dab010
      primaryKey:
        $bind: artnr
    loadingText:
      type: string
controls:
  - controlType: text
    value:
      $bind: loadingText
  - controlType: input
    type: text
    value:
      $bind: artnr
  - controlType: text
    value:
      $bind: article.bez1
  - controlType: button
    label: Artikel TOPF_B2
    events:
      click:
        $script: |
          $.variables.loadingText = 'Lade Daten...';
          await $.controller.flush(); // notwendig, damit die Variablenänderung gespeichert und der Lade-Text im Control angezeigt wird
          $.variables.artnr = 'TOPF_B2';
          // $.variables.article.bez1 hätte hier noch den Wert der vorherigen artnr (TOPF_B1)
          await $.controller.refreshEntityInstance('article');
          // $.variables.article.bez1 hat hier den neuen Wert
          notify.success('Artikel TOPF_B2 hat die Bezeichnung ' + $.variables.article.bez1);
          $.variables.loadingText = '';
          // $.controller.flush() ist hier nicht notwendig, da es am Ende des $script automatisch ausgeführt wird

| Name | City | Amount |
------------------------
| Max | Ulm   | 1337   |

$ = {
  tableRowContext: {
    Name: {
      type: "Text",
      value: "Max"
    },
    City: {
      type: "Text",
      value: "Ulm"
    },
    Amount: {
      type: "Amount",
      value: 1337
    }
  }
}

| Name | City   | Amount |
------------------------
| Max  | Ulm    |  1337  |
| Tim  | Berlin |  4711  |

// Zeile 1:
$ = {
  dataSet: {
    Name: "Max",
    City: "Ulm",
    Amount: 1337
  }
}

// Zeile 2:
$ = {
  dataSet: {
    Name: "Tim",
    City: "Berlin",
    Amount: 4711
  }
}

interface OcrContextObject {
    [propertyName: string]: any;
    isAvailable(): boolean;
    formatConfidence(propertyName: string): string;
}

$.ocrData = {
  total: {
    value: 1378.37,
    rawValue: "1378,37 €",
    confidence: 0.86,
  },
}

$.ocrData.isAvailable();             // = true
$.ocrData.formatConfidence('total'); // = '86.0 %'

ocrData: OcrContextObject;
complete: () => Promise<void>;
completeWithVariables: (variables: Record<string, any>) => Promise<void>;
error: (errorCode: string) => Promise<void>;
escalate: (escalationCode: string) => Promise<void>;
saveVariable: (variableName: string) => Promise<void>;
setNextUser: (userKey: string) => Promise<void>;
setNextGroups: (groupKeys: string[]) => Promise<void>;
userAssignment: (definition: Partial<UserAssignmentDefinition>, callback: () => void) => void;
confirmation: (definition: Partial<ConfirmationDefinition>, callback: () => void) => void;
isAssignedToMe: () => boolean;
assignedUser: () => string;

controls:
  - controlType: button
    label: btn
    events:
      click:
        $script: |
          $.dialog.show(
            'PKG.page'
            (event) => {debug.log(JSON.stringify(event));}, 
            {size: 'medium', 'title' : 'hello world'});
 

contributes:
  dialog:
    buttons: 
      - label:
          $expr: |
            $.variables.someLabel + "!";
        color: danger
        disabled:
          $bind: isDisabled
        events:
          click:
            $script: | 
               $.dialog.cancel(), 
      - label: speichern
        color: success
        events:
          click:
            $script: | 
               $.dialog.success({ out: "resultData"})

event = {
  resultCode: /* 'close', 'success' or 'cancel' */,
  resultData: payload
}

controls:
  - controlType: custom
    name: myCustomControl
    id: idMyCustomControl
    width: 20vh
    events: 
      receiveMessage:
        $script: |
          debug.log('receive iFrame: ' + $.message);
  - controlType: button
    label: SendStaticMessage
    events:
      click:
        $script: |
          $.customControl('idMyCustomControl').postMessage("Statische Nachricht");

controls:
  - controlType: button
    label: Debug Log
    events:
      click:
        $script: |
          $.debug.log('Button Clicked!')

controls:
  - controlType: button
    label: Toasts zeigen
    events:
      click:
        $script: |
          $.notify.success('Erfolgreich');
          $.notify.error('Fehler');
          $.notify.info('Erledgit');
          $.notify.warning('Wenig Speicher');
          $.notify.show('success', 'Erfolgreich');

pageId: BSP.command-page
commands:
  - name: ExampleCommand
    label: Beispiel Kommande
    action:
      $script: |
        $.debug.log('Beispiel Kommando ausgeführt!')
controls:
  - controlType: button
    label: Kommando ausführen
    events:
      click:
        $script: |
          $.command.execute('BSP.command-page.ExampleCommand')

controls:
  - controlType: button
    label: Einbuchen
    events:
      click:
        $script: |
          $.backend.execute('bdeEinbuchen')

controls:
  - controlType: button
    label: Mobilgerät?
    events:
      click:
        $script: |
          $.debug.log(`Mobil (true/false)? ${$.isMobile}`)

controls:
  - controlType: text
    value: Experteninformation nur im Expertenmodus sichtbar
    visible:
      $expr: | # js
        $.expertModeEnabled()

controls:
  - controlType: button
    events:
      click:
        $script: | # js
          $.navigation.navigate('https://www.google.de/', '_self');
          // $.navigation.navigate('/administration/system-settings');

- controlType: button
  label: Neuen Artikel anlegen
  events:
    click:
      $script: |
        const artikelAnlegen = function(type) {
          $.variables.newArticleType = type;
          $.backend('createArticle');
        }
      
        $.confirm.show(
          'Artikel anlegen', 
          'Welchen Artikel möchten Sie anlegen?', 
          [
            { label: 'Kaufteil', callback: () => artikelAnlegen('T'), type: 'default', stylingMode: 'contained' },
            { label: 'Baugrupppe', callback: () => artikelAnlegen('B'), type: 'danger', stylingMode: 'outlined' },            
            { label: 'Artbeitswert', callback: () => artikelAnlegen('A'), type: 'success', stylingMode: 'text' },
          ], 
          'medium'
        )
        
- controlType: button
  label: Artikel löschen
  events:
    click:
      $script: |
        const articleNumber = $.variables.articleNumber;
        const deleteArticle = function() {
          $.variables.articles.$.delete();
          $.notify.success(`Der Artikel wurde ${articleNumber} gelöscht`);
          $.backend('reorgArticles');
        }
        $.confirm.default(
          'Artikel löschen', 
          `Möchten Sie den Artikel ${articleNumber} wirklich löschen?`, 
          deleteArticle
        )  

- controlType: button
  label: Download
  events:
    click: 
      $script: |
        $.documents.download($.variables.documentUuid);

- controlType: button
  label: Jump via MQTT for my User and User 'U2'
  events:
    click: 
      $script: |
        $.messaging.user().publish('jump', {'key': 'article', 'id': 123});
        $.messaging.user('U2').publish('jump', {'key': 'article', 'id': 123});

- controlType: button
  label: OData Aktion
  events:
    click: 
      $script: |
        await $.odata.executeAction('NeuberechngungPreise', {articleType: 'A'});
- controlType: button
  label: OData Funktion
  events:
    click: 
      $script: |
        await $.odata.executeFunction('HoechsterPreis', {articleNumber: 'JFK_4747_AKJF'});

executeEntityAction: async (entityName: string, primaryKeyValue: any, actionFQN: string, body: Record<string, any> = null): Promise<any> => {
  const service = StaticInjector.get<ODataMethodsService>(ODataMethodsService);
  return service.executeEntityAction(entityName, primaryKeyValue, actionFQN, body);
},
executeEntityCollectionAction: async (entityName: string, actionFQN: string, body: Record<string, any> = null): Promise<any> => {
  const service = StaticInjector.get<ODataMethodsService>(ODataMethodsService);
  return service.executeEntityCollectionAction(entityName, actionFQN, body);

},
executeFunction: async (functionName: string, params: Record<string, any> = null, namespace: string = 'OData.Beng'): Promise<any> => {
  const service = StaticInjector.get<ODataMethodsService>(ODataMethodsService);
  return service.executeUnboundFunction(functionName, params, namespace);
},
executeEntityFunction: async (entityName: string, primaryKeyValue: any, functionFQN: string, params: Record<string, any> = null): Promise<any> => {
  const service = StaticInjector.get<ODataMethodsService>(ODataMethodsService);
  return service.executeEntityFunction(entityName, primaryKeyValue, functionFQN, params);
},
executeEntityCollectionFunction: async (entityName: string, functionFQN: string, params: Record<string, any> = null): Promise<any> => {
  const service = StaticInjector.get<ODataMethodsService>(ODataMethodsService);
  return service.executeEntityCollectionFunction(entityName, functionFQN, params);
},

// Datei: mathUtils.js
const PI = 3.1415;

function square(num) {
  return num * num;
}

function circularArea(radius) {
  return PI * square(radius);
}

// Es wird nur die Funktion circularArea exportiert. 
// square und PI sind in den Expressions also nicht verfügbar.
return { circularArea }

// Datei: articleHelper.js
const ArticleNoLength = 20;

class ArticleHelper {
  trimArticleNumber(articleNumber) {
    return articleNumber.substring(0, ArticleNoLength);
  }
}

return { ArticleNoLength, ArticleHelper }

- controlType: inputContainer
  controls:
    - controlType: label
      value: "Artikel-Nummer"
    - controlType: input
      type: text
      value:
        $statement: |
          const helper = new articleHelper.ArticleHelper();
          return helper.trimArticleNumber("MUTTER M-1");

import:
  - name: base64
    src: |
      function decode(encoded) {
        return atob(encoded);
      }
      function encode(decoded) {
        return btoa(decoded)
      }
      // Export der Funktionen
      return { decode, encode }

Projekt Root-Ordner
|
|_ .pages
|____ article
|______ article.page.yml
|______ articleHelper.js
|____ main.page.yml
|____ utils.js

controls:
  - controlType: button
    label: Debugging von Skripten
    events:
      click:
        $script: |
          const now = new Date();
          const text = `heutiges Datum: ${now}`;
          debugger; // diese Zeile setzt einen Breakpoint
          $.notify.info(text);

controls:
  - controlType: text
    value:
      $expr: |
        'thisIsInvalidJavaScript'{{{}}}

VM2746:56 Custom JavaScript is invalid.
Path: <pageId>.text.value
Error:
 SyntaxError: Unexpected token '{'
    at [...]
Code:
 'thisIsInvalidJavaScript'{{{}}}