Details zu benutzerdefinierten Widgets

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 HTMLJSON, oder Markdown zurück. Markdown wird JSON im folgenden Format zurückgegeben:

   {"markdown":"markdown content"}

3. Das Dashboard zeigt den zurückgegebenen Wert HTML oder JSON an.

Wenn die Funktion zurückkehrtHTML, werden die meisten HTML Tags unterstützt. Sie können die Stile Cascading Style Sheets (CSS) 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 der Klasse von cwdb-no-default-styles hinzufügen. 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
    }
}

CSSStandardstil

Benutzerdefinierte Widgets bieten die folgenden CSS Standard-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 von drei einzelnen Backtick-Zeichen (```) umgeben ist. YAML 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>
```