

# Interactividad en el widget personalizado en CloudWatch
<a name="add_custom_widget_dashboard_interactivity"></a>

Aunque JavaScript no está permitido, hay otras formas de permitir la interactividad con el HTML devuelto.
+ Cualquier elemento en el HTML devuelto se puede etiquetar con una configuración especial en una etiqueta `<cwdb-action>`, que muestra información en ventanas emergentes, pide confirmación de clics y llama a cualquier función Lambda cuando se elige ese elemento. Por ejemplo, puede definir botones que llaman a una API de AWS cualquiera mediante el uso de una función Lambda. El HTML devuelto se puede configurar para reemplazar el contenido del widget Lambda existente o para mostrarlo dentro de un modal.
+ El HTML devuelto puede incluir vínculos que abren nuevas consolas, que abren otras páginas de clientes o que cargan otros paneles.
+ El HTML puede incluir el atributo `title` para un elemento, que proporciona información adicional si el usuario sitúa el cursor en ese elemento. 
+ El elemento puede incluir selectores CSS, como `:hover`, que puede invocar animaciones u otros efectos CSS. También puede mostrar u ocultar elementos en la página.

## Definición y uso de <cwdb-action>
<a name="add_custom_widget_dashboard_cwdb"></a>

El elemento `<cwdb-action>` define un comportamiento en el elemento inmediatamente anterior. El contenido de `<cwdb-action>` es HTML para mostrar o un bloque JSON de parámetros para pasar a una función Lambda.

A continuación se muestra un ejemplo de un 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>
```
+ **acción**: Lls valores válidos son `call`, que llama a una función Lambda, y `html`, que muestra cualquier HTML contenido en `<cwdb-action>`. El valor predeterminado es `html`.
+ **confirmación**: muestra un mensaje de confirmación que se debe confirmar antes de que se lleve a cabo la acción, lo que le permite al cliente la cancelación.
+ **visualización**: los valores válidos son `popup` y `widget`, que reemplaza el contenido del widget en sí. El valor predeterminado es `widget`.
+ **punto de enlace**: el Nombre de recurso de Amazon (ARN) de la función Lambda que se va a invocar. Esto es obligatorio si la `action` es `call`.
+ **evento**: define el evento del elemento anterior que invoca la acción. Los valores válidos son `click`, `dblclick` y `mouseenter`. El evento `mouseenter` solo se puede utilizar en combinación con la acción `html`. El valor predeterminado es `click`. 

**Ejemplos**

A continuación, se muestra un ejemplo de cómo se utiliza la etiqueta `<cwdb-action>` para crear un botón que reinicie una instancia de Amazon EC2 mediante una llamada a función de Lambda. Muestra si la llamada fue exitosa o fallida en una ventana emergente.

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

El siguiente ejemplo muestra más información en una ventana emergente.

```
<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 es un ejemplo del botón **Next** (Siguiente) que reemplaza el contenido de un widget con una llamada a una función 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>
```