# CloudWatch 中自定义小组件中的交互性
<a name="add_custom_widget_dashboard_interactivity"></a>

尽管不允许使用 JavaScript，但还有其他方法允许与返回的 HTML 进行交互。
+ 返回的 HTML 中的任何元素都可以在 `<cwdb-action>` 标签中使用特殊配置进行标记，该配置可以在弹出窗口中显示信息，在点击时要求确认，并在选择该元素时调用任何 Lambda 函数。例如，您可以定义使用 Lambda 函数调用任何 Amazon API 的按钮。可以将返回的 HTML 设置为替换现有 Lambda 小组件的内容，或在模式中显示。
+ 返回的 HTML 可以包含打开新控制台、打开其他客户页面或加载其他控制面板的链接。
+ HTML 可以包含元素的 `title` 属性，如果用户将鼠标悬停在该元素上，它会显示更多信息。
+ 元素可以包含 CSS 选择器，如 `:hover`，它可以调用动画或其他 CSS 效果。该元素可以包含 CSS 选择器，例如，可以调用动画或其他 CSS 效果。您还可以在页面中显示或隐藏元素。您还可以显示或隐藏页面中的元素。

## <cwdb-action> 定义和用法
<a name="add_custom_widget_dashboard_cwdb"></a>

`<cwdb-action>` 元素定义了前一个元素的行为。`<cwdb-action>` 的内容为要显示的 HTML 或要传递给 Lambda 函数的参数的 JSON 数据块。

以下是 `<cwdb-action>` 元素的示例。

```
<cwdb-action 
     action="call|html" 
     confirmation="message" 
     display="popup|widget" 
     endpoint="<lambda ARN>" 
     event="click|dblclick|mouseenter">  
 
     html | params in JSON
</cwdb-action>
```
+ **操作** – 有效值为 `call`，会调用 Lambda 函数并且显示包含在 `<cwdb-action>` 中的任何 HTML 的 `html`。默认值为 `html`。
+ **确认** – 显示在执行操作之前必须确认的确认消息，允许客户取消。
+ **显示** – 有效值为 `popup` 和 `widget`，会替换小组件本身的内容。默认值为 `widget`。
+ **端点** – 要调用的 Lambda 函数的 Amazon Resource Name (ARN)。如果 `action` 是 `call`，则这是必需的。
+ **事件** – 定义上一个调用操作的元素上的事件。有效值包括 `click`、`dblclick` 和 `mouseenter`。`mouseenter` 事件仅能与 `html` 操作结合使用。默认值为 `click`。

**示例**

以下示例说明了如何使用 `<cwdb-action>` 标签创建按钮，该按钮可使用 Lambda 函数调用重启 Amazon EC2 实例。此选项会在弹出窗口中显示呼叫成功或失败。

```
<a class="btn">Reboot Instance</a>
<cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:rebootInstance" display="popup">  
       { "instanceId": "i-342389adbfef" }
</cwdb-action>
```

下一个示例会在弹出窗口中显示更多信息。

```
<a>Click me for more info in popup</a>
<cwdb-action display="popup"> 
   <h1>Big title</h1>
   More info about <b>something important</b>.
</cwdb-action>
```

此示例为 **Next（下一步）**按钮，该按钮使用对 Lambda 函数的调用替换小组件的内容。

```
<a class="btn btn-primary">Next</a>
<cwdb-action action="call" endpoint="arn:aws:lambda:us-east-1:123456:function:nextPage"> 
   { "pageNum": 2 }
</cwdb-action>
```