# CloudWatch のカスタムウィジェットのインタラクティブ性
<a name="add_custom_widget_dashboard_interactivity"></a>

JavaScript が許可されていなくても、返された HTML とのインタラクティブ性を許可する他の方法があります。
+ 返された HTML 内のすべての要素は、`<cwdb-action>` タグの特別な設定でタグ付けすることができ、その要素が選択されたときに、ポップアップで情報を表示したり、クリック時に確認を求めたり、任意の Lambda 関数を呼び出したりすることができます。例えば、Lambda 関数を使用して任意の AWS API を呼び出すボタンを定義できます。返される HTML は、既存の Lambda ウィジェットのコンテンツを置き換えるか、モーダル内に表示するように設定できます。
+ 返される HTML には、新しいコンソールを開いたり、他の顧客のページを開いたり、他のダッシュボードを読み込んだりするためのリンクを含めることができます。
+ HTML には、要素の `title` 属性を含めることができます。これにより、ユーザーがその要素の上にカーソルを置いた場合に追加情報が提供されます。
+ 要素には、アニメーションやその他の CSS 効果を呼び出すことができる `:hover` などの 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>
```
+ **action** — 有効な値は、Lambda 関数を呼び出す `call` と、`<cwdb-action>` に含まれるすべての HTML を表示する `html` です。デフォルトは `html` です。
+ **confirmation** — 把握する必要のあるアクションを実行する前に確認メッセージを表示し、お客様がキャンセルできるようにします。
+ **display** — 有効な値は `popup` および `widget` で、ウィジェット自体の内容を置き換えます。デフォルトは `widget` です。
+ **endpoint** － 呼び出す Lambda 関数の Amazon リソースネーム (ARN)。これは、`action` が `call` である場合に必要です。
+ **event** — アクションを呼び出す前の要素のイベントを定義します。有効な値は、`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>
```