### Example Params Object Structure (JSON)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

This JSON object shows the basic structure of the `sdk.params` property, separating instance and installation parameters.

```json
{
  instance: {},
  installation: {}
}
```

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

### Installing SDK via npm - bash

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Command to install the `dc-extensions-sdk` package using npm and save it as a dependency in the project's `package.json` file.

```bash
npm install dc-extensions-sdk --save
```

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

### Initializing Typed Content Editor Extension - typescript

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Example demonstrating the initialization of the SDK for a Content Editor extension using TypeScript. It defines an interface for installation parameters and applies the `ContentEditorExtension` type to the `init` function.

```typescript
import { init } from 'dc-extensions-sdk';
import type { ContentEditorExtension } from 'dc-extensions-sdk';

// define the installation config parameters
interface Parameters {
  installation: {
    configParam: string;
  };
}

async function initialize() {
  const sdk = await init<ContentEditorExtension<Parameters>>();
}

initialize();
```

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

### Installing SDK via yarn - bash

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Command to install the `dc-extensions-sdk` package using yarn, adding it as a dependency to the project.

```bash
yarn add dc-extensions-sdk
```

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

### Cloning Repository and Installing Dependencies (Bash)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/CONTRIBUTING.md

Commands to clone the project repository from GitHub and install its required dependencies using npm. Note that `npm install` might reset the git state.

```bash
git clone https://github.com/YOUR-USERNAME/typescript-library-starter
npm install
```

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

### Initializing SDK with Options - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Illustrates how to pass configuration options to the `init` function when initializing the SDK. The example shows options for enabling debug logging and setting a connection timeout.

```js
import { init } from 'dc-extensions-sdk';

const options = {
  // enable useful behind-the-scenes info
  debug: false,
  // the max time to wait for a connection to establish
  connectionTimeout: 4500,
};

async function initialize() {
  const sdk = await init(options);

  //..
}

initialize();
```

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

### Initializing Typed Content Field Extension - typescript

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Example of initializing the SDK for a Content Field extension using TypeScript. It defines interfaces for the field model and installation parameters, then uses these types with the `init` function for type safety.

```typescript
import { init } from 'dc-extensions-sdk';
import type { ContentFieldExtension } from 'dc-extensions-sdk';

// define the input field model
interface FieldModel {
  title: string;
  type: string;
  control: string;
  format: string;
  minLength: number;
  maxLength: number;
}

// define the installation config parameters
interface Parameters {
  instance: {};
  installation: {
    configParam: string;
  };
}

async function initialize() {
  const sdk = await init<ContentFieldExtension<FieldModel, Parameters>>();
}

initialize();
```

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

### Initializing SDK (CommonJS) - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Shows how to initialize the Dynamic Content Extensions SDK using a CommonJS `require`. The asynchronous `init` function is called on the imported module to get the SDK instance.

```js
const dcExtensionsSdk = require('dc-extensions-sdk');

async function initialize() {
  const sdk = await dcExtensionsSdk.init();
}

initialize();
```

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

### Example Asset Object Structure (JSON)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

This JSON object shows the typical structure and properties of an asset returned by the Amplience DC Extensions SDK.

```json
{
  "srcName": "an-image.jpg",
  "revisionNumber": 8,
  "bucketID": "00000000-0000-0000-0000-000000000000",
  "label": "an-image.jpg",
  "mimeType": "image/jpeg",
  "type": "image",
  "userID": "00000000-0000-0000-0000-000000000000",
  "thumbFile": "00000000-0000-0000-0000-000000000000",
  "folderID": "00000000-0000-0000-0000-000000000000",
  "file": "00000000-0000-0000-0000-000000000000",
  "createdDate": 1683798022161,
  "name": "an-image",
  "subType": null,
  "id": "00000000-0000-0000-0000-000000000000",
  "thumbURL": "https://thumbs.amplience.net/r/00000000-0000-0000-0000-000000000000",
  "publishStatus": "PUBLISHED",
  "status": "active",
  "timestamp": 1688563779803
}
```

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

### Example Locales Object Structure (JSON)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

This JSON object illustrates the structure of the `sdk.locales` property, showing default and available locale details.

```json
{
  "default": ["en-GB", "fr-FR"],
  "available": [
    {
      "locale": "en-GB",
      "language": "en",
      "country": "GB",
      "index": 0,
      "selected": true
    },
    {
      "locale": "fr-FR",
      "language": "fr",
      "country": "FR",
      "index": 1,
      "selected": false
    }
  ]
}
```

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

### Including SDK via CDN - html

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

HTML script tag to include the `dc-extensions-sdk` directly from a Content Delivery Network (CDN), allowing usage without local installation.

```html
<script src="https://unpkg.com/dc-extensions-sdk@^2"></script>
```

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

### Initializing Typed Dashboard Extension - typescript

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Shows how to initialize the SDK specifically for a Dashboard extension using TypeScript. It includes an interface for installation parameters and uses the `DashboardExtension` type with the `init` function.

```typescript
import { init } from 'dc-extensions-sdk';
import type { DashboardExtension } from 'dc-extensions-sdk';

// define the installation config parameters
interface Parameters {
  instance: {};
  installation: {
    configParam: string;
  };
}

async function initialize() {
  const sdk = await init<DashboardExtension<Parameters>>();
}

initialize();
```

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

### Example Content Item Structure - json

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Provides a sample JSON structure representing a Content Item object as returned by `sdk.contentItem.getCurrent()`. It shows typical properties like id, deliveryId, locale, body, label, and version.

```json
{
  "id": "4801f662-de68-43d3-8864-52d2d9c10bf4",
  "deliveryId": "4801f662-de68-43d3-8864-52d2d9c10bf4",
  "locale": "en-GB",
  "body": {
    "_meta": {
      "name": "hello-world",
      "schema": "http://www.hello-world.com"
    },
    "helloWorld": "Test"
  },
  "label": "Hello World",
  "version": 8
}
```

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

### Get Application Navigator Href using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Use the `applicationNavigator` property on the Dashboard extension to generate hrefs for various application views. Pass `{ returnHref: true }` to methods like `openEventsCalendar` to get the URL instead of navigating directly.

```javascript
const sdk = await init();
const href = sdk.applicationNavigator.openEventsCalendar({ returnHref: true });

const anchor = window.document.getElementById('my-anchor');
anchor.setAttribute('href', href);
```

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

### Access Params using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Access configuration parameters defined for the extension. Parameters can be set at the instance level (JSON Schema) or installation level (registry) and are available via the `sdk.params` property.

```javascript
const sdk = await init();

console.log(sdk.params);
```

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

### Get Asset by ID using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Use the `sdk.assets.getById` method to retrieve a specific asset by its unique identifier. This requires the SDK to be initialized.

```javascript
const sdk await init();

const asset = await sdk.assets.getById('123-456-789');
```

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

### Validating Model and Getting Errors - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Shows how to validate a value against the field's schema using the asynchronous `sdk.field.validate()` method. It returns an array of validation errors if invalid, or `undefined` if valid.

```js
const sdk = await init();

const errors = await sdk.field.validate('some value');
```

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

### Get Current Content Model using Form API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Fetches the current data model of the content item being viewed or edited within the form extension. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();
const model = await sdk.form.getValue();
```

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

### Get Form Model Value using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Fetch the current value of the content item's form model. This value represents the in-progress state of the form data and can change dynamically.

```javascript
const sdk = await init();

const formModel = await sdk.form.getValue();
```

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

### Initializing SDK (ES Module) - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Demonstrates how to initialize the Dynamic Content Extensions SDK using an ES Module import. The `init` function is asynchronous and returns the SDK instance.

```js
import { init } from 'dc-extensions-sdk';

async function initialize() {
  const sdk = await init();
}

initialize();
```

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

### Use Management SDK Client with Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Shows how to initialize the `dc-management-sdk-js` using the client provided by the `dc-extensions-sdk`, allowing management operations from within an extension. Requires both SDKs.

```JavaScript
import { init } from 'dc-extensions-sdk';
import { DynamicContent } from 'dc-management-sdk-js';

const dcExtension = await init();
const dcManagement = new DynamicContent({}, {}, dcExtension.client);

const hubs = await dcManagement.hubs.list();
```

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

### Open Content Library using Application Navigator (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Navigates to the main Content Library view within the Amplience application. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();
sdk.applicationNavigator.openContentLibrary();
```

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

### Building and Testing Project (Bash)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/CONTRIBUTING.md

Commands to build the project and run production tests using npm scripts, ensuring changes are valid before committing and submitting a pull request.

```bash
npm run build
npm run test:prod
```

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

### Open Events List using Application Navigator (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Opens the list of events within the Amplience application using the SDK's navigation capabilities. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();
sdk.applicationNavigator.openEventsList();
```

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

### Trigger Media Browser using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Open the media browser to allow users to select an image or video. Use `sdk.mediaLink.getImage()` or `sdk.mediaLink.getVideo()` respectively, which return a promise resolving with the selected media details.

```javascript
const sdk = await init();

const image = await sdk.mediaLink.getImage();
const video = await sdk.mediaLink.getVideo();
```

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

### Open Events Timeline using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Navigate the user directly to the Events Timeline view within the Amplience application using the `sdk.applicationNavigator.openEventsTimeline()` method.

```javascript
const sdk = await init();
sdk.applicationNavigator.openEventsTimeline();
```

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

### Open Edition by ID using Application Navigator (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Opens a specific edition associated with an event in the Amplience application using their respective IDs. Requires the SDK to be initialized and both IDs.

```JavaScript
const sdk = await init();
sdk.applicationNavigator.openEdition({ id: 'EDITION_ID...', eventId: 'EVENT_ID...' });
```

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

### Trigger Content Reference Browser using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Open a content item browser specifically for creating content references. Provide an array of schema URIs to filter the types of content items that can be selected.

```javascript
const sdk = await init();

const contentReference = await sdk.contentReference.get(['http://my.schema/carousel.json']);
```

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

### Open Event by ID using Application Navigator (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Navigates to a specific event in the Amplience application using its unique identifier. Requires the SDK to be initialized and the event ID.

```JavaScript
const sdk = await init();
sdk.applicationNavigator.openEvent({ id: 'EVENT_ID...' });
```

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

### Open Content Item by ID using Application Navigator (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Opens a specific content item for editing or viewing using its unique identifier. Requires the SDK to be initialized and the content item ID.

```JavaScript
const sdk = await init();
sdk.applicationNavigator.openContentItem({ id: 'CONTENT_ITEM_ID...' });
```

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

### Open Events Calendar using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Navigate the user directly to the Events Calendar view within the Amplience application using the `sdk.applicationNavigator.openEventsCalendar()` method.

```javascript
const sdk = await init();
sdk.applicationNavigator.openEventsCalendar();
```

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

### Trigger Content Link Browser using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Open a content item browser specifically for creating content links. Provide an array of schema URIs to filter the types of content items that can be selected.

```javascript
const sdk = await init();

const contentLink = await sdk.contentLink.get(['http://my.schema/carousel.json']);
```

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

### Fetching Current Content Item - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Explains how to asynchronously retrieve the entire content item currently being edited using the `sdk.contentItem.getCurrent()` method. This provides access to the item's ID, body, label, version, etc.

```js
const sdk = await init();

const contentItem = await sdk.contentItem.getCurrent();
```

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

### List Logged-in Users using Users API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Retrieves a list of users currently logged into the Amplience Content Management application. Supported in Content Field, Dashboard, and Content Editor extensions. Requires the SDK to be initialized.

```JavaScript
import { init } from 'dc-extensions-sdk';

const dcExtension = await init();

const users = await dcExtension.users.list();
console.log(users);
```

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

### Fetching Field Value - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Demonstrates how to asynchronously retrieve the current value of the content field managed by the extension using the `sdk.field.getValue()` method. The fetched value is then logged to the console.

```js
const fieldValue = await sdk.field.getValue();

console.log(fieldValue);
```

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

### Subscribe to Model Changes using Form API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Registers a callback function to be executed whenever the content item's model changes, such as when a delivery key is updated. The callback receives errors and the new model. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();

sdk.form.onModelChange((errors, model) => {
  setErrors(errors);
  setModel(model);
});
```

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

### Validate Content Model using Form API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Validates a given object against the content item's schema and returns a detailed error report if validation fails. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();
const errors = await sdk.form.validate({
  title: 'hello world',
});

if (errors) {
  console.log(errors);
}
```

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

### Retrieving Field Schema - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Shows how to access the schema associated with the content field directly from the SDK instance using `sdk.field.schema`. This provides information about the expected structure and constraints of the field's data.

```js
const sdk = await init();

const schema = sdk.field.schema;
```

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

### Set Content Model using Form API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Updates the data model of the content item. Returns an error report if the provided data is invalid against the schema. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();
try {
  await sdk.form.setValue({ title: 'hello world' });
} catch (errors) {
  if (errors.length) {
    console.log(errors);
  }
}
```

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

### Testing Model Validity - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Demonstrates how to check if a given value is valid according to the field's schema using the asynchronous `sdk.field.isValid()` method. It returns a boolean indicating the validity.

```js
const sdk = await init();

const isValid = await sdk.field.isValid('some value');
```

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

### Access Locales using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Retrieve the available locales configured for the current content item. The `sdk.locales` property provides an object containing default and available locale information.

```javascript
const sdk = await init();

const locales = sdk.locales;

console.log(locales);
```

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

### Set Frame Height using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Control the height of the extension frame. Calling `setHeight()` without arguments measures the current application height, while providing an integer value forces a specific height in pixels.

```javascript
const sdk = await init();

sdk.frame.setHeight(); // measures height
sdk.frame.setHeight(300); // override height
```

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

### Unsubscribe from Model Changes using Form API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Demonstrates how to unsubscribe from model change notifications by calling the function returned by `onModelChange`. Requires the SDK to be initialized.

```JavaScript
const unsubscribe = sdk.form.onModelChange((errors, model) => {
  setErrors(errors);
  setModel(model);
});

unsubscribe();
```

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

### Manage Frame Auto Resizing using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Enable or disable the Auto Resizer feature. When active, it automatically adjusts the frame height based on DOM changes and window resizing. Use `startAutoResizer()` to activate and `stopAutoResizer()` to deactivate.

```javascript
const sdk = await init();
// turn on the Auto Resizer
sdk.frame.startAutoResizer();

// turn off the Auto Resizer
sdk.frame.stopAutoResizer();
```

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

### Handle Form Read Only State using DC Extensions SDK (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Check the initial read-only state of the form using `sdk.form.readOnly` and subscribe to changes using `sdk.form.onReadOnlyChange()`. The callback receives a boolean indicating the current read-only status, allowing you to adjust UI elements accordingly.

```javascript
const input = document.querySelector('input');
const sdk = await init();

// the state is set on load of the form
console.log(sdk.form.readOnly);

sdk.form.onReadOnlyChange((readOnly) => {
  if (readOnly) {
    input.setAttribute('disabled', true);
  } else {
    input.removeAttribute('disabled');
  }
});
```

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

### Setting Field Value - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Shows how to asynchronously set the value of the content field using the `sdk.field.setValue()` method. Note that this action does not update the field model if the form is in a read-only state.

```js
const sdk = await init();

await sdk.field.setValue('some value');
```

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

### Check Content Model Validity using Form API (JavaScript)

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Checks if a given object is valid against the content item's schema and returns a boolean value indicating the result. Requires the SDK to be initialized.

```JavaScript
const sdk = await init();
const isValid = await sdk.form.isValid({
  title: 'hello world',
});

console.log(isValid); // false
```

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

### Resetting Field Value - js

Source: https://github.com/amplience/dc-extensions-sdk/blob/master/README.md

Explains how to reset the content field's value to its last saved state or `undefined` if the content item has not been saved previously, using the `sdk.field.resetValue()` method.

```js
const sdk = await init();

await sdk.field.resetValue();
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.