# Detalles sobre los widgets personalizados en CloudWatch
<a name="add_custom_widget_dashboard_about"></a>

Los widgets personalizados funcionan de la siguiente manera:

1. El panel de CloudWatch llama a la función Lambda que contiene el código del widget. Se especifica en cualquier parámetro personalizado que se defina en el widget.

1. La función Lambda muestra una cadena de HTML, JSON o de Markdown. Markdown se muestra como JSON en el siguiente formato:

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

1. El panel muestra el HTML o JSON devuelto.

Si la función devuelve el HTML, la mayoría de las etiquetas HTML serán compatibles. Utilice estilos de Cascading Style Sheets (CSS) y Gráficos vectoriales escalables (SVG) para crear vistas sofisticadas.

El estilo predeterminado de los elementos HTML, como los enlaces y las tablas, siguen el estilo de los paneles de CloudWatch. Personalice este estilo con los estilos integrados mediante la etiqueta `<style>`. También puede desactivar los estilos predeterminados si incluye un único elemento HTML con la clase de `cwdb-no-default-styles`. En el siguiente ejemplo se desactivan los estilos predeterminados: `<div class="cwdb-no-default-styles"></div>`.

Cada llamada por un widget personalizado a Lambda incluye un elemento `widgetContext` con los siguientes contenidos, para proporcionar al desarrollador de funciones Lambda información de contexto útil.

```
{
  "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 predeterminado
<a name="add_custom_widget_styling"></a>

Los widgets personalizados proporcionan los siguientes elementos de estilo CSS predeterminados:
+ Utilice la clase CSS **btn** para agregar un botón. Un botón se convierte en ancla (`<a>`) como en el siguiente ejemplo:

  ```
  <a class="btn" href=https://amazon.com”>Open Amazon</a>
  ```
+ Utilice la clase CSS **btn btn-primary** para agregar un botón principal.
+ Los siguientes elementos tienen un estilo de forma predeterminada: **table** (tabla),**select** (seleccionar), **headers (H1, H2 y H3)** (cabeceras), **preformatted text (pre)** (texto preformateado [pre]), **input** (entrada) y **text area** (área de texto).

## Uso del parámetro de descripción
<a name="add_custom_widget_describe"></a>

Se recomienda que utilice el parámetro **describe** (describir) en las funciones, incluso si solo muestra una cadena vacía. Si no lo admite, y se llama en el widget personalizado, muestra el contenido del widget como si fuera documentación.

Si incluye el parámetro **describe** (describir), la función Lambda devuelve la documentación en formato Markdown y no realiza nada más.

Cuando se crea un widget personalizado en la consola, después de seleccionar la función Lambda, aparecerá un botón **Get documentation** (Obtener documentación). Si elige este botón, la función se invoca con el parámetro **describe** (describir) y se muestra la documentación de la función. Si la documentación está bien formateada en markdown, CloudWatch analiza la primera entrada de la documentación que está rodeada de tres comillas (```) en YAML. A continuación, rellena automáticamente la documentación en los parámetros. A continuación, se muestra un ejemplo de esta documentación bien formateada. 

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