AssetSidebarWidget

The AssetSidebarWidget UI location integrates with asset management interfaces in the Contentstack UI.

const assetSidebar = sdk.location.AssetSidebarWidget;
if (assetSidebar) {
  const assetData = assetSidebar.getData();
  await assetSidebar.setData({ title: 'New Asset Title' });
  assetSidebar.onSave((updatedAsset) => {
    console.log('Asset saved:', updatedAsset);
  });
}

currentAsset

The currentAsset property retrieves the current asset object directly.

const asset = assetSidebar.currentAsset;
console.log('Current asset:', asset);

getData

The getData method retrieves the current asset data.

const assetData = assetSidebar.getData();
console.log('Asset title:', assetData.title);
console.log('Asset URL:', assetData.url);

setData(asset)

The setData method sets data for the current asset.

await assetSidebar.setData({ 
  title: 'New Asset Title',
  description: 'Updated description'
});

syncAsset

The syncAsset method synchronizes the asset with the parent application.

await assetSidebar.syncAsset();

updateWidth(width)

The updateWidth method updates the width of the Asset Sidebar widget.

await assetSidebar.updateWidth(400);

replaceAsset(file)

The replaceAsset method replaces the current asset with a new file.

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
await assetSidebar.replaceAsset(file);

onSave(callback)

The onSave method listens for asset save events.

assetSidebar.onSave((savedAsset) => {
  console.log('Asset saved:', savedAsset);
});

onChange(callback)

The onChange method listens for asset change events.

assetSidebar.onChange((changedAsset) => {
  console.log('Asset changed:', changedAsset);
});

onPublish(callback)

The onPublish method listens for asset publish events.

assetSidebar.onPublish((publishedAsset) => {
  console.log('Asset published:', publishedAsset);
});

onUnPublish(callback)

The onUnPublish method listens for asset unpublish events.

assetSidebar.onUnPublish((unpublishedAsset) => {
  console.log('Asset unpublished:', unpublishedAsset);
});