agorum core cards – Elemente

Diese Dokumentation enthält eine Referenz aller Standard-Elemente von agorum core cards.

Mit diesen Elementen bauen Sie die cards auf.

Übersicht aller Container-Elemente

Allgemeine Eigenschaften für alle Elemente

Folgende Eigenschaften gelten für alle Elemente und werden bei den jeweiligen Elementen nicht nochmals definiert.

Allgemeine Eigenschaften für Container-Elemente

Folgende Eigenschaften gelten für alle Container-Elemente, etwa:

• agorum.card
• agorum.horizontal
• agorum.vertical
• agorum.display.group

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 800,
  items: [
    {
      type: 'agorum.spacer',
      height: 10,
    },
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let card = (num, spacing, padding) => ({
  type: 'agorum.card',
  minWidth: 200,
  flex: 1,
  spacing: spacing,
  padding: padding,
  items: [
    {
      type: 'agorum.button',
      text: 'Button 1 ' + num,
    },
    {
      type: 'agorum.button',
      text: 'Button 2 ' + num,
    },
  ],
});

let sample = {
  type: 'agorum.horizontal',
  spacing: 'xl',
  wrap: true,
  items: [card(1, 'none', 'none'), card(2, 's', 's'), card(3, 'm', 'm'), card(4, 'l', 'l'), card(5, 'xl', 'xl')],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu padding und spacing

agorum.card

Dieses Element:

• erstellt eine card
• kann zum Anordnen von Elementen in einer cards-Struktur verwendet werden
• unterstützt verschiedene Eigenschaften zum Steuern des Aussehens und Verhaltens der card

agorum.card ist meist die Grundlage für eine card. Sie können auch eine card in cards verschachteln und so Unterelemente darstellen.

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      type: 'agorum.spacer',
      height: 10,
    },
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  mark: 'success',
  spacing: 'm',
  padding: 's',
  interactive: true,
  pointer: true,
  minWidth: 200,
  height: 100,
  badges: [
    {
      type: 'agorum.badge',
      color: 'primary',
      text: 'New',
      name: 'new',
    },
  ],
  items: [
    {
      type: 'agorum.text',
      text: 'Hello, world!',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.card

Dieses Beispiel zeigt eine card, die das Element agorum.text enthält.

Die card:

• besitzt eine minimale Breite von 200 Pixel und eine Höhe von 100 Pixeln
• besitzt eine grüne Markierung (success), einen mittleren Abstand (m) zwischen den Elementen und einen kleinen Innenabstand (s)
• zeigt ein Badge mit New an
• ist interaktiv und zeigt den Mauszeiger als Zeiger an, wenn er über die card fährt

agorum.vertical

Dieses Element:

• erstellt eine vertikale Anordnung von Elementen
• kann zum Anordnen von Elementen in einer Spalte in einem cards-Layout verwendet werden
• unterstützt verschiedene Eigenschaften zum Steuern des Layouts und Verhaltens der Elemente

Beispiel 1

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.vertical',
      spacing: 'm',
      flex: 1,
      minWidth: 100,
      items: [
        {
          type: 'agorum.text',
          text: 'Text 1',
        },
        {
          type: 'agorum.text',
          text: 'Text 2',
        },
        {
          type: 'agorum.text',
          text: 'Text 3',
        },
        {
          type: 'agorum.text',
          text: 'Text 4',
        },
      ],
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel 1 zu agorum.vertical

Dieses Beispiel zeigt eine card, die das Element agorum.vertical enthält und vier Textelemente untereinander innerhalb des Elements anzeigt.

Beispiel 2

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.horizontal',
      spacing: 'm',
      flex: 1,
      minWidth: 100,
      items: [
        {
          type: 'agorum.vertical',
          flex: 1,
          items: [
            {
              type: 'agorum.text',
              text: 'Text 1',
            },
            {
              type: 'agorum.text',
              text: 'Text 2',
            },
          ],
        },
        {
          type: 'agorum.vertical',
          flex: 2,
          items: [
            {
              type: 'agorum.text',
              text: 'Text 3',
            },
            {
              type: 'agorum.text',
              text: 'Text 4',
            },
          ],
        },
      ],
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel 2 zu agorum.vertical

Dieses Beispiel zeigt eine card, die das Element agorum.horizontal und innerhalb des Elements zwei weitere agorum.vertical-Elemente enthält.

• Das erste agorum.vertical-Element hat einen flex-Wert von 1.
• Das zweite agorum.vertical-Element hat einen flex-Wert von 2 und nimmt doppelt so viel Platz ein wie das erste agorum.vertical-Element.
• Jedes agorum.vertical-Element enthält zwei Textelemente.

agorum.horizontal

Dieses Element:

• erstellt eine horizontale Anordnung von Elementen
• kann zum Anordnen von Elementen in einer Zeile in einem cards-Layout verwendet werden
• und unterstützt verschiedene Eigenschaften zum Steuern des Layouts und Verhaltens der Elemente

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.horizontal',
      spacing: 'm',
      flex: 1,
      minWidth: 100,
      wrap: true,
      items: [
        {
          type: 'agorum.text',
          text: 'Text 1',
        },
        {
          type: 'agorum.text',
          text: 'Text 2',
        },
        {
          type: 'agorum.text',
          text: 'Text 3',
        },
        {
          type: 'agorum.text',
          text: 'Text 4',
        },
      ],
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.horizontal

Dieses Beispiel zeigt eine card, die das Element agorum.horizontal und innerhalb des Elements vier Textelemente enthält.

Das Element besitzt mehrere Eigenschaften zum Steuern des Verhaltens:

agorum.button

Dieses Element:

• erstellt eine interaktive Schaltfläche
• unterstützt verschiedene Eigenschaften zum Steuern des Aussehens und Verhaltens der Schaltfläche

Beispiel 1

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.button',
      text: 'Primary',
      color: 'primary',
      size: 'm',
      weight: 'bold',
      icon: 'ionicon:checkmark',
      name: 'primaryButton',
    },
    {
      type: 'agorum.button',
      text: 'Secondary',
      color: 'secondary',
      size: 's',
      weight: 'normal',
      icon: 'ionicon:close',
      name: 'secondaryButton',
    },
    {
      type: 'agorum.button',
      text: 'Success',
      color: 'success',
      size: 'l',
      weight: 'light',
      icon: 'ionicon:alert',
      name: 'successButton',
    },
  ],
};

widget.down('cardView').replace(sample);

widget.down('cardView').on('elementClicked', name => console.log('Button clicked:', name));

widget;

Beispiel zu agorum.button

Dieses Beispiel zeigt drei Schaltflächen mit je unterschiedlichen Eigenschaften.

Ein Event-Handler wird hinzugefügt, der den Namen der geklickten Schaltfläche in der Konsole ausgibt.

Beispiel 2

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.button',
      icon: 'ionicon:document;color=white',
      text: 'Default is m',
    },
    {
      type: 'agorum.button',
      icon: 'ionicon:document;color=white',
      text: 'Size s',
      size: 's',
    },
    {
      type: 'agorum.button',
      icon: 'ionicon:document;color=white',
      text: 'Size m',
      size: 'm',
    },
    {
      type: 'agorum.button',
      icon: 'ionicon:document;color=white',
      text: 'Size l',
      size: 'l',
    },
    {
      type: 'agorum.button',
      icon: 'ionicon:document;color=white',
      text: 'Size xl',
      size: 'xl',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zum Verwenden von Größen

agorum.text

Dieses Element:

• zeigt Text in einer card an
• unterstützt verschiedene Eigenschaften zum Steuern des Aussehens und Verhaltens des Textes

Beispiel 1

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.text',
      text: 'Hello, world!',
      size: 'm',
      weight: 'bold',
      align: 'center',
      name: 'myText',
    },
    {
      type: 'agorum.text',
      text: 'This is a long text that will be cut off at the end.',
      size: 's',
      weight: 'normal',
      align: 'start',
      ellipsis: 'end',
      name: 'myLongText',
    },
    {
      type: 'agorum.text',
      text: 'This is a long text that will be cut off at the start.',
      size: 'l',
      weight: 'light',
      align: 'end',
      ellipsis: 'start',
      name: 'myLongTextStart',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.text

Dieses Beispiel zeigt drei Textelemente mit je unterschiedlichen Eigenschaften.

• Der erste Text besitzt eine mittlere Größe, eine fette Gewichtung und ist zentriert.
• Der zweite Text besitzt eine kleine Größe, eine normale Gewichtung, ist linksbündig und zeigt Ellipsen am Ende an, wenn der Text abgeschnitten wird.
• Der dritte Text besitzt eine große Größe, eine leichte Gewichtung, ist rechtsbündig und zeigt Ellipsen am Anfang an, wenn der Text abgeschnitten wird.

Beispiel 2

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.text',
      text: 'Default is m',
    },
    {
      type: 'agorum.text',
      text: 'Size s',
      size: 's',
    },
    {
      type: 'agorum.text',
      text: 'Size m',
      size: 'm',
    },
    {
      type: 'agorum.text',
      text: 'Size l',
      size: 'l',
    },
    {
      type: 'agorum.text',
      text: 'Size xl',
      size: 'xl',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zum Verwenden von Größen

agorum.separator

Dieses Element erstellt einen visuellen Trenner zwischen Elementen.

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.text',
      text: 'Text above the separator',
    },
    {
      type: 'agorum.separator',
      color: 'danger', 
    },
    {
      type: 'agorum.text',
      text: 'Text below the separator',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.separator

Dieses Beispiel zeigt eine card, die zwei Textelemente und einen Separator enthält.

Der Separator dient als visueller Trenner zwischen den beiden Textelementen.

agorum.chip

Dieses Element erstellt ein Chip-Element.

Ein Chip ist eine kompakte Komponente, die zum Ausdruck von Schlüsselwörtern, Filtern oder Aktionen verwendet werden kann.

Beispiel 1

let aguila = require('common/aguila');
let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.chip',
      text: 'Keyword',
      color: 'primary',
      size: 'm',
      icon: 'ionicon:checkmark',
      name: 'keywordChip',
    },
    {
      type: 'agorum.chip',
      text: 'Filter',
      color: 'secondary',
      size: 's',
      icon: 'ionicon:filter',
      name: 'filterChip',
    },
    {
      type: 'agorum.chip',
      text: 'Action',
      color: 'danger',
      size: 'l',
      icon: 'ionicon:flash',
      name: 'actionChip',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.chip

Dieses Beispiel zeigt drei Chip-Elemente mit je unterschiedlichen Eigenschaften:

• Das erste Chip-Element besitzt die Farbe primary, eine mittlere Größe und ein Häkchen-Symbol.
• Das zweite Chip-Element besitzt die Farbe secondary, eine kleine Größe und ein Filter-Symbol.
• Das dritte Chip-Element besitzt die Farbe danger, eine große Größe und ein Blitz-Symbol.

Beispiel 2

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.chip',
      icon: 'ionicon:document;color=white',
      text: 'Default is m',
    },
    {
      type: 'agorum.chip',
      icon: 'ionicon:document;color=white',
      text: 'Size s',
      size: 's',
    },
    {
      type: 'agorum.chip',
      icon: 'ionicon:document;color=white',
      text: 'Size m',
      size: 'm',
    },
    {
      type: 'agorum.chip',
      icon: 'ionicon:document;color=white',
      text: 'Size l',
      size: 'l',
    },
    {
      type: 'agorum.chip',
      icon: 'ionicon:document;color=white',
      text: 'Size xl',
      size: 'xl',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zum Verwenden von Größen

agorum.img

Dieses Element:

• zeigt ein Bild in einer card
• unterstützt verschiedene Eigenschaften zum Steuern des Aussehens und Verhaltens des Bilds

'https://agorumdocproxy.agorum.com/api/rest/object/embed/[ID, UUID, Pfad]'

Beispiel

let aguila = require('common/aguila');
let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.img',
      content: icons.get('ionicon:document'),
      size: 40,
      name: 'documentIcon',
    },
    {
      type: 'agorum.img',
      src: 'https://agorumdocproxy.agorum.com/api/rest/object/embed/432667f0-45bd-11ee-82e4-02420a0a000b',
      minWidth: 100,
      minHeight: 100,
      name: 'myImageWithId',
    },
    {
      type: 'agorum.img',
      src: 'https://agorumdocproxy.agorum.com/api/rest/object/embed/%2FHome%2Froi%2FMyFiles%2Fcard%2Fsamples%2Fresources%2Fa-image.jpg',
      minWidth: 100,
      minHeight: 100,
      name: 'myImageWithPath',
    },
    {
      type: 'agorum.img',
      src: 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
      minWidth: 32,
      minHeight: 32,
      name: 'inlineImage',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.img

Dieses Beispiel zeigt vier Bilder:

• Das erste Bild ist ein Symbol, das von der Funktion icons.get als SVG-XML abgerufen wird und eine Größe von 40 Pixeln besitzt.
• Das zweite Bild ist eine Bilddatei, die über die agorum core-API mit der UUID geladen wird und eine minimale Breite und Höhe von jeweils 100 Pixeln besitzt.
• Das dritte Bild wurde mit der agorum core-API und einem Pfad geladen.
• Zusätzlich wurde ein viertes Bild als Inline-Grafik hinzugefügt, die als Base64-codierte GIF-Datei definiert ist und eine minimale Breite und Höhe von jeweils 100 Pixeln besitzt.

agorum.badge

Dieses Element erstellt ein Abzeichen an einer card in der rechten oberen Ecke.

Ein Abzeichen ist eine kleine Informationsfläche, die Text und / oder Symbole anzeigen kann.

Beispiel

let aguila = require('common/aguila');
let icons = require('/agorum/roi/customers/agorum.icons/js/icons');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      type: 'agorum.spacer',
      height: 10,
    },
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  badges: [
    {
      type: 'agorum.badge',
      text: 'New',
      color: 'primary',
      content: icons.get('ionicon:checkmark'),
      name: 'newBadge',
    },
    {
      type: 'agorum.badge',
      text: 'Warning',
      color: 'warning',
      icon: 'ionicon:alert',
      name: 'warningBadge',
    },
    {
      type: 'agorum.badge',
      text: 'Error',
      color: 'danger',
      icon: 'ionicon:close',
      name: 'errorBadge',
    },
  ],
  items: [
    {
      type: 'agorum.text',
      text: 'Hello, world!',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.badge

Dieses Beispiel zeigt drei Abzeichen mit je unterschiedlichen Eigenschaften:

• Das erste Abzeichen besitzt den Text New, die Farbe primary und ein Häkchen-Symbol.
• Das zweite Abzeichen besitzt den Text Warning, die Farbe warning und ein Warnsymbol.
• Das dritte Abzeichen besitzt den Text Error, die Farbe danger und ein Schließen-Symbol.

agorum.object

Dieses Element stellt ein agorum core-Objekt dar, um etwa Informationen über ein bestimmtes agorum core-Objekt anzuzeigen.

let decorators = require('/agorum/roi/customers/agorum.cards/js/decorators');
decorators.LEVEL.MAXIMUM

Beispiel

let aguila = require('common/aguila');
let decorators = require('/agorum/roi/customers/agorum.cards/js/decorators');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.object',
      id: '/agorum/roi/Files',
      level: decorators.LEVEL.MAXIMUM, // MINIMUM, SMALL, REDUCED, DEFAULT, MAXIMUM
      interactive: true,
      minWidth: 200,
      name: 'agorumObject',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.object

Dieses Beispiel zeigt eine card:

• die das Element agorum.object enthält
• ein agorum core-Objekt darstellt, das durch seine ID identifiziert wird
• interaktiv ist und eine minimale Breite von 200 Pixeln besitzt.

Die Detailstufe der angezeigten Informationen ist auf das Maximum (4) gesetzt.

agorum.display.group

Dieses Element stellt eine Anzeigegruppe dar, die zum Anzeigen von zusammengehörigen Inhalten verwendet wird.

• Mehrere Anzeigegruppen können nebeneinander dargestellt werden, wenn genügend Platz vorhanden ist, ansonsten wird auf die nächste Zeile umgebrochen.
• Innerhalb einer Anzeigegruppe können Sie Labels und Werte definieren, um zusammengehörige Informationen darzustellen. Dabei können verschiedene Datentypen verwendet werden, etwa Text, Zahlen, Daten und Objekte, die das System entsprechend sinnvoll rendert.
• Wenn Sie bei den Unterelementen keinen type angeben, setzt das System alle Elemente unterhalb von agorum.display.group auf den Typ agorum.display.
• Objekt-IDs löst das System automatisch auf und stellt sie als anklickbare Links dar, die auf das jeweilige agorum core-Objekt verweisen. Dies ermöglicht eine intuitive Interaktion mit den dargestellten Informationen.
• Die Breite der Labels und der einzelnen Abschnitte können Sie anpassen, um die Darstellung der Anzeigegruppe zu optimieren.
• Jede Anzeigegruppe wird durch ein leeres Element '' abgetrennt. Dadurch entstehen mehrere Spalten, die automatisch nebeneinander dargestellt werden, sofern genug Platz vorhanden ist.

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.display.group',
      labelWidth: 80, // width of labels, default 100
      sectionWidth: 200, // width of a section for each block. Default is 300
      items: [
        // First column of display group
        {
          type: 'agorum.vertical',
          size: 12,
        },
        {
          type: 'agorum.display', // optional type-definition, cause default type is agorum.display
          label: 'Name',
          value: 'John Doe',
        },
        {
          label: 'Email',
          value: 'john.doe@example.com',
        },
        {
          label: 'Phone',
          value: '+1-202-555-0179',
        }, // blank item, makes new column in display group
        '',

        // Second column of display group
        {
          type: 'agorum.vertical',
          size: 12,
        },
        {
          label: 'Label 1',
          value: 'Text 1',
        },
        {
          label: 'Date',
          value: new Date(),
        },
        {
          label: 'Number',
          value: 1.5,
        },
        {
          label: 'Object', // object: looks up the agorum core object and displays a link. The text is the displayName of the object
          object: 'user:demo',
        },
        {
          label: 'Array', // also arrays of values are possible
          value: ['Value 1', 'Value 2'],
        },
        {
          label: 'Object Array',
          items: [{ object: 'user:demo' }, { object: 'user:roi' }],
        },
      ],
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Beispiel zu agorum.display.group

Dieses Beispiel zeigt das Element agorum.display.group, das innerhalb des Elements verschiedene Arten von Elementen anzeigt, darunter:

• Text
• Datum
• Zahl
• Objekt
• Arrays von Werten und Objekten.

Leere Elemente werden verwendet, um neue Zeilen in der Anzeigegruppe zu erstellen.

agorum.display

Dieses Element gibt einen Wert formatiert mit Label aus und wird zumeist in Kombination mit dem Element agorum.display.group verwendet.

• Sie können verschiedene Datentypen verwenden, etwa Text, Zahlen, Daten und Objekte, die das System entsprechend sinnvoll rendert.
• Objekt-IDs löst das System automatisch auf und stellt sie als anklickbare Links dar, die auf das jeweilige agorum core-Objekt verweisen. Dies ermöglicht eine intuitive Interaktion mit den dargestellten Informationen.

Beispiel

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.display',
      label: 'Name',
      labelWidth: 100,
      value: 'John Doe',
    },
    {
      type: 'agorum.display',
      label: 'Email',
      value: 'john.doe@example.com',
    },
    {
      type: 'agorum.display',
      label: 'Phone',
      value: '+1-202-555-0179',
    },
    {
      type: 'agorum.display',
      label: 'Label 1',
      value: 'Text 1',
    },
    {
      type: 'agorum.display',
      label: 'Date',
      value: new Date(),
    },
    {
      type: 'agorum.display',
      label: 'Number',
      value: 1.5,
    },
    {
      type: 'agorum.display',
      label: 'Object', // object: looks up the agorum core object and displays a link. The text is the displayName of the object
      object: 'user:demo',
    },
    {
      type: 'agorum.display',
      label: 'Array', // also arrays of values are possible
      value: ['Value 1', 'Value 2'],
    },
    {
      type: 'agorum.display',
      label: 'Object Array',
      items: [{ object: 'user:demo' }, { object: 'user:roi' }],
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Das Beispiel definiert eine Reihe von agorum.display-Elementen innerhalb einer agorum.card. Diese Elemente dienen dazu, verschiedene Arten von Informationen anzuzeigen:

Diverse Beispiele

Alle Elemente auf einer card

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 800,
  items: [
    {
      type: 'agorum.spacer',
      height: 10,
    },
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let attachment = num => ({
  type: 'agorum.card',
  padding: 's',
  flex: 1,
  minWidth: 200,
  name: 'attachment-' + num,
  interactive: true,
  pointer: true,
  tooltip: 'test',
  items: [
    {
      type: 'agorum.horizontal',
      items: [
        {
          type: 'agorum.img',
          icon: 'ionicon:document',
          size: 40,
        },
        {
          type: 'agorum.vertical',
          flex: 1,
          items: [
            {
              type: 'agorum.text',
              text: 'Attachment ' + num,
              weight: 'bold',
            },
            {
              type: 'agorum.text',
              text: '100kb',
              size: 's',
            },
          ],
        },
      ],
    },
  ],
});

let sample = {
  type: 'agorum.card',
  mark: 'warning',
  spacing: 'xl',
  badges: [
    {
      type: 'agorum.badge',
      text: 'text + icon',
      icon: 'ionicon:heart',
      color: 'primary',
      name: 'text-icon',
    },
    {
      type: 'agorum.badge',
      text: 'longer text',
      color: 'warning',
      name: 'long-text',
    },
    {
      type: 'agorum.badge',
      text: '1',
      color: 'danger',
      name: 'priority-1',
    },
    {
      type: 'agorum.badge',
      color: 'success',
      icon: 'ionicon:checkmark',
      name: 'seen',
    },
    {
      type: 'agorum.badge',
      color: 'success',
      text: '✓',
      name: 'seen2',
    },
  ],
  items: [
    {
      type: 'agorum.vertical',
      spacing: 'm',
      items: [
        {
          type: 'agorum.horizontal',
          spacing: 'm',
          items: [
            {
              type: 'agorum.img',
              icon: 'agorum:rounded-square-5;color=#b1b1b1|agorum:folder;scale=.8;color=#ffd61c',
              size: 40,
              name: 'icon',
            },
            {
              type: 'agorum.horizontal',
              spacing: 'm',
              flex: 1,
              minWidth: 140,
              items: [
                {
                  flex: 1,
                  minWidth: 160,
                  type: 'agorum.text',
                  html: 'align center Line 1<br>Line 2<br>Line 3',
                  align: 'center',
                  weight: 'bold',
                },
                {
                  type: 'agorum.text',
                  text: 'dd.MM.yyyy HH:mm',
                  weight: 'normal',
                  align: 'end',
                },
              ],
            },
            {
              type: 'agorum.vertical',
              mark: 'primary',
              flex: 1,
              minWidth: 100,
              items: [
                {
                  type: 'agorum.text',
                  html: 'flex 1<br>minWidth 100',
                },
              ],
            },
            {
              type: 'agorum.card',
              mark: 'primary',
              flex: 2,
              minWidth: 200,
              items: [
                {
                  type: 'agorum.text',
                  html: 'flex 2<br>minWidth 200',
                },
              ],
            },
            {
              type: 'agorum.card',
              mark: 'primary',
              flex: 3,
              items: [
                {
                  type: 'agorum.text',
                  text: 'flex 3',
                },
                {
                  type: 'agorum.card',
                  mark: 'danger',
                  name: 's',
                  spacing: 's',
                  items: [
                    {
                      type: 'agorum.text',
                      text: 'spacing s',
                    },
                    {
                      type: 'agorum.button',
                      text: 'xxxx',
                      name: 'xxxx-s',
                    },
                  ],
                },
                {
                  type: 'agorum.card',
                  mark: 'danger',
                  spacing: 'm',
                  items: [
                    {
                      type: 'agorum.text',
                      text: 'spacing m',
                    },
                    {
                      type: 'agorum.button',
                      text: 'xxxx',
                      name: 'xxxx-m',
                    },
                  ],
                },
                {
                  type: 'agorum.card',
                  mark: 'danger',
                  spacing: 'l',
                  items: [
                    {
                      type: 'agorum.text',
                      text: 'spacing l',
                    },
                    {
                      type: 'agorum.button',
                      text: 'xxxx',
                      name: 'xxxx-l',
                    },
                  ],
                },
                {
                  type: 'agorum.card',
                  mark: 'danger',
                  spacing: 'xl',
                  items: [
                    {
                      type: 'agorum.text',
                      text: 'spacing xl',
                    },
                    {
                      type: 'agorum.button',
                      text: 'xxxx',
                      name: 'xxxx-xl',
                    },
                  ],
                },
              ],
            },
          ],
        },
      ],
    },
    {
      type: 'agorum.separator',
    },
    {
      type: 'agorum.horizontal',
      spacing: 's',
      items: [
        {
          type: 'agorum.chip',
          size: 's',
          text: 'Chip 1 (s)',
          icon: 'ionicon:person',
          name: 'chip-1',
        },
        {
          type: 'agorum.chip',
          text: 'Chip 2',
          icon: 'ionicon:person',
          name: 'chip-2',
          color: 'success',
        },
        {
          type: 'agorum.chip',
          text: 'Chip 3',
          icon: 'ionicon:person',
          name: 'chip-3',
          color: 'warning',
        },
        {
          type: 'agorum.chip',
          text: 'Chip 4',
          icon: 'ionicon:person',
          name: 'chip-4',
          color: 'danger',
        },
      ],
    },
    {
      type: 'agorum.text',
      text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
      weight: 'normal',
    },
    {
      type: 'agorum.text',
      text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
      weight: 'normal',
      width: 200,
      ellipsis: 'end',
    },
    {
      type: 'agorum.text',
      text: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
      weight: 'normal',
      ellipsis: 'end',
    },
    {
      type: 'agorum.horizontal',
      items: [
        {
          type: 'agorum.img',
          name: 'medium-icon',
          icon: 'ionicon:heart',
          size: 50,
        },
        {
          type: 'agorum.img',
          name: 'large-icon',
          icon: 'ionicon:person|agorum:circle;slot=bottom-left;color=orange|ionicon:flash;slot=bottom-left;color=white;scale=.8',
          size: 100,
        },
        {
          type: 'agorum.img',
          name: 'small-image',
          src: 'data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7',
          size: 16,
        },
        {
          type: 'agorum.img',
          name: 'square-image',
          src: 'https://agorumdocproxy.agorum.com/api/rest/object/embed/432667f0-45bd-11ee-82e4-02420a0a000b',
          size: 100,
        },
        {
          type: 'agorum.img',
          name: 'small-image',
          src: 'https://agorumdocproxy.agorum.com/api/rest/object/embed/432667f0-45bd-11ee-82e4-02420a0a000b',
          minWidth: 148.97579,
          minHeight: 100,
        },
        {
          type: 'agorum.img',
          name: 'large-image',
          src: 'https://agorumdocproxy.agorum.com/api/rest/object/embed/432667f0-45bd-11ee-82e4-02420a0a000b',
          minWidth: 100,
          width: 800,
          height: 537,
        },
      ],
    },
    {
      type: 'agorum.separator',
    },
    {
      type: 'agorum.object',
      id: '432667f0-45bd-11ee-82e4-02420a0a000b',
      name: 'agorum-object-card',
      level: 4, // 0=MINIMUM, 1=SMALL, 2=REDUCED, 3=DEFAULT, 4=MAXIMUM
      interactive: true,
      minWidth: 200,
    },
    {
      type: 'agorum.separator',
    },
    {
      type: 'agorum.horizontal',
      wrap: true,
      items: [attachment(1), attachment(2), attachment(3), attachment(4)],
    },
  ],
};

widget.down('cardView').replace(sample);

widget
  .down('cardView')
  .on('elementClicked', name => console.log('clicked', name))
  .on('elementRightClicked', name => console.log('right clicked', name))
  .on('elementDblClicked', name => console.log('dbl clicked', name));

widget;

Alle Elemente in einer card

Dieses Beispiel demonstriert die Verwendung aller Elemente, zeigt verschiedene Möglichkeiten zur Gestaltung von cards und enthält mehrere agorum.card-Elemente, einige davon in anderen cards eingebettet.

Jede card besitzt:

• Abzeichen
• Text
• Bilder
• Chips
• Trennlinien
• Objekte
• Anzeigegruppen.
• interaktive Schaltflächen und horizontale Layouts mit Wrap.

Die Anzeigegruppe zeigt verschiedene Datentypen an, Objekte löst das System automatisch auf und macht sie anklickbar.

Event-Handler existieren, die auf Klicks auf Elemente reagieren.

Adress-card

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.horizontal',
      items: [
        {
          type: 'agorum.img',
          src: 'https://agorumdocproxy.agorum.com/api/rest/object/embed/432667f0-45bd-11ee-82e4-02420a0a000b',
          minWidth: 100,
          minHeight: 100,
          name: 'personImage',
        },
        {
          type: 'agorum.display.group',
          labelWidth: 80,
          sectionWidth: 200,
          items: [
            {
              label: 'Name',
              value: 'John Doe',
            },
            {
              label: 'Address',
              value: '123 Main St, Anywhere, USA',
            },
            {
              label: 'Phone',
              value: '+1-202-555-0179',
            },
            {
              label: 'Email',
              value: 'john.doe@example.com',
            },
          ],
        },
      ],
    },
    {
      type: 'agorum.button',
      text: 'Contact',
      color: 'primary',
      size: 'm',
      weight: 'bold',
      icons: 'ionicon:mail',
      name: 'contactButton',
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Adress-card

Elemente rechtsbündig ausrichten

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 600,
  items: [
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let sample = {
  type: 'agorum.card',
  items: [
    {
      type: 'agorum.vertical',
      flex: 1,
      items: [
        {
          type: 'agorum.text',
          text: 'Some text',
        },
        // use a vertical, to create a spacer between the text and the buttons
        {
          type: 'agorum.vertical',
          height: 10,
        },
        {
          type: 'agorum.horizontal',
          spacing: 'm',
          items: [
            // use a flex vertical to align the buttons on the right side
            {
              type: 'agorum.vertical',
              flex: 1,
            },
            {
              type: 'agorum.button',
              text: 'Button 1',
              name: 'button1',
            },
            {
              type: 'agorum.button',
              text: 'Button 2',
              name: 'button2',
            },
            {
              type: 'agorum.button',
              text: 'Button 3',
              name: 'button3',
            },
          ],
        },
      ],
    },
  ],
};

widget.down('cardView').replace(sample);

widget;

Elemente rechtsbündig ausrichten

• Das erste Element ist ein Textelement (agorum.text), das den Text Some text anzeigt.
• Ein weiteres vertikales Layout mit einer Höhe von 10 Pixeln folgt, das als Abstandshalter dient und einen Abstand zwischen dem Text und den nachfolgenden Elementen erzeugt.
• Das letzte Element ist ein horizontales Layout (agorum.horizontal), das die Elemente von links nach rechts anordnet. Innerhalb dieses Layouts sind vier Elemente definiert: ein vertikales Layout und drei Schaltflächen.
• Das vertikale Layout im horizontalen Layout dient dazu, die drei Schaltflächen an die rechte Seite des card-Layouts zu schieben. Das Layout besitzt die Eigenschaft flex=1 und füllt dadurch den verfügbaren Platz vor den Schaltflächen aus.
• Die drei Schaltflächen (agorum.button) besitzen jeweils einen Text (Button 1, Button 2 und Button 3) sowie einen Namen, der dem Text entspricht. Diese Namen können Sie verwenden, um auf die Schaltflächen in anderen Teilen des Codes zu verweisen.

Mehrere cards dynamisch nebeneinander anzeigen

let aguila = require('common/aguila');

let widget = aguila.create({
  type: 'agorum.vbox',
  background: 'dark',
  width: 800,
  items: [
    {
      type: 'agorum.spacer',
      height: 10,
    },
    {
      name: 'cardView',
      type: 'agorum.cards.view',
    },
  ],
});

let card = num => ({
  type: 'agorum.card',
  minWidth: 300,
  flex: 1,
  badges: [
    {
      type: 'agorum.badge',
      text: new Date().toLocaleString(),
      color: 'primary',
      name: 'dateBadge-' + num,
    },
  ],
  items: [
    {
      type: 'agorum.horizontal',
      items: [
        {
          type: 'agorum.img',
          icon: 'ionicon:document',
          size: 40,
          name: 'icon-' + num,
        },
        {
          type: 'agorum.text',
          text: 'Card ' + num,
          weight: 'bold',
          name: 'headline-' + num,
        },
      ],
    },
    {
      type: 'agorum.text',
      html: '<p>This is the content of card ' + num + '.</p>',
      name: 'content-' + num,
    },
  ],
});

let sample = {
  type: 'agorum.horizontal',
  spacing: 'xl',
  wrap: true,
  items: [card(1), card(2), card(3), card(4), card(5), card(6)],
};

widget.down('cardView').replace(sample);

widget;

Mehrere cards dynamisch nebeneinander anzeigen

Dieses Beispiel zeigt ein horizontales Layout, das ein Array von sechs cards enthält.

• Das System verwendet die Eigenschaft wrap, damit cards automatisch in die nächste Zeile springen, wenn der Platz in der aktuellen Zeile nicht mehr ausreicht.
• Jede card besitzt eine minimale Breite von 300 Pixeln.