Durchsuchbare Dokumentation aufrufen | Zurück zur Dokumentationsübersicht

Navigation: Dokumentationen agorum core > agorum core für Entwickler > agorum core cards

agorum.cards – Beispiele

Aktionen und Objekte in cards aufrufen

Sie können Links und Schaltflächen in einem decorator oder cardlet definieren, sodass sich bei einem Klick ein agorum core-Objekt öffnet oder eine agorum core smart assistant-Aktion ausgelöst wird.

Links und Schaltflächen in einem decorator definieren


Voraussetzungen

  1. Öffnen Sie das Projekt im agorum core explorer.
  2. Navigieren Sie in den Ordner js.
  3. Erstellen Sie über das Kontextmenü ein neues JS-Dokument, etwa mit dem Namen agorum-tests-cards-decorator-sample.js.
  4. Fügen Sie folgenden Code in das neue JS-Dokument ein: 
    let objects = require('common/objects');
let decorators = require('/agorum/roi/customers/agorum.cards/js/decorators');
let html = require('common/html');

// Funktion zur Erzeugung eines Links mit korrekt codiertem HTML
let link = (text, name) => '<a name="' + html.escape(name) + '">' + html.escape(text) + '</a>';

// Zu jedem Objekt soll in den Inhaltsbereich (content) etwas hinzugefügt werden
module.exports = (cardlet, object) =>
  decorators.with(cardlet, 'content', content => {
    let document = objects.find('/agorum/roi/Files/Demo/Willkommen.pdf');
    let folder = objects.find('/agorum/roi/Files/Demo');

    // Falls es content bereits durch einen anderen decorator gibt, soll dahinter unser decorator eingefügt werden
    // Es werden diverse Links eingefügt
    content.items = (content.items || []).concat([
      {
        type: 'agorum.vertical',
        items: [
          {
            type: 'agorum.text',
            html: 'Hier ist ein <a href="https://www.agorum.com/" target="_blank">Link zu agorum</a>',
          },
          {
            type: 'agorum.text',
            html:
              'Start einer agorum core-Aktion aus dem smart assistant: ' +
              link('Details anzeigen', 'action:Detailsanzeigen::' + document.UUID),
          },
          {
            type: 'agorum.text',
            html: 'Öffnen-Aktion eines Objekts aufrufen: ' + link('Ordner anzeigen', 'object:' + folder.UUID),
          },
          {
            type: 'agorum.img',
            size: 14,
            icon: 'agorum:circle;color=#5696e8|ionicon:document-text;color=white;scale=0.7',
            interactive: true,
            pointer: true,
            tooltip: 'Hier klicken, um Details zu öffnen',
            name: 'action:Detailsanzeigen::' + document.UUID,
          },
        ],
      },
    ]);
  });
  5. Registrieren Sie das neue JS-Dokument (decorator) über den agorum core template manager.
  6. Öffnen Sie in einem neuen Browserfenster die Suche und führen Sie eine Suche über den Filter Alles aus.

    Ergebnis: Jedes Objekt zeigt im Inhalt die definierten Links und das Symbol an.
    Links und Symbol im Inhalt eines Objekts
  7. Klicken Sie auf die Links oder das Symbol.

    Ergebnis: Die entsprechenden Aktionen erscheinen.

    Auf diese Art können Sie jede beliebige Aktion aus dem agorum core smart assistant-Konfigurator aufrufen, etwa auch Workflows starten oder Ähnliches.

Links und Schaltflächen in einem cardlet definieren


Voraussetzungen


cardlet anlegen

  1. Öffnen Sie das Projekt im agorum core explorer.
  2. Navigieren Sie in den Ordner js.
  3. Erstellen Sie über das Kontextmenü ein neues JS-Dokument, etwa mit dem Namen agorum-tests-cards-cardlets-links.js.
  4. Fügen Sie folgenden Code in das neue JS-Dokument ein: 
    let cards = require('/agorum/roi/customers/agorum.cards/js/cards');
let objects = require('common/objects');
let html = require('common/html');

// Name: agorum.tests.cards.agorumTestsCardsCardletsLinks

// Funktion zur Erzeugung eines Links mit korrekt codiertem HTML
let link = (text, name) => '<a name="' + html.escape(name) + '">' + html.escape(text) + '</a>';

// cardlet definieren
let build = (cx, def) => {
  cx.meta = {};

  let document = objects.find('/agorum/roi/Files/Demo/Willkommen.pdf');
  let folder = objects.find('/agorum/roi/Files/Demo');

  return {
    type: 'agorum.card',
    items: [
      {
        type: 'agorum.text',
        html: 'Hier ist ein <a href="https://www.agorum.com/" target="_blank">Link zu agorum</a>',
      },
      {
        type: 'agorum.text',
        html:
          'Start einer agorum core-Aktion aus dem smart assistant: ' +
          link('Details anzeigen', 'action:Detailsanzeigen::' + document.UUID),
      },
      {
        type: 'agorum.text',
        html: 'Öffnen-Aktion eines Objekts aufrufen: ' + link('Ordner anzeigen', 'object:' + folder.UUID),
      },
      {
        type: 'agorum.img',
        size: 14,
        icon: 'agorum:circle;color=#5696e8|ionicon:document-text;color=white;scale=0.7',
        interactive: true,
        pointer: true,
        tooltip: 'Hier klicken, um Details zu öffnen',
        name: 'action:Detailsanzeigen::' + document.UUID,
      },
    ],
  };
};

let event = cards.eventHandler();

module.exports = {
  build: build,
  event: event,
};
  5. Registrieren Sie das neue JS-Dokument (cardlet) über den agorum core template manager.

    Ergebnis: Sie erhalten den Namen des cardlets.
  6. Notieren Sie sich den Namen des cardlets, hier im Beispiel agorum.tests.cards.agorumTestsCardsCardletsLinks.

    Sie benötigen diesen Namen beim nachfolgenden Anlegen einer card-view.


card-view anlegen

Nachfolgend legen Sie eine card-view an, um das cardlet anzuzeigen.

  1. Erstellen Sie im Ordner js des Projekts über das Kontextmenü den Ordner aguila.
  2. Erstellen Sie im Ordner aguila ein neues JS-Dokument mit dem Namen test-card.js.
  3. Fügen Sie folgenden Code in das neue JS-Dokument ein: 
    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 = {
  // replace with the name of your cardlet
  type: 'agorum.tests.cards.agorumTestsCardsCardletsLinks',
};

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

widget;

    Hinweis: Fügen Sie bei type den notierten Namen des erstellten cardlets ein (siehe Schritt 6 unter cardlet anlegen).

  4. Klicken Sie oben auf Run.

    Ergebnis: Ein Dialog öffnet sich, in dem die definierten Links und das Symbol erscheinen.
    Links und Symbol im cardlet
  5. Klicken Sie auf die Links oder das Symbol.

    Ergebnis: Die entsprechenden Aktionen erscheinen.

    Auf diese Art können Sie jede beliebige Aktion aus dem agorum core smart assistant-Konfigurator aufrufen, etwa auch Workflows starten oder Ähnliches.

Mithilfe der Schaltfläche „mehr“ weiteren Inhalt anzeigen

Sie können cardlets interaktiv steuern. Das folgende Beispiel zeigt, wie Sie in einem cardlet mit der „Mehr“-Schaltfläche weiteren Inhalt anzeigen.

Voraussetzungen


cardlet anlegen

  1. Öffnen Sie das Projekt im agorum core explorer.
  2. Navigieren Sie in den Ordner js und erstellen Sie über das Kontextmenü den neuen Ordner cardlets.
  3. Erstellen Sie über das Kontextmenü ein neues JS-Dokument, etwa mit dem Namen agorum-tests-cards-cardlets-more.js.
  4. Fügen Sie folgenden Code in das neue JS-Dokument ein: 
    let cards = require('/agorum/roi/customers/agorum.cards/js/cards');
let html = require('common/html');

// Name: agorum.tests.cards.agorumTestsCardsCardletsMore

// Funktion zur Erzeugung eines Links mit korrekt codiertem HTML
let link = (text, name) => '<a name="' + html.escape(name) + '">' + html.escape(text) + '</a>';

// cardlet definieren
let draw = cx => {
  return {
    type: 'agorum.card',
    items: [
      {
        type: 'agorum.horizontal',
        items: [
          {
            type: 'agorum.text',
            html: 'Hier klicken, um mehr anzuzeigen: ' + link('Mehr', 'moreLink'),
            flex: 1,
          },
          {
            type: 'agorum.img',
            size: 14,
            icon: cx.meta.showMore ? 'mdi:expand-less' : 'mdi:expand-more',
            interactive: true,
            pointer: true,
            tooltip: 'Hier klicken, um mehr anzuzeigen',
            name: 'more',
          },
        ],
      },
      // show this only, if showMore=true
      cx.meta.showMore
        ? {
            type: 'agorum.text',
            html: 'Hier steht nun noch mehr!',
          }
        : null,
    ].filter(f => f), // empty element has to be filtered out
  };
};

// build the cardlet
let build = (cx, def) => {
  // set initial meta information
  cx.meta = cx.meta || {};
  cx.meta.showMore = cx.meta.showMore || false;

  return draw(cx);
};

let event = cards.eventHandler();

// click on more button
event.path('more').on('elementClicked', (cx, param) => {
  cx.meta.showMore = !cx.meta.showMore;
  cx.replace(draw(cx));
});

// click on a link
event.path().on('linkClicked', (cx, param) => {
  if (param === 'moreLink') {
    cx.meta.showMore = !cx.meta.showMore;
    cx.replace(draw(cx));
  }
});

module.exports = {
  build: build,
  event: event,
};
  5. Registrieren Sie das neue JS-Dokument (cardlet) über den agorum core template manager.

    Ergebnis: Sie erhalten den Namen des cardlets.
  6. Notieren Sie sich den Namen des cardlets, hier im Beispiel agorum.tests.cards.agorumTestsCardsCardletsMore.

    Sie benötigen diesen Namen beim nachfolgenden Anlegen einer card-view.


card-view anlegen

Nachfolgend legen Sie eine card-view an, um das cardlet anzuzeigen.

  1. Erstellen Sie im Ordner js des Projekts über das Kontextmenü den Ordner aguila.
  2. Erstellen Sie im Ordner aguila ein neues JS-Dokument mit dem Namen test-card.js.
  3. Fügen Sie folgenden Code in das neue JS-Dokument ein: 
    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 = {
  // replace with the name of your cardlet
  type: 'agorum.tests.cards.agorumTestsCardsCardletsLinks',
};

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

widget;

    Hinweis: Fügen Sie bei type den notierten Namen des erstellten cardlets ein (siehe Schritt 6 unter cardlet anlegen).

  4. Klicken Sie oben auf Run.

    Ergebnis: Das cardlet öffnet sich im eingeklappten Zustand.
    cardlet im eingeklappten Zustand
  5. Klicken Sie auf Mehr oder oben rechts auf .

    Ergebnis: Das cardlet klappt sich aus.
    cardlet im ausgeklappten Zustand