# CloudWatch의 사용자 지정 위젯의 상호 작용
<a name="add_custom_widget_dashboard_interactivity"></a>

JavaScript가 허용되지는 않지만 반환된 HTML과의 상호 작용을 허용하는 다른 방법이 있습니다.
+ 팝업에 정보를 표시하고 클릭 시 확인을 요청하며 해당 요소가 선택되었을 때 Lambda 함수를 호출할 수 있는 `<cwdb-action>` 태그의 특수 구성으로 반환된 HTML의 요소에 태그를 지정할 수 있습니다. 예를 들어 Lambda 함수를 사용하여 AWS API를 호출하는 버튼을 정의할 수 있습니다. 기존 Lambda 위젯의 콘텐츠를 대체하거나 모달 내부에 표시되도록 반환된 HTML을 설정할 수 있습니다.
+ 반환된 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>
```

이 예는 위젯의 콘텐츠를 Lambda 함수에 대한 호출로 바꾸는 [**다음(Next)**] 버튼입니다.

```
<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>
```