Interactividad en el widget personalizado

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>

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>