### Setting Data with t.set()

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Demonstrates how to set data using the t.set() method, including setting a single key-value pair, an object of key-value pairs, or data for a specific card ID. It also includes an example of checking write permissions before setting data.

```APIDOC
## POST /websites/developer_atlassian_cloud_trello_power-ups

### Description
Sets data within a Trello Power-Up. This can be a single key-value pair, multiple key-value pairs using an object, or data associated with a specific card ID. It also includes logic for checking user permissions before attempting to set data.

### Method
POST

### Endpoint
/websites/developer_atlassian_cloud_trello_power-ups

### Parameters
#### Path Parameters
- **scope** (string) - Required - The scope of the data (e.g., 'card', 'board', 'member', 'organization').
- **visibility** (string) - Required - The visibility of the data ('shared' or 'private').
- **key** (string or object) - Required - The key to set, or an object containing multiple key-value pairs.
- **value** (any) - Optional - The value to set for the key (only used when 'key' is a string).
- **cardId** (string) - Optional - The ID of the card to set data for (if not operating on the current card context).

#### Query Parameters
None

#### Request Body
- **myKey** (any) - Required - The key for the data.
- **otherKey** (any) - Required - Another key for the data.
- **enabled** (boolean) - Required - A boolean flag.

### Request Example
```json
{
  "example": "const t = window.TrelloPowerUp.iframe();\nawait t.set(\"card\", \"shared\", \"myKey\", \"myValue\");"
}
```

### Request Example (Object)
```json
{
  "example": "const t = window.TrelloPowerUp.iframe();\nawait t.set(\"card\", \"shared\", { myKey: \"myValue\", more: 25, enabled: true });"
}
```

### Request Example (Card ID)
```json
{
  "example": "const t = window.TrelloPowerUp.iframe();\nawait t.set(\"542b0bd40d309dc6eba7ec91\", \"shared\", \"myKey\", \"myValue\");"
}
```

### Request Example (Permissions Check)
```json
{
  "example": "const t = window.TrelloPowerUp.iframe();\nconst permissions = t.getContext().permissions;\nif (permissions.board === \"write\") {\n  await t.set(\"board\", \"shared\", { myKey: \"myValue\", more: 25, enabled: true });\n}"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the operation was successful.

#### Response Example
```json
{
  "status": "success"
}
```

### Errors
- `Invalid value for scope.`
- `Invalid value for visibility.`
- `PluginData length of 4096 characters exceeded.`
- `Detected potential secret. You should never store secrets like tokens in shared pluginData.`
```

--------------------------------

### Get All Plugin Data with t.getAll() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Illustrates how to retrieve all plugin data stored across all scopes and visibilities currently in context using the t.getAll() method. The comprehensive data is then logged to the console. Requires Trello Power-Up iframe initialization.

```javascript
const t = window.TrelloPowerUp.iframe();

const data = await t.getAll();
console.log(JSON.stringify(data, null, 2));
```

--------------------------------

### Get Plugin Data with Default Value using t.get() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Illustrates retrieving plugin data with a fallback default value if the specified key does not exist. This example fetches data from a board's shared scope and logs it, providing 'Uh oh, not yet set' if 'myKey' is not found. Requires Trello Power-Up iframe initialization.

```javascript
const t = window.TrelloPowerUp.iframe();

const data = await t.get("board", "shared", "myKey", "Uh oh, not yet set");
console.log(JSON.stringify(data, null, 2));
```

--------------------------------

### t.getAll() - Retrieve All Plugin Data

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Retrieves all plugin data for all scopes and visibilities currently in context.

```APIDOC
## t.getAll()

### Description
Return all pluginData for all scopes & visibilities currently in context.

### Method
JavaScript Function

### Parameters
None

### Request Example
```javascript
const t = window.TrelloPowerUp.iframe();
const data = await t.getAll();
console.log(JSON.stringify(data, null, 2));
```

### Response
#### Success Response
- Returns an object containing all plugin data across all scopes and visibilities.

#### Response Example
```json
{
  "board": {
    "shared": {
      "enabled": true
    },
    "private": {
      "shh": "its a secret"
    }
  },
  "organization": {
    "shared": {
      "interval": 1500
    }
  }
}
```
```

--------------------------------

### Link CSS and JavaScript for Power-Up

Source: https://developer.atlassian.com/cloud/trello/power-ups/color-theme-compliance/using-atlassian-design-tokens

Shows the necessary HTML structure to link the Power-Up's CSS file, the Trello Power-Up library, and the Power-Up's JavaScript file. This setup is crucial for theme compliance and Power-Up initialization.

```html
<!-- card-back-section.html -->
<html>
  <head>
    <link rel="stylesheet" href="https://p.trellocdn.com/power-up.min.css" />
    <link rel="stylesheet" href="./css/card-back-section.css" />
    <script src="https://p.trellocdn.com/power-up.min.js"></script>
  </head>
  <body>
    <div class="my-component">...</div>
  </body>
  <script src="./js/card-back-section.js"></script>
</html>
```

--------------------------------

### Get All Plugin Data with Trello Power-Ups Client Library

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Retrieves all plugin data associated with a specific scope and visibility. This is useful for fetching multiple key-value pairs at once. This method is part of the Power-Up Client Library and assumes `t` is available.

```javascript
t.getAll(scope, visibility)
```

--------------------------------

### Get Plugin Data from a Specific Card with t.get() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Demonstrates how to retrieve plugin data for a specific key from a particular card's shared scope by providing the card's ID to the t.get() method. The fetched data is logged to the console. Requires Trello Power-Up iframe initialization.

```javascript
const t = window.TrelloPowerUp.iframe();

const data = await t.get("542b0bd40d309dc6eba7ec91", "shared", "myKey");
console.log(JSON.stringify(data, null, 2));
```

--------------------------------

### Get All Plugin Data for a Scope with t.get() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Shows how to retrieve all plugin data associated with a specific scope and visibility (e.g., board's shared data) using the t.get() method without specifying a key. The retrieved data is then logged to the console. Requires Trello Power-Up iframe initialization.

```javascript
const t = window.TrelloPowerUp.iframe();

const data = await t.get("board", "shared");
console.log(JSON.stringify(data, null, 2));
```

--------------------------------

### Trello Power-Up Card Detail Badges with JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/capabilities/card-detail-badges

This JavaScript code demonstrates how to initialize Trello Power-Ups and define card detail badges. It includes examples of dynamic badges that refresh automatically, static badges, badges that open popups, and badges that link to URLs. The code relies on the TrelloPowerUp library.

```javascript
window.TrelloPowerUp.initialize({
  "card-detail-badges": function (t, opts) {
    return t
      .card("name")
      .get("name")
      .then(function (cardName) {
        console.log("We just loaded the card name for fun: " + cardName);

        return [
          {
            // dynamic badges can have their function rerun after a set number
            // of seconds defined by refresh. Minimum of 10 seconds.
            dynamic: function () {
              // we could also return a Promise that resolves to this
              // as well if we needed to do something async first
              return {
                title: "Detail Badge",
                text: "Dynamic " + (Math.random() * 100).toFixed(0).toString(),
                color: randomBadgeColor(),
                refresh: 10, // in seconds
              };
            },
          },
          {
            // its best to use static badges unless you need your badges
            // to refresh you can mix and match between static and dynamic
            title: "Detail Badge",
            text: "Static",
            color: null,
          },
          {
            // card detail badges (those that appear on the back of cards)
            // also support callback functions so that you can open for example
            // open a popup on click
            title: "Popup Detail Badge",
            text: "Popup",
            callback: function (t, opts) {
              // function to run on click
              // do something
            },
          },
          {
            // or for simpler use cases you can also provide a url
            // when the user clicks on the card detail badge they will
            // go to a new tab at that url
            title: "URL Detail Badge",
            text: "URL",
            url: "https://trello.com/home",
            target: "Trello Landing Page", // optional target for above url
          },
        ];
      });
  },
});
```

--------------------------------

### Use t.localizeKey to Get Localized Strings

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/localization

Shows how to use the `t.localizeKey` method to retrieve a localized string based on a provided key and optional data for replacements. This method synchronously returns the localized string by utilizing the `window.localizer.localize` function.

```javascript
window.TrelloPowerUp.initialize({
  'card-buttons': function (t, opts) {
    return [{
      text: t.localizeKey('btn-name', { name: 'Trello' }),
      url: 'https://developer.atlassian.com/cloud/trello/',
    }];
  }
});
```

--------------------------------

### Server-side JWT Validation (NodeJS Example)

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/t-jwt

This snippet demonstrates how to decode and validate a Trello JWT on your server using the 'jsonwebtoken' library. It includes fetching Trello's public keys and verifying the JWT signature.

```APIDOC
## POST /api/validate-jwt

### Description
Validates a Trello JWT to ensure secure communication and identify the Trello user making the request.

### Method
POST

### Endpoint
`/api/validate-jwt`

### Parameters
#### Request Body
- **token** (string) - Required - The JWT token generated by `t.jwt()`.
- **YOUR-POWER-UP-ID** (string) - Required - Your Power-Up's unique identifier.

### Request Example
```json
{
  "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."
}
```

### Response
#### Success Response (200)
- **decodedToken** (object) - The decoded and validated JWT payload, containing user and Power-Up information.

#### Response Example
```json
{
  "decodedToken": {
    "idMember": "60d5ecf1b4a3f30019a3b4c5",
    "idPlugin": "YOUR-POWER-UP-ID",
    "username": "exampleuser",
    "exp": 1624665600,
    "iat": 1624662000
  }
}
```

#### Error Response (401)
- **error** (string) - An error message indicating why the JWT validation failed (e.g., 'Unexpected plugin', 'Invalid signature').

### Notes
- It is recommended to poll the Trello public keys endpoint (`https://api.trello.com/1/resource/jwt-public-keys`) daily or hourly.
- Implement logic to re-fetch public keys upon encountering a signature verification error.
```

--------------------------------

### Set a Single Key/Value Pair using t.set() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Illustrates how to set a single key and its corresponding value for a specific scope and visibility using the t.set() method in JavaScript. This is a straightforward way to update individual data points.

```javascript
const t = window.TrelloPowerUp.iframe();

await t.set("card", "shared", "myKey", "myValue");
```

--------------------------------

### Troubleshooting t.popup() Context Issues - JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/ui-functions/popup

This example demonstrates how to resolve context loss when using `t.popup()` within promise chains. It shows the incorrect pattern of calling `t.popup()` inside a `.then()` block and the correct pattern using `async` and `await` to ensure the `t` context is maintained.

```javascript
callback: function (t) {
  t.card("checklists").then((data) => {
    t.popup({...}); // this can error
  });
},

```

```javascript
callback: async function (t) {
  await t.card("checklists").then((data) => {
    t.popup({...}); // no more error!
  });
},

```

--------------------------------

### Initialize Trello Power-Up Client

Source: https://developer.atlassian.com/cloud/trello/power-ups/rest-api-client

Initializes the Trello Power-Up client library with essential configuration options. This includes declaring capabilities and providing authentication details like appKey, appName, and optionally appAuthor. This setup is crucial for enabling the REST API client and other Power-Up functionalities.

```javascript
window.TrelloPowerUp.initialize(
  {
    // ...
    // This is where you declare your capabilities
    // ...
  },
  {
    appKey: "my-trello-key",
    appName: "My Power-Up",
    appAuthor: "My Company",
  }
);
```

```javascript
var t = window.TrelloPowerUp.iframe({
  appKey: "my-trello-key",
  appName: "My Power-Up",
  appAuthor: "My Company",
});
```

--------------------------------

### Accessing Plugin Data

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Data stored via `t.set` is only available via GET requests on the objects to whose context the data has been stored. For instance, to access the data stored within the context of a card you can make a GET request to /cards/{id}/pluginData. You can do the same for boards as well. Currently, PUT, POST, and DELETE methods are not supported for managing `pluginData`.

```APIDOC
## GET /cards/{id}/pluginData

### Description
Retrieves plugin data associated with a specific card.

### Method
GET

### Endpoint
`/cards/{id}/pluginData`

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the card to retrieve plugin data for.

### Response
#### Success Response (200)
- **pluginData** (object) - An object containing the plugin data for the specified card.

#### Response Example
```json
{
  "someKey": "someValue"
}
```

## GET /boards/{id}/pluginData

### Description
Retrieves plugin data associated with a specific board.

### Method
GET

### Endpoint
`/boards/{id}/pluginData`

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the board to retrieve plugin data for.

### Response
#### Success Response (200)
- **pluginData** (object) - An object containing the plugin data for the specified board.

#### Response Example
```json
{
  "someKey": "someValue"
}
```
```

--------------------------------

### Initialize Trello Power-Up with Popup Callback

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/t-notifyparent

Initializes the Trello Power-Up by defining a 'show-settings' handler that opens a popup. The popup is configured with a callback function 'onDone' to be executed upon completion. This is useful for handling actions initiated within a popup.

```javascript
var onDone = function (t, opts) {
  console.log('Hey There');
};

window.TrelloPowerUp.initialize({
  'show-settings': function (t, opts) {
    return t.popup({
      callback: onDone,
      title: 'Settings',
      url: './settings.html',
      height: 184
    });
  }
});
```

--------------------------------

### Initialize Custom Localizer with Trello Power-Ups

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/localization

Demonstrates how to manually initialize a localizer for Trello Power-Ups using a utility function. This approach allows for setting the locale and providing localization settings, ensuring localization methods are available after the promise resolves.

```javascript
var i18n_settings = {
  defaultLocale: 'en',
  supportedLocales: ['en', 'fr'],
  resourceUrl: './strings/{locale}.json'
};

var t = window.TrelloPowerUp.iframe();

window.locale = /[?&]locale=([w-]+)/.exec(location.search)[1];

window.TrelloPowerUp.util.initLocalizer(window.locale, { localization: i18n_settings })
.then(() => {
  // t.localize methods are now available
  t.localizeNode(document.getElementById('content'));
});
```

--------------------------------

### Subscribe to Trello Theme Changes in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/color-theme-compliance/using-atlassian-design-tokens

This example demonstrates how to subscribe to Trello theme changes using plain JavaScript. It logs the current theme, retrieves a computed color token, and updates an element's background color. It also shows how to unsubscribe from theme changes when no longer needed.

```javascript
// card-back-section.js
const t = window.TrelloPowerUp.iframe();

const myElement = document.getElementById('my-element');

const unsubThemeChangeListener = t.subscribeToThemeChanges((theme) => {
  console.log('Recalculating color.background.information for theme: ', theme);

  const infoBgColor = t.getComputedColorToken(
    'color.background.information',
    'lightblue'
  );

  myElement.style.backgroundColor = infoBgColor;
});

... 

// After we're done listening to theme changes, we can unsubscribe
unsubThemeChangeListener();

```

--------------------------------

### Get Plugin Data with t.get() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Demonstrates how to retrieve plugin data for a specific key from a board's shared scope using the t.get() method. It logs the retrieved data to the console. This function requires the Trello Power-Up iframe to be initialized.

```javascript
const t = window.TrelloPowerUp.iframe();

const data = await t.get("board", "shared", "myKey");
console.log(JSON.stringify(data, null, 2));
```

--------------------------------

### Implement attachment-thumbnail with Authorization Prompt in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/capabilities/attachment-thumbnail

This JavaScript code extends the `attachment-thumbnail` implementation to include an authorization prompt. If a park name is found, it returns an object with title, image, and an `initialize` property that points to an authorization iframe. This requires the TrelloPowerUp library and a `parkMap` object.

```javascript
window.TrelloPowerUp.initialize({
  'attachment-thumbnail': function (t, options) {
    var parkName = formatNPSUrl(t, options.url);
    if (parkName){
      // return an object with some or all of these properties:
      // title, image, modified (Date), created (Date),
      // createdBy, modifiedBy
      return {
         title: parkName,
        image: {
          url: './images/nps.svg',
          logo: true // false if you are using a thumbnail of the content
        },
        initialize: {
          type: 'iframe',
          url: t.signUrl(TrelloPowerUp.util.relativeUrl('authorize-link.html'))
        }
      };
    } else {
      throw t.NotHandled();
    }
  }
});
```

--------------------------------

### Get Trello Context with Power-Ups Client Library

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Retrieves the current context of the Trello Power-Up. This includes information about the current board, card, member, etc., which can be used to determine the scope of operations. This method is part of the Power-Up Client Library and assumes `t` is available.

```javascript
t.getContext()
```

--------------------------------

### Initialize show-settings Capability in Trello Power-Up (JavaScript)

Source: https://developer.atlassian.com/cloud/trello/power-ups/capabilities/show-settings

This JavaScript code snippet demonstrates how to initialize the 'show-settings' capability for a Trello Power-Up. It defines a function that Trello calls when a user clicks the gear icon, returning a popup with a specified title, URL, and height for the settings interface. This is crucial for providing a user-friendly configuration experience.

```javascript
window.TrelloPowerUp.initialize({
  'show-settings': function(t, options){
    // when a user clicks the gear icon by your Power-Up in the Power-Ups menu
    // what should Trello show. We highly recommend the popup in this case as
    // it is the least disruptive, and fits in well with the rest of Trello's UX
    return t.popup({
      title: 'Custom Fields Settings',
      url: './settings.html',
      height: 184 // we can always resize later
    });
  }
});
```

--------------------------------

### Get Plugin Data with Trello Power-Ups Client Library

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Retrieves plugin data stored against a Trello object. It requires specifying the scope, visibility, and key of the data to retrieve. An optional default value can be provided if the data is not found. This method is part of the Power-Up Client Library and assumes `t` is available.

```javascript
t.get(scope, visibility, key, default)
```

--------------------------------

### Color Theme Compliance (Beta)

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/t-arg

Information about REST API client for color theme compliance.

```APIDOC
## Color Theme Compliance (Beta)

### Description
This section details the use of the REST API Client for ensuring color theme compliance within Trello Power-Ups. This feature is currently in Beta.

### REST API Client
*   Allows Power-Ups to adhere to Trello's color theme guidelines.
*   Provides methods for interacting with Trello's API in a theme-aware manner.
```

--------------------------------

### Removing Data with t.remove()

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Explains how to remove data using the t.remove() method, allowing for the removal of a single key or multiple keys at once.

```APIDOC
## DELETE /websites/developer_atlassian_cloud_trello_power-ups

### Description
Removes data associated with a specific key or an array of keys from Trello Power-Up storage.

### Method
DELETE

### Endpoint
/websites/developer_atlassian_cloud_trello_power-ups

### Parameters
#### Path Parameters
- **scope** (string) - Required - The scope of the data to remove (e.g., 'card', 'board', 'member', 'organization').
- **visibility** (string) - Required - The visibility of the data ('shared' or 'private').
- **key** (string or array) - Required - The key to remove, or an array of keys to remove.

#### Query Parameters
None

#### Request Body
None

### Request Example (Single Key)
```json
{
  "example": "const t = window.TrelloPowerUp.iframe();\nawait t.remove(\"member\", \"private\", \"myKey\");"
}
```

### Request Example (Multiple Keys)
```json
{
  "example": "const t = window.TrelloPowerUp.iframe();\nawait t.remove(\"member\", \"private\", [\"myKey\", \"anotherKey\", \"enabled\"]);"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the operation was successful.

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### t.set() - Store Plugin Data

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Used to store plugin data within the Trello Power-Up platform. This function returns a Promise.

```APIDOC
## t.set(scope, visibility, key, value)

### Description
Used to store plugin data within the Trello Power-Up platform.

### Method
JavaScript Function

### Parameters
#### Parameters
- **scope** (string) - Required - One of: `board`, `card`, `member`, `organization`, or the ID of a card that is in scope.
- **visibility** (string) - Required - One of: `shared`, `private`.
- **key** (string) - Required - Any string.
- **value** (Serializable item) - Required - Accepts individual string, number, boolean, or object containing them.

### Visibility: "shared" vs. "private"
- **shared**: Data is visible/accessible to everyone who can read the "scope" it is stored against. **Do not store secrets or personal data in 'shared' visibility.** Board and workspace admins disabling Power-Ups may clear shared board-level storage.
- **private**: Data is visible/accessible only to the Trello member storing it. If storing external service tokens, consider using `t.storeSecret`.

### Request Example
```javascript
const t = window.TrelloPowerUp.iframe();
await t.set('board', 'shared', 'myKey', 'myValue');
```

### Response
#### Success Response
- The Promise resolves when the data has been successfully stored.

#### Error Response
- The Promise rejects if there is an error storing the data.
```

--------------------------------

### Trello Power-Up: Static Popup Items with Search (JavaScript)

Source: https://developer.atlassian.com/cloud/trello/power-ups/ui-functions/popup

Demonstrates how to initialize a Trello Power-Up that displays a popup with a static list of items. The popup includes search functionality, allowing users to filter the items. Items can have associated callbacks or URLs.

```javascript
var GRAY_ICON = 'https://cdn.hyperdev.com/us-east-1%3A3d31b21c-01a0-4da2-8827-4bc6e88b7618%2Ficon-gray.svg';

var btnCallback = function (t, opts) {
  return t.popup({
    title: 'Pull Requests',
    items: [{
      text: '#135 attempt to fix trello/api-docs#134',
      callback: function (t, opts) { ... },
      url: 'https://github.com/trello/api-docs/pull/135'
    }, {
      text: '#133 Removing duplicate `status` property',
      callback: function (t, opts) { ... },
      url: 'https://github.com/trello/api-docs/pull/133'
    }, {
      text: '#131 Update New Action Default',
      callback: function (t, opts) { ... },
      url: 'https://github.com/trello/api-docs/pull/131'
    }, {
      alwaysVisible: true, // non-search option, always shown
      text: 'Choose a different repo...', 
      callback: function (t, opts) { ... }
    }],
    search: {
      count: 10, // number of items to display at a time
      placeholder: 'Search pull requests',
      empty: 'No pull requests found'
    }
  });
};

window.TrelloPowerUp.initialize({
  'card-buttons': function (t, opts) {
    return [{
      icon: GRAY_ICON,
      text: 'GitHub',
      callback: btnCallback
    }];
  }
});
```

--------------------------------

### t.get() - Retrieve Plugin Data

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Retrieves plugin data at a specific scope and visibility. This function can fetch a single key's data or all data within a scope and visibility.

```APIDOC
## t.get(scope, visibility, key, [defaultValue])

### Description
Get plugin data at a specific scope and visibility.

### Method
JavaScript Function

### Parameters
#### Parameters
- **scope** (string) - Required - One of: `board`, `card`, `member`, `organization`, or the ID of a card that is in scope.
- **visibility** (string) - Required - One of: `shared`, `private`.
- **key** (string) - Optional - Any string. If omitted, all data for the scope and visibility is returned.
- **defaultValue** (Serializable item) - Optional - A default value to return if that key doesn't exist.

### Request Example (Single Key)
```javascript
const t = window.TrelloPowerUp.iframe();
const data = await t.get("board", "shared", "myKey");
console.log(JSON.stringify(data, null, 2));
```

### Request Example (With Default Value)
```javascript
const t = window.TrelloPowerUp.iframe();
const data = await t.get("board", "shared", "myKey", "Uh oh, not yet set");
console.log(JSON.stringify(data, null, 2));
```

### Request Example (All Data for Scope/Visibility)
```javascript
const t = window.TrelloPowerUp.iframe();
const data = await t.get("board", "shared");
console.log(JSON.stringify(data, null, 2));
```

### Request Example (From a Specific Card ID)
```javascript
const t = window.TrelloPowerUp.iframe();
const data = await t.get("542b0bd40d309dc6eba7ec91", "shared", "myKey");
console.log(JSON.stringify(data, null, 2));
```

### Response
#### Success Response
- Returns the requested plugin data (string, number, boolean, object, or array) or the default value if the key is not found.
- If `key` is omitted, returns an object containing all data for the specified scope and visibility.

#### Response Example (Single Key)
```json
"retrievedValue"
```

#### Response Example (All Data)
```json
{
  "key1": "value1",
  "key2": 123
}
```
```

--------------------------------

### Troubleshooting t.getContext() Issues with t.signUrl() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/t-getcontext

Demonstrates how to correctly use t.signUrl() to ensure t.getContext() returns valid data within your Trello Power-Up. This is crucial for enabling communication between your Power-Up's iframe and Trello. The example shows setting up a card back section and then accessing the context within the iframe.

```javascript
TrelloPowerUp.initialize({
  'card-back-section': function (t, options) {
    return {
      title: 'Card Back Section',
      icon: MY_ICON,
      content: {
        type: 'iframe',
        url: t.signUrl('./card-back-section.html'), // call t.signUrl
      },
    };
  },
});
```

```javascript
// inside card-back-section.js
const t = window.TrelloPowerUp.iframe();

t.render(() => {
  console.log(t.getContext());
});
```

--------------------------------

### Get Authorization Token - JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/rest-api-client

Retrieves a previously obtained authorization token. If no token exists, it resolves to null, indicating that authorization is required. This is useful for making authenticated API requests.

```javascript
t.getRestApi()
  .getToken()
  .then(function (token) {
    if (!token) {
      // do auth instead
    }

    // make a request with token
  });

```

--------------------------------

### Initialize Trello Power-Up with Board Bar

Source: https://developer.atlassian.com/cloud/trello/power-ups/ui-functions/board-bar

Initializes the Trello Power-Up, specifically configuring the board bar functionality. This includes setting the URL for the iframe, optional arguments, accent color, initial height, callback for closing, resizable option, title, and action buttons. The actions array allows for up to three quick action buttons with icons, alt text, callbacks, and positions.

```javascript
window.TrelloPowerUp.initialize({
  'show-settings': function (t, opts) {
    return t.boardBar({
      // required URL to load in the iframe
      url: './board-bar.html',
      // optional arguments to be passed to the iframe as query parameters
      // access later with t.arg('text')
      args: { text: 'Hello' },
      // optional color for header chrome
      accentColor: '#F2D600',
      // initial height for iframe
      height: 200, // initial height for iframe
      // optional function to be called if user closes modal
      callback: () => console.log('Goodbye.'),
      // optional boolean for whether the user should
      // be allowed to resize the bar vertically
      resizable: true,
      // optional title for header chrome
      title: 'Board Meeting',
      // optional action buttons for header chrome
      // max 3, up to 1 on right side
      actions: [{
        icon: './images/icon.svg',
        url: 'https://google.com',
        alt: 'Leftmost',
        position: 'left',
      }, {
        icon: './images/icon.svg',
        callback: (tr) => tr.popup({
          title: tr.localizeKey('appear_in_settings'),
          url: 'settings.html',
          height: 164,
        }),
        alt: 'Second from left',
        position: 'left',
      }, {
        icon: './images/icon.svg',
        callback: () => console.log(':tada:'),
        alt: 'Right side',
        position: 'right',
      }],
    });
  }
});
```

--------------------------------

### Get All Visible Cards on Board in Trello Power-Up

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/accessing-trello-data

Fetches all visible cards on the board using t.cards('all'). Visible cards are those that are open and in open lists. This function requires the Trello Power-Up JavaScript library.

```javascript
window.TrelloPowerUp.initialize({
  "board-buttons": function (t, opts) {
    return t.cards("all").then(function (cards) {
      console.log(JSON.stringify(cards, null, 2));
    });
  },
});

```

--------------------------------

### Get All Lists Data on Board in Trello Power-Up

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/accessing-trello-data

Fetches all open lists on the board using t.lists('all'). This function provides an overview of all lists present on the board. It requires the Trello Power-Up JavaScript library.

```javascript
window.TrelloPowerUp.initialize({
  "board-buttons": function (t, opts) {
    return t.lists("all").then(function (lists) {
      console.log(JSON.stringify(lists, null, 2));
    });
  },
});

```

--------------------------------

### Implement Trello Power-Up 'on-enable' Capability

Source: https://developer.atlassian.com/cloud/trello/power-ups/capabilities/on-enable

This JavaScript code snippet demonstrates how to use the 'on-enable' capability in Trello Power-Ups. It triggers when a user enables the Power-Up and can be used to open a modal for onboarding or initiating configuration flows. Note that this capability is not guaranteed to be called in all scenarios, such as when enabled via API.

```javascript
window.TrelloPowerUp.initialize({
  'on-enable': function(t, options) {
    // This code will get triggered when a user enables your Power-Up
    return t.modal({
      url: './power-up-onboarding.html',
      height: 500,
      title: 'My Power-Up Overview'
    });
  }
});
```

--------------------------------

### React Theme Provider for Trello Theme Synchronization (React >=18)

Source: https://developer.atlassian.com/cloud/trello/power-ups/color-theme-compliance/using-atlassian-design-tokens

This React component structure utilizes `useSyncExternalStore` to manage Trello theme changes. It provides a `ThemeContext` that exposes theme information and color token utility functions, ensuring components re-render when the theme updates. Includes a basic `SomeComponent` and `App` setup.

```javascript
// React >=18
import { createContext, useSyncExternalStore, useContext } from 'react';

const t = window.TrelloPowerUp.iframe({
  // Some config ...
});

const ThemeContext = createContext();

const subscribe = (cb) => {
  const unsubThemeChangeListener = t.subscribeToThemeChanges(cb);

  return () => {
    unsubThemeChangeListener();
  };
};

const getSnapshot = () => t.getContext().theme;

const ThemeProvider = ({ children }) => {
  const theme = useSyncExternalStore(subscribe, getSnapshot);

  // By "re-exporting" and consuming the token functions from
  // the theme context, we can ensure that the functions will
  // be re-run whenever the theme changes
  const value = {
    theme,
    getColorToken: t.getColorToken,
    getComputedColorToken: t.getComputedColorToken,
  };

  return <ThemeContext.Provider
value={value}>{children}</ThemeContext.Provider>;
};

const useTheme = () => {
  const context = useContext(ThemeContext);

  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }

  return context;
};

const SomeComponent = () => {
  const { theme, getComputedColorToken } = useTheme();

  return (
  <div>
    <h1>
      The computed value for the <code>color.background.information<code> token
in {theme} mode is: {getComputedColorToken('color.background.information',
'lightblue')}
    </h1>
  </div>
  );
};

const App = () => {
  return (
    <ThemeProvider>
      <SomeComponent />
    </ThemeProvider>
  );
};

```

--------------------------------

### Handle Token Callback for Trello OAuth

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/t-authorize

This script runs on the return URL page after Trello's OAuth flow is completed. It attempts to send the token back to the opener window using `window.opener.authorize`. If that fails due to security restrictions, it falls back to storing the token in `localStorage`. Finally, it closes the authorization window.

```javascript
let authorize;

try {
  if (window.opener && typeof window.opener.authorize === "function") {
    authorize = window.opener.authorize;
  }
} catch (e) {
  // Security settings are preventing this, fall back to local storage.
}

// Trello auth puts the token in the hash if callback_method=fragment.
// Other 3rd party auth flows may have a different system.
const token = window.location?.hash;
if (authorize && token) {
  authorize(token);
} else {
  localStorage.setItem("token", token);
}

setTimeout(function () {
  window.close();
}, 1000);

```

--------------------------------

### Handle Authorization Cancellation

Source: https://developer.atlassian.com/cloud/trello/power-ups/rest-api-client

Demonstrates how to handle the cancellation of the Trello authorization process. It extends the previous example by adding a `.catch()` block to the `authorize` promise to specifically catch `TrelloPowerUp.restApiError.AuthDeniedError` and display an alert.

```javascript
document.querySelector("button").addEventListener(
  "click",
  function () {
    t.getRestApi()
      .authorize({ scope: "read,write" })
      .then(function (t) {
        alert("Success!");
      })
      .catch(TrelloPowerUp.restApiError.AuthDeniedError, function () {
        alert("Cancelled!");
      });
  },
  false
);

```

--------------------------------

### Remove a Single Key using t.remove() in JavaScript

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/getting-and-setting-data

Illustrates how to remove a specific key from a given scope and visibility using the t.remove() method in JavaScript. This function allows for targeted deletion of stored data.

```javascript
const t = window.TrelloPowerUp.iframe();

await t.remove("member", "private", "myKey");
```

--------------------------------

### show-settings Capability

Source: https://developer.atlassian.com/cloud/trello/power-ups/capabilities/show-settings

This capability allows your Power-Up to display a settings or configuration page. When the gear icon is clicked in the Power-Up menu, Trello will execute the provided function, typically to show a popup with configuration options.

```APIDOC
## POST /power-up/settings

### Description
This endpoint is not a direct API endpoint but a JavaScript function executed by Trello when the 'show-settings' capability is triggered. It defines how your Power-Up's settings UI should be displayed.

### Method
JavaScript Function Execution (triggered by Trello)

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
window.TrelloPowerUp.initialize({
  'show-settings': function(t, options){
    // when a user clicks the gear icon by your Power-Up in the Power-Ups menu
    // what should Trello show. We highly recommend the popup in this case as
    // it is the least disruptive, and fits in well with the rest of Trello's UX
    return t.popup({
      title: 'Custom Fields Settings',
      url: './settings.html',
      height: 184 // we can always resize later
    });
  }
});
```

### Response
#### Success Response (200)
Returns a Promise that resolves when the settings UI is displayed.

#### Response Example
(No direct response body, UI is rendered)

```

--------------------------------

### Get All Card Data in Trello Power-Up

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/accessing-trello-data

Retrieves all data for the current card using the t.card('all') function. This is useful for accessing comprehensive card information within a Trello Power-Up. It requires the Trello Power-Up JavaScript library.

```javascript
window.TrelloPowerUp.initialize({
  "card-buttons": function (t, opts) {
    return t.card("all").then(function (card) {
      console.log(JSON.stringify(card, null, 2));
    });
  },
});

```

--------------------------------

### Get All List Data in Trello Power-Up

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/accessing-trello-data

Retrieves all data for the current list using the t.list('all') function. This is useful for accessing comprehensive list information within a Trello Power-Up. It requires the Trello Power-Up JavaScript library.

```javascript
window.TrelloPowerUp.initialize({
  "card-buttons": function (t, opts) {
    return t.list("all").then(function (list) {
      console.log(JSON.stringify(list, null, 2));
    });
  },
});

```

--------------------------------

### Icon Configuration for Power-Ups

Source: https://developer.atlassian.com/cloud/trello/power-ups/capabilities/board-buttons

Explains how to configure the `icon` parameter for Trello Power-Ups to ensure icons are visible on both light and dark board backgrounds. The `icon` object accepts `dark` and `light` keys, each pointing to a URL for an icon variant that contrasts with the background type.

```APIDOC
## POST /power-ups/configure_icon

### Description
Configures the icon for a Trello Power-Up, ensuring it is displayed correctly on both light and dark board backgrounds.

### Method
POST

### Endpoint
/power-ups/configure_icon

### Parameters
#### Request Body
- **icon** (object) - Required - An object containing icon URLs for different background types.
  - **dark** (string) - Required - URL for a light-colored icon, to be used on dark backgrounds.
  - **light** (string) - Required - URL for a dark-colored icon, to be used on light backgrounds.
- **text** (string) - Required - The text to display for the Power-Up button.
- **callback** (function) - Required - The function to execute when the Power-Up button is clicked.

### Request Example
```json
{
  "icon": {
    "dark": "https://example.com/a-white-icon.png",
    "light": "https://example.com/a-black-icon.png"
  },
  "text": "My Board Button",
  "callback": "function(t) { console.log('clicked'); }"
}
```

### Response
#### Success Response (200)
- **status** (string) - Indicates the success of the configuration.

#### Response Example
```json
{
  "status": "success"
}
```
```

--------------------------------

### Get All Board Data in Trello Power-Up

Source: https://developer.atlassian.com/cloud/trello/power-ups/client-library/accessing-trello-data

Retrieves all data for the current board using the t.board('all') function. This is useful for accessing comprehensive board information within a Trello Power-Up. It requires the Trello Power-Up JavaScript library.

```javascript
window.TrelloPowerUp.initialize({
  "board-buttons": function (t, opts) {
    return t.board("all").then(function (board) {
      console.log(JSON.stringify(board, null, 2));
    });
  },
});

```