Terjemahan disediakan oleh mesin penerjemah. Jika konten terjemahan yang diberikan bertentangan dengan versi bahasa Inggris aslinya, utamakan versi bahasa Inggris.

# Rincian tentang widget kustom di CloudWatch
<a name="add_custom_widget_dashboard_about"></a>

Widget kustom bekerja seperti berikut ini:

1.  CloudWatch Dasbor memanggil fungsi Lambda yang berisi kode widget. Dasbor tersebut akan memasukkan parameter-parameter kustom apa pun yang ditentukan dalam widget.

1. Fungsi Lambda kemudian akan mengembalikan string HTML, JSON, atau Markdown. Markdown dikembalikan sebagai JSON dalam format berikut ini:

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

1. Dasboard akan menampilkan HTML atau JSON.

Jika fungsi mengembalikan HTML, maka sebagian besar tanda HTML didukung. Anda dapat menggunakan gaya Cascading Style Sheets (CSS) dan Scalable Vector Graphics (SVG) untuk membuat tampilan-tampilan yang canggih.

Gaya default elemen HTML seperti tautan dan tabel mengikuti gaya CloudWatch dasbor. Anda dapat menyesuaikan gaya ini dengan menggunakan gaya-gaya inline, dengan menggunakan tanda `<style>`. Anda juga dapat menonaktifkan gaya default dengan menyertakan elemen HTML tunggal dengan kelas `cwdb-no-default-styles`. Contoh berikut menonaktifkan gaya default: `<div class="cwdb-no-default-styles"></div>`.

Setiap panggilan oleh sebuah widget kustom ke Lambda akan menyertakan sebuah elemen `widgetContext` dengan konten-konten berikut, untuk menyediakan pengembang fungsi Lambda dengan informasi konteks yang berguna.

```
{
  "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
  }
}
```

## Penataan gaya CSS default
<a name="add_custom_widget_styling"></a>

Widget kustom menyediakan elemen-elemen penataan gaya CSS default berikut ini:
+ Anda dapat menggunakan kelas CSS **btn** untuk menambahkan sebuah tombol. Ia akan mengubah anchor (`<a>`) menjadi sebuah tombol seperti pada contoh berikut:

  ```
  <a class="btn" href=https://amazon.com”>Open Amazon</a>
  ```
+ Anda dapat menggunakan kelas CSS **btn btn-primary** untuk menambahkan sebuah tombol utama.
+ Elemen-elemen berikut ditata gayanya secara default: **tabel**, **pilih**, **header (h1, h2, dan h3)**, **teks yang telah diformat sebelumnya (pra)**, **input**, dan **area teks**.

## Menggunakan parameter describe
<a name="add_custom_widget_describe"></a>

Kami sangat menyarankan agar Anda mendukung parameter **describe** dalam fungsi Anda, bahkan jika parameter itu hanya mengembalikan sebuah string kosong. Jika Anda tidak mendukungnya, dan parameter itu dipanggil di widget kustom, maka parameter itu akan menampilkan konten widget seolah-olah itu adalah dokumentasi.

Jika Anda menyertakan parameter **describe**, maka fungsi Lambda akan mengembalikan dokumentasi dalam format Markdown dan tidak akan melakukan hal lain.

Saat Anda membuat sebuah widget kustom di konsol, setelah Anda memilih fungsi Lambda, tombol **Dapatkan dokumentasi** akan muncul. Jika Anda memilih tombol ini, maka fungsi akan diinvokasi dengan parameter **describe** dan akan mengembalikan dokumentasi fungsi. Jika dokumentasi diformat dengan baik dalam penurunan harga, CloudWatch parsing entri pertama dalam dokumentasi yang dikelilingi oleh tiga karakter backtick tunggal (```) di YAMAL. Kemudian, ia akan secara otomatis mengisi dokumentasi dalam parameter. Berikut ini adalah satu contoh dokumentasi yang diformat dengan baik. 

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