# 有关 CloudWatch 中自定义小组件的详细信息
<a name="add_custom_widget_dashboard_about"></a>

自定义小组件的工作方式如下：

1. CloudWatch 控制面板调用包含小组件代码的 Lambda 函数。并传递在小组件中定义的任何自定义参数。

1. Lambda 函数返回 HTML、JSON 或 Markdown 字符串。Markdown 以 JSON 格式返回，格式如下：

   ```
   {"markdown":"markdown content"}
   ```

1. 控制面板显示返回的 HTML 或 JSON。

如果函数返回 HTML，则支持大多数 HTML 标签。您可以使用 Cascading 样式表 (CSS) 样式和可扩展矢量图形 (SVG) 来构建复杂的视图。

HTML 元素（例如链接和表格）的默认样式遵循 CloudWatch 控制面板的样式。您可以通过使用内联样式和 `<style>` 标签来自定义此样式。您还可以通过包含具有 `cwdb-no-default-styles` 类的单个 HTML 元素，停用默认样式。以下示例会停用默认样式：`<div class="cwdb-no-default-styles"></div>`。

自定义小组件对 Lambda 的每次调用都包含一个具有以下内容的 `widgetContext` 元素，以便为 Lambda 函数开发人员提供有用的上下文信息。

```
{
  "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
  }
}
```

## 默认 CSS 样式
<a name="add_custom_widget_styling"></a>

自定义小组件提供以下默认 CSS 样式元素：
+ 您可以使用 CSS 类 **btn** 添加按钮。它将锚点 (`<a>`) 转换为按钮，如以下示例所示：

  ```
  <a class="btn" href=https://amazon.com”>Open Amazon</a>
  ```
+ 您可以使用 CSS 类 **btn btn-primary** 添加主按钮。
+ 默认情况下，以下元素采用样式：**table（表）**、**select（选择）**、**headers (h1, h2, and h3)（标头（标头 1、标头 2 和 标头 3））**、**preformatted text (pre)（预先格式化的文本（预先））**、**input（输入）**和 **text area（文本区域）**。

## 使用描述参数
<a name="add_custom_widget_describe"></a>

我们强烈建议您在函数中支持 **describe（描述）**参数，即使它只返回一个空字符串。如果您不支持它，并在自定义小组件中将其调用，它会像显示文档一样显示小组件内容。

如果您包含 **describe（描述）**参数，Lambda 函数以 Markdown 格式返回文档，而不执行任何其他操作。

当您在控制台中创建自定义小组件时，在选择 Lambda 函数后，将出现一个 **Get documentation（获取文档）**按钮。如果选择此按钮，则会使用 **describe（描述）**参数调用该函数并返回该函数的文档。如果文档在 Markdown 中格式正确，CloudWatch 会解析文档中由 YAML 中的三个反引号字符 (```) 引起的第一个条目。然后，它会自动填充参数中的文档。以下是此类格式正确的文档示例。

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