Einzelheiten zu benutzerdefinierten Widgets finden Sie in CloudWatch - Amazon CloudWatch
Standard-CSS-StylingVerwenden des Beschreibungs-Parameters

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Einzelheiten zu benutzerdefinierten Widgets finden Sie in CloudWatch

Folgende Funktionen sind zulässig:

  1. Das CloudWatch Dashboard ruft die Lambda-Funktion auf, die den Widget-Code enthält. Es übergibt alle benutzerdefinierten Parameter, die im Widget definiert sind.

  2. Die Lambda-Funktion gibt eine Zeichenfolge von HTML, JSON oder Markdown zurück. Markdown wird als JSON im folgenden Format zurückgegeben:

    {"markdown":"markdown content"}

  3. Das Dashboard zeigt das zurückgegebene HTML oder JSON an.

Wenn die Funktion HTML zurückgibt, werden die meisten HTML-Tags unterstützt. Sie können Cascading Style Sheets (CSS)-Stile und Scalable Vector Graphics (SVG) verwenden, um anspruchsvolle Ansichten zu erstellen.

Der Standardstil von HTML-Elementen wie Links und Tabellen folgt dem Stil von CloudWatch Dashboards. Sie können diesen Stil mithilfe von Inline-Stilen anpassen, indem Sie das <style>-Tag verwenden. Sie können die Standardstile auch deaktivieren, indem Sie ein einzelnes HTML-Element in die Klasse cwdb-no-default-styles aufnehmen. Im folgenden Beispiel werden Standardstile deaktiviert: <div class="cwdb-no-default-styles"></div>.

Jeder Aufruf eines benutzerdefinierten Widgets an Lambda enthält ein widgetContext-Element mit den folgenden Inhalten, um dem Entwickler der Lambda-Funktion nützliche Kontextinformationen bereitzustellen.


{
  "widgetContext": {
    "dashboardName": "Name-of-current-dashboard",
    "widgetId": "widget-16",
    "accountId": "012345678901",
    "locale": "en",
    "timezone": {
      "label": "UTC",
      "offsetISO": "+00:00",
      "offsetInMinutes": 0
    },
    "period": 300,
    "isAutoPeriod": true,
    "timeRange": {
      "mode": "relative",
      "start": 1627236199729,
      "end": 1627322599729,
      "relativeStart": 86400012,
      "zoom": {
        "start": 1627276030434,
        "end": 1627282956521
      }
    },
    "theme": "light",
    "linkCharts": true,
    "title": "Tweets for Amazon website problem",
    "forms": {
      "all": {}
    },
    "params": {
      "original": "param-to-widget"
    },
    "width": 588,
    "height": 369
  }
}

Standard-CSS-Styling

Benutzerdefinierte Widgets bieten die folgenden Standard-CSS-Styling-Elemente:

  • Sie können die CSS-Klasse btn verwenden, um eine Schaltfläche hinzuzufügen. Es verwandelt einen Anker (<a>) in eine Schaltfläche wie im folgenden Beispiel:

    <a class="btn" href=https://amazon.com”>Open Amazon</a>

  • Sie können die CSS-Klasse btn btn-primary verwenden, um eine primäre Schaltfläche hinzuzufügen.

  • Die folgenden Elemente werden standardmäßig formatiert: Tabelle, Auswahl, Header (h1, h2 und h3), vorformatierter Text (pre), Eingabe und Textbereich.

Verwenden des Beschreibungs-Parameters

Wir empfehlen Ihnen dringend, den Parameter Beschreiben in Ihren Funktionen zu unterstützen, auch wenn er nur einen leeren String zurückgibt. Wenn Sie es nicht unterstützen und es im benutzerdefinierten Widget aufgerufen wird, zeigt es Widget-Inhalt an, als wäre es Dokumentation.

Wenn Sie den Parameter Beschreiben einschließen, gibt die Lambda-Funktion die Dokumentation im Markdown-Format zurück und tut nichts anderes.

Wenn Sie in der Konsole ein benutzerdefiniertes Widget erstellen, wird nach Auswahl der Lambda-Funktion die Schaltfläche Dokumentation abrufen angezeigt. Wenn Sie diese Schaltfläche wählen, wird die Funktion mit dem Parameter Beschreiben aufgerufen und die Dokumentation der Funktion zurückgegeben. Wenn die Dokumentation in Markdown gut formatiert ist, CloudWatch analysiert sie den ersten Eintrag in der Dokumentation, der in YAML von drei einzelnen Backtick-Zeichen (```) umgeben ist. Anschließend wird die Dokumentation automatisch in den Parametern aufgefüllt. Nachstehend finden Sie ein Beispiel für eine gut formatierte Dokumentation. 

``` yaml
echo: <h1>Hello world</h1>
```