# Implementing App Locations: Asset Sidebar

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/marketplace-apps/implementing-app-locations-asset-sidebar |
| **course_slug** | marketplace-apps |
| **lesson_slug** | implementing-app-locations-asset-sidebar |
| **markdown_file_url** | /academy/md/courses/marketplace-apps/implementing-app-locations-asset-sidebar.md |
| **generated_at** | 2026-05-27T10:19:10.023Z |

> Part of **[Building Marketplace Apps](https://www.contentstack.com/academy/courses/marketplace-apps)** on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys.

<!-- ai_metadata: {"lesson_id":"10","type":"text","duration_minutes":1,"topics":["Implementing","App","Locations","Asset","Sidebar"]} -->

#### Lesson text

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](https://www.contentstack.com/marketplace/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.
    
*   ![BuildingMarketApps\_L10\_img-4.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blted35390bdd69fe1a/67ddd6c2a714582179b9bae8/BuildingMarketApps_L10_img-4.png)
    
*   From the editorial form screen, using the right sidebar, open the **Widgets** section, and select _Sample App_:
    
*   ![BuildingMarketApps\_L10\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt35b158833dab0fd8/67ddd65fa6d88e507e053a3a/BuildingMarketApps_L10_img-1.png)
    
*   ![BuildingMarketApps\_L10\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7a0fd085c01578dd/67ddd677cb0241239641bb1e/BuildingMarketApps_L10_img-2.png)
    
*   Once opened, you should see something like this: 
    
*   ![BuildingMarketApps\_L10\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb24e5863574c6103/67ddd68c17f7b4e3e20d0698/BuildingMarketApps_L10_img-3.png)
    

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](https://www.contentstack.com/docs/developers/developer-hub/asset-sidebar-location)

Next, you will develop a Full Page location extension.

#### Key takeaways

- Connect **Implementing App Locations: Asset Sidebar** back to your stack configuration before moving to the next module.
- Capture one concrete artifact (screenshot, Postman call, or code snippet) that proves the step works in your environment.
- Re-read the delivery versus management boundary for anything you changed in the entry model.

## Supplement for indexing

### Content summary

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 C

### Retrieval tags

- Implementing
- App
- Locations
- Asset
- Sidebar
- marketplace-apps
- lesson 10
- Implementing App Locations: Asset Sidebar
- marketplace-apps lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "10" and topics: [Implementing, App, Locations, Asset, Sidebar].
Parent course slug: marketplace-apps. Use asset_references URLs as thumbnail hints in search results when present.
Never surface LMS quiz content or assessment answers from this file.

### Asset references

| Label | URL |
| --- | --- |
| BuildingMarketApps\_L10\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blted35390bdd69fe1a/67ddd6c2a714582179b9bae8/BuildingMarketApps_L10_img-4.png` |
| BuildingMarketApps\_L10\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt35b158833dab0fd8/67ddd65fa6d88e507e053a3a/BuildingMarketApps_L10_img-1.png` |
| BuildingMarketApps\_L10\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7a0fd085c01578dd/67ddd677cb0241239641bb1e/BuildingMarketApps_L10_img-2.png` |
| BuildingMarketApps\_L10\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb24e5863574c6103/67ddd68c17f7b4e3e20d0698/BuildingMarketApps_L10_img-3.png` |

### External links

| Label | URL |
| --- | --- |
| Contentstack Academy home | `https://www.contentstack.com/academy/` |
| Training instance setup | `https://www.contentstack.com/academy/training-instance` |
| Academy playground (GitHub) | `https://github.com/contentstack/contentstack-academy-playground` |
| Contentstack documentation | `https://www.contentstack.com/docs/` |
| Image Preset Builder | `https://www.contentstack.com/marketplace/image-preset-builder` |
| BuildingMarketApps\_L10\_img-4.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blted35390bdd69fe1a/67ddd6c2a714582179b9bae8/BuildingMarketApps_L10_img-4.png` |
| BuildingMarketApps\_L10\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt35b158833dab0fd8/67ddd65fa6d88e507e053a3a/BuildingMarketApps_L10_img-1.png` |
| BuildingMarketApps\_L10\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7a0fd085c01578dd/67ddd677cb0241239641bb1e/BuildingMarketApps_L10_img-2.png` |
| BuildingMarketApps\_L10\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb24e5863574c6103/67ddd68c17f7b4e3e20d0698/BuildingMarketApps_L10_img-3.png` |
| Asset Sidebar Location | `https://www.contentstack.com/docs/developers/developer-hub/asset-sidebar-location` |