Datasource client

The SDK provides a Datasource client to perform CRUD operations on datasources, also called option lists.


The client variable in the following code examples refers to the ContentHubClient instance. When using the JavaScript SDK, the variable name can be chosen freely, but is also called client at instantiation in the documentation.

Get datasources

A datasource can be retrieved by name:


import { IOptionList } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/option-lists/option-list";

var result: IOptionList = await client.optionLists.getAsync("name");

This returns an IOptionList object. However, it is required to downcast it to the right type of datasource in one of the following ways.


The Type property on IOptionList can be used to identify the correct datasource type at runtime.


import { IHierarchicalOptionList } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/option-lists/hierarchical-option-list";

var hierachicalDataSource : IHierarchicalOptionList = await client.optionLists.getAsync("name") as IHierarchicalOptionList;


import { IFlatOptionList } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/option-lists/flat-option-list";

var flatDataSource: IFlatOptionList = await client.optionLists.getAsync("name") as IFlatOptionList;

Create datasources

To create a hierarchical datasource, an instance needs be created by the factory first. Afterwards, the instance can be saved using the client. The datasource can be used for media types, where every type of media can have more sub-values.

In this example, 'mp4' is added as a subtype of a video media type.


import HierarchicalOptionListValue from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/option-lists/hierarchical-options-list-value";

var dataSource = await client.optionListFactory.createHierarchicalOptionList("MediaType");
dataSource.labels["en-US"] = "Media type";

var video = new HierarchicalOptionListValue(
  { "en-US": "Video" }


var mp4 = new HierarchicalOptionListValue(
  { "en-US": "mp4" }


var image = new HierarchicalOptionListValue(
  { "en-US" : "Image" }


await client.optionLists.createAsync(dataSource);

Update datasources

In the following example, a flat colors datasource is extended with the color red:


import FlatOptionListValue from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/option-lists/flat-option-list-value";
import { IFlatOptionList } from "@sitecore/sc-contenthub-webclient-sdk/dist/contracts/base/option-lists/flat-option-list";

var dataSource = await client.optionLists.getAsync("colors") as IFlatOptionList;

var red = new FlatOptionListValue("red");
red.labels["en-US"] = "red";


await client.optionLists.updateAsync(dataSource);

Delete datasources

In the following example, the Name datasource is deleted:


await client.optionLists.deleteAsync("name");

Do you have some feedback for us?

If you have suggestions for improving this article,