Implementing App Locations: Asset Sidebar

The Asset Sidebar Location lets you create customized sidebar widgets that extend the functionality of your assets and enhance their editorial experience to suit your needs.
You can efficiently manage, transform, and optimize the assets in your stack.

The Asset Sidebar Widget location is located in the sidebar of the asset editorial page. In that location, the app sdk framework exposes the asset data as well as the application configuration data. This data then can be used by the user to, for example, add additional metadata to the asset or displaying additional information about the asset that might not be present by default in the detail view. 

Use Case

One of the most common use cases in Contenstack to leverage the entry sidebar location, is typically when you want to add additional metadata associated to the asset. In the asset sidebar you can provide your editor with additional fields to manage extra information about the asset, for example, SEO related metadata, accessibility information, or even different presets or variations for the asset that can be tailored, for example, to the size of the screen and/or the capabilities of the display the asset will be presented on. A good example of an existing asset sidebar extension managed and maintained by Contenstack is the Image Preset Builder.

In order to read the configuration values and the asset data you can use the following code snippet:

useEffect(() => {
ContentstackAppSdk.init()
.then(async (appSdk) => {
const config = await appSdk.getConfig();
const asset = appSdk?.location?.AssetSidebarWidget?.currentAsset;
await setState({
config,
asset,
appSdkInitialized: true,
});
})
.catch((sdkError: any) => {
console.error("Error while initializing app sdk: ", sdkError);
});
}, []);

Exercise 5

In this exercise you will display the data from the asset in the sidebar, in a field-value pair fashion. 

Using your code editor, access the file located at: src/containers/AssetSidebarWidget/AssetSidebar.tsx

• In that file, inside the AssetSidebarExtension, add the following code snippet to create a state variable to store the asset data:

• const [assetData, setAssetData] = useState<any>({});

• Inside the useEffect code, and within the appSdk.init() , add the following code snippet to use the appSdk object to set the data in your local state:

• const assetDataFromLocation =
  await appSdk?.location?.AssetSidebarWidget?.getData();
  setAssetData(assetDataFromLocation);

• Next, you add the following JSX snippet in that same file. Look for this placeholder: {/* your code goes here */}, and replace it with this code:

• <div>Filename : {assetData?.filename}</div>
  <div>
  Dimensions : {assetData?.dimension?.height} x {assetData?.dimension?.width}
  </div>
  <div>URL: {assetData?.url}</div>

• Save your file and make sure that your application is still running with no errors.
  

• Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the src/containers/AssetSidebarWidget/solution.txt file, which contents you can copy and paste into the src/containers/AssetSidebarWidget/AssetSidebar.tsx file.

• Using the left navigation bar, select the Assets section.

• Next, find an asset and click on it. This will display the asset details. This will work on any asset.

• 

• From the editorial form screen, using the right sidebar, open the Widgets section, and select Sample App:

• 

• 

• Once opened, you should see something like this: 

• 

As you can see, the asset sidebar is displaying some attributes from the asset. This is a basic example but should give you the foundation to create your own asset sidebar application with a more complex UI as needed and leverage the configuration and the asset data to communicate with other systems and/or the asset itself.

Tip: make sure you go over the entire code in the file to get a better understanding on how the logic access the configuration and the asset data.

If you want to learn more about this location, please visit our documentation: Asset Sidebar Location

Next, you will develop a Full Page location extension.