Interatividade no widget personalizado

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>

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>