Le traduzioni sono generate tramite traduzione automatica. In caso di conflitto tra il contenuto di una traduzione e la versione originale in Inglese, quest'ultima prevarrà.

# Dettagli sui widget personalizzati in CloudWatch
<a name="add_custom_widget_dashboard_about"></a>

I widget personalizzati funzionano nel seguente modo:

1. La CloudWatch dashboard richiama la funzione Lambda contenente il codice del widget. Passa in tutti i parametri personalizzati definiti nel widget.

1. La funzione Lambda restituisce una stringa di HTML, JSON o Markdown. Il markdown viene restituito come JSON nel formato seguente:

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

1. Il pannello di controllo visualizza l'HTML o JSON restituito.

Se la funzione restituisce HTML, la maggior parte dei tag HTML sono supportati. Puoi utilizzare gli stili CSS (Cascading Style Sheets) e SVG (Scalable Vector Graphics) per creare viste complesse.

Lo stile predefinito degli elementi HTML come link e tabelle segue lo stile dei CloudWatch dashboard. Puoi personalizzare questo stile utilizzando gli stili in linea, utilizzando il tag `<style>`. Puoi anche disattivare gli stili predefiniti includendo un singolo elemento HTML con la classe di `cwdb-no-default-styles`. Nell'esempio seguente vengono disattivati gli stili predefiniti: `<div class="cwdb-no-default-styles"></div>`.

Ogni chiamata da un widget personalizzato a Lambda include un elemento `widgetContext` con i seguenti contenuti, per fornire informazioni utili sul contesto allo sviluppatore della funzione 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
  }
}
```

## Stile CSS predefinito
<a name="add_custom_widget_styling"></a>

I widget personalizzati forniscono i seguenti elementi stilistici CSS predefiniti:
+ È possibile utilizzare la classe CSS **btn** per aggiungere un pulsante. Trasforma un'ancora (`<a>`) in un pulsante come nell'esempio seguente:

  ```
  <a class="btn" href=https://amazon.com”>Open Amazon</a>
  ```
+ Puoi utilizzare la classe CSS **btn btn-primary** per aggiungere un pulsante primario.
+ Per impostazione predefinita, i seguenti elementi hanno lo stile: **table** (tabella), **select** (selezione), **headers (h1, h2, and h3)** (intestazioni (h1, h2 e h3)), **preformatted text (pre)** testo preformattato (pre)), **input** (inserimento) e **text area** (area di testo).

## Utilizzo del parametro describe
<a name="add_custom_widget_describe"></a>

Al termine, ti consigliamo di supportare il parametro **describe** nelle tue funzioni, anche se restituisce solo una stringa vuota. Se non lo supporti e viene chiamato nel widget personalizzato, visualizza il contenuto del widget come se fosse documentazione.

Se includi l'opzione **describe**, la funzione Lambda restituisce la documentazione in formato Markdown e non fa altro.

Quando crei un widget personalizzato nella console, dopo aver selezionato la funzione Lambda viene visualizzato un pulsante **Get documentation** (Ottieni documentazione). Se scegli questo pulsante, la funzione viene richiamata con il parametro **describe** e viene restituita la documentazione della funzione. Se la documentazione è ben formattata in markdown, CloudWatch analizza la prima voce della documentazione circondata da tre caratteri singoli (```) in YAML. Quindi, popola automaticamente la documentazione nei parametri. Di seguito è riportato un esempio di documentazione ben formattata. 

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