# Detalhes sobre os widgets personalizados no CloudWatch
<a name="add_custom_widget_dashboard_about"></a>

Os widgets personalizados funcionam desta maneira:

1. O painel do CloudWatch chama a função Lambda que contém o código do widget. Ele aprova parâmetros personalizados que são definidos no widget.

1. A função Lambda retorna uma string de HTML, JSON ou Markdown. O Markdown é retornado como JSON no seguinte formato:

   ```
   {"markdown":"{{markdown content}}"}
   ```

1. O painel exibe o HTML ou JSON retornado.

Se a função retornar HTML, a maioria das etiquetas HTML será compatível. Você pode usar estilos Cascading Style Sheets (CSS) e gráficos vetoriais escaláveis (SVG) para criar exibições sofisticadas.

O estilo padrão de elementos HTML, como links e tabelas, segue o estilo dos painéis do CloudWatch. Você pode personalizar esse estilo com estilos em linha, usando a etiqueta `<style>`. Também é possível desativar os estilos padrão, incluindo um único elemento HTML com a classe de `cwdb-no-default-styles`. O exemplo a seguir desativa os estilos padrão: `<div class="cwdb-no-default-styles"></div>`.

Cada chamada feita por um widget personalizado para o Lambda inclui um elemento `widgetContext` com o seguinte conteúdo, para fornecer informações de contexto úteis ao desenvolvedor da função Lambda.

```
{
  "widgetContext": {
    "dashboardName": "Name-of-current-dashboard",
    "widgetId": "widget-16",
    "accountId": "012345678901",
    "locale": "en",
    "timezone": {
      "label": "UTC",
      "offsetISO": "+00:00",
      "offsetInMinutes": 0
    },
    "period": 300,
    "isAutoPeriod": true,
    "timeRange": {
      "mode": "relative",
      "start": 1627236199729,
      "end": 1627322599729,
      "relativeStart": 86400012,
      "zoom": {
        "start": 1627276030434,
        "end": 1627282956521
      }
    },
    "theme": "light",
    "linkCharts": true,
    "title": "Tweets for Amazon website problem",
    "forms": {
      "all": {}
    },
    "params": {
      "original": "param-to-widget"
    },
    "width": 588,
    "height": 369
  }
}
```

## Estilo CSS padrão
<a name="add_custom_widget_styling"></a>

Os widgets personalizados fornecem os seguintes elementos de estilo CSS padrão:
+ Você pode usar a classe de CSS **btn** para adicionar um botão. Ele gira uma âncora (`<a>`) em um botão como no exemplo a seguir:

  ```
  <a class="btn" href=https://amazon.com”>Open Amazon</a>
  ```
+ É possível usar a classe de CSS **btn btn-primary** para adicionar um botão primário.
+ Os seguintes elementos são estilizados por padrão: **table**,**select**, **cabeçalhos (h1, h2 e h3)**, **texto pré-formatado (pre)**, **input** e**área de texto**.

## Usar o parâmetro describe
<a name="add_custom_widget_describe"></a>

É altamente recomendável oferecer suporte ao **describe** em suas funções, mesmo que ele retorne apenas uma string vazia. Caso você não oferecça suporte, e ele for chamado no widget personalizado, ele exibirá o conteúdo do widget como se fosse documentação.

Se incluir o parâmetro **describe**, a função Lambda retornará a documentação no formato Markdown e não fará mais nada.

Quando você cria um widget personalizado no console, depois de selecionar a função Lambda, um botão **Get documentation** (Obter documentação) é exibido. Se você escolher este botão, a função será invocada com o parâmetro **describe**, e a documentação da função será retornada. Se a documentação estiver bem formatada em markdown, o CloudWatch analisará a primeira entrada na documentação que está rodeada por três caracteres de crase simples (```) no YAML. Em seguida, preencherá automaticamente a documentação nos parâmetros. Veja a seguir um exemplo dessa documentação bem formatada. 

```
``` yaml
echo: <h1>Hello world</h1>
```
```