Hinweisboxen erstellen (agorum.composite.notice)

Dieses Widget zeigt eine Hinweisbox an. Sie können das Widget verwenden, um Informationen optisch hervorzuheben. Dazu können Sie:

• HTML-Auszeichnungen innerhalb des Hinweistexts verwenden
• vordefinierte Standardboxen mit Voreinstellungen für Symbol und Farbe verwenden
• ein Symbol angeben
• die Hintergrundfarbe angeben
• Form-Aktionen verwenden, um Hinweisboxen zu ändern oder auszublenden

Verwendung

---

Sie verwenden Hinweisboxen in Form-Elementen:

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

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 800,
  height: 600,
  labelPosition: 'top',
  elements: [

    {
      type: 'agorum.composite.notice',
      name: 'boxWarning',
      html: 'Dies ist eine Hinweisbox.',
      preset: 'warning',
    },

  ],
});

form;

Beispiel für die Anzeige aller vorhandenen presets:

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

let PRESETS = ['cancel', 'danger', 'hint', 'info', 'question', 'settings', 'success', 'warning'];

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 800,
  height: 600,
  labelPosition: 'top',
  elements: PRESETS.map(preset => ({
    type: 'agorum.composite.notice',
    name: 'box_' + preset,
    html: 'Dies ist eine Hinweisbox mit preset: "' + preset + '"',
    preset: preset,
  })),
});

form;

Parameter

---

Eigenschaft	Beschreibung	Mögliche Werte
color	Definiert alternativ zu preset die Hintergrundfarbe der Hinweisbox.	'primary', 'secondary', 'tertiary', 'success', 'warning', 'danger', 'dark', 'medium', 'light', 'transparent', 'disabled'
hidden	Dient zur dynamischen Anzeige von Hinweisboxen durch Form-Aktionen.	boolescher Wert
html	Definiert den Text der Hinweisbox.	Zeichenkette mit HTML-Elementen
icon	Definiert alternativ zu preset das zu verwendende Symbol.	Alle Icon-Definitionen, die Sie über die Aktion Icon erstellen definieren können.
name	Definiert den Namen der Hinweisbox.	Zeichenkette
preset	Definiert die Voreinstellung (Symbol, Hintergrundfarbe) zur Anzeige der Hinweisbox. Alternativ können Sie icon und color angeben.	'warning', 'danger', 'success', 'settings', 'cancel', 'question', 'hint', 'info'  Hinweisboxen mit verschiedenen Voreinstellungen

Beispiele

---

Beispiel: Hinweisbox mit HTML-Text

Sie können Inline-HTML-Elemente verwenden, um Texte hervorzuheben, und mit Links auf weitere Informationen verweisen.

    {
      type: 'agorum.composite.notice',
      name: 'boxInfo',
      html: 'Dies ist eine Hinweisbox. Sie können damit verschiedene Arten von Hinweisen ausgeben und Informationen auch mit <b>HTML</b> hervorheben. Sogar die Verwendung von Links ist möglich: <a name="action:Detailsanzeigen::9999">Details anzeigen</a> oder <a href="https://www.agorum.com" target="_blank">agorum Website</a>',
      preset: 'info',
    },

Beispiel: Hinweisbox mit benutzerdefiniertem Symbol und Hintergrundfarbe

Sie können mit den Parametern icon und color gezielt ein Symbol und eine Farbe angeben, wenn Sie keine Voreinstellung verwenden möchten. In diesem Fall geben Sie preset nicht an. Wenn Sie icon und color weglassen, wird eine Hinweisbox ohne Symbol oder Hintergrundfarbe erstellt.

    {
      type: 'agorum.composite.notice',
      name: 'boxCustom',
      html: 'Hier sind Symbol und Hintergrundfarbe benutzerdefiniert.',
      icon: 'agorum:circle;color=#00b2cc|agorum:agorum-logo;color=white',
      color: 'light',
    },

Beispiel: Hinweisbox nach einer Benutzeraktion anzeigen oder ausblenden

Sie können Hinweisboxen nach einer bestimmten Benutzeraktion, etwa das Klicken auf eine Schaltfläche, anzeigen oder ausblenden. Dazu setzen Sie den Parameter hidden nach der Aktion nach Bedarf auf true oder false.

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

let boxText =
  'Dies ist eine Hinweisbox...';

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 800,
  height: 600,
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.button',
      name: 'hideBox',
      text: 'Hinweisbox verstecken/zeigen',
    },
    {
      name: 'name',
    },
    {
      name: 'description',
    },
    {
      type: 'agorum.composite.notice',
      name: 'boxWarning',
      html: boxText,
      hidden: true,
      preset: 'warning',
    },
  ],
});

form.on('action', action => {
  switch (action.name) {
    case 'hideBox':
      form.set('boxWarning.hidden', !form.get('boxWarning.hidden'));
      break;
  }
});

form;

 

Beispiel: Hinweisbox nach einer Benutzeraktion ändern

Sie können eine angezeigte Hinweisbox nach einer bestimmten Benutzeraktion, etwa das Klicken auf eine Schaltfläche, ändern, etwa um einen zusätzlichen Hinweis anzuzeigen. 

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

let boxText = 'Dies ist eine Hinweisbox.';

let form = aguila.create({
  type: 'agorum.composite.form.basic',
  width: 800,
  height: 600,
  labelPosition: 'top',
  elements: [
    {
      type: 'agorum.composite.form.element.button',
      name: 'changeBox',
      text: 'Hinweisbox ändern',
    },
    {
      name: 'name',
    },
    {
      name: 'description',
    },
    {
      type: 'agorum.composite.notice',
      name: 'boxWarning',
      html: boxText,
      preset: 'warning',
    },
  ],
});

form.on('action', action => {
  switch (action.name) {
    case 'changeBox':
      form.set('boxWarning.preset', 'success');
      form.set('boxWarning.html', 'Box wurde geändert: <i>' + form.get('boxWarning.html') + '</i>');
      break;
  }
});

form;