# Interatividade no widget personalizado no CloudWatch
<a name="add_custom_widget_dashboard_interactivity"></a>

Mesmo que o JavaScript não seja permitido, há outras maneiras de permitir a interatividade com o HTML retornado.
+ Qualquer elemento no HTML retornado pode ser marcado com configuração especial em uma etiqueta `<cwdb-action>`, que pode exibir informações em pop-ups, solicitar confirmação em cliques e chamar qualquer função Lambda quando esse elemento for escolhido. Por exemplo, é possível definir botões que chamem qualquer API da AWS usando uma função Lambda. O HTML retornado pode ser definido para substituir o conteúdo do widget do Lambda existente ou ser exibido dentro de um modal.
+ O HTML retornado pode conter links que abrem novos consoles, abrem outras páginas de clientes ou carregam outros painéis.
+ O HTML pode incluir o atributo `title` em um elemento, o que fornecerá informações adicionais se o usuário passar o mouse sobre esse elemento.
+ O elemento pode incluir seletores CSS, como `:hover`, que pode invocar animações ou outros efeitos de CSS. Também é possível mostrar ou ocultar elementos na página.

## Definição e uso do <cwdb-action>
<a name="add_custom_widget_dashboard_cwdb"></a>

O elemento `<cwdb-action>` define um comportamento no elemento imediatamente anterior. O conteúdo do `<cwdb-action>` é HTML para exibir ou um bloco JSON de parâmetros para passar para uma função Lambda.

A seguir há um exemplo de um elemento `<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**: os valores válidos são `call`, que chama uma função Lambda, e `html`, que exibe qualquer HTML contido em `<cwdb-action>`. O padrão é `html`.
+ **confirmation**: exibe uma mensagem de confirmação que deve ser confirmada antes da ação ser executada, permitindo que o cliente cancele.
+ **display**: os valores válidos são `popup` e `widget`, que substituem o conteúdo do próprio widget. O padrão é `widget`.
+ **endpoint**: o nome do recurso da Amazon (ARN) da função Lambda a ser invocada. Isso será necessário se `action` for `call`.
+ **event**: define o evento no elemento anterior que invoca a ação. Os valores válidos são `click`, `dblclick` e `mouseenter`. O evento `mouseenter` só pode ser usado em combinação com a ação `html`. O padrão é `click`. 

**Exemplos**

Veja a seguir um exemplo de como usar a etiqueta `<cwdb-action>` para criar um botão que reinicializa uma instância do Amazon EC2 usando uma chamada de função Lambda. Exibe o êxito ou a falha da chamada em um pop-up.

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

O próximo exemplo exibe mais informações em um pop-up.

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

Este exemplo é um botão **Next** (Próximo) que substitui o conteúdo de um widget por uma chamada para uma função 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>
```