# Implementing App Locations: Entry 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-entry-sidebar |
| **course_slug** | marketplace-apps |
| **lesson_slug** | implementing-app-locations-entry-sidebar |
| **markdown_file_url** | /academy/md/courses/marketplace-apps/implementing-app-locations-entry-sidebar.md |
| **generated_at** | 2026-05-27T10:19:09.887Z |

> 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":"08","type":"text","duration_minutes":1,"topics":["Implementing","App","Locations","Entry","Sidebar"]} -->

#### Lesson text

The Sidebar Location provides the ability to integrate functionalities into your stack to analyze your entry content and recommend ideas.

This Sidebar location allow users to provide additional capabilities over content, thus optimizing the content to suit their requirements. Examples of such sidebar locations are SEO tag recommendations, sentiment analysis, language translation, and so on.

The Sidebar Widget location is located in the sidebar of the entry editorial page. In that location, the app sdk framework exposes the entry data as well as the application configuration data. This data then can be used by the user to, for example, display detailed information about the entry, or any other system you might e integrating with. 

## **Use Case**

One of the most common use cases in Contenstack to leverage the entry sidebar location, is typically when you want to integrate with third party translation services. In the entry sidebar you can provide your editor with options to send an entry for translation into any given locale, for example, which will initiate a translation workflow for instance. You an even send the data for automatic and/or machine translation and get the translated entry back, and persist it in your entry, again, in any given locale. This is just an example, but the possibilities here are endless, as you can pretty much build your custom UI in the sidebar for any business requirement you might be needing to fulfill. For example,  you can use Sidebar Widget UI location to display the complete details of a product selected from a third party e-commerce platform that has been added  using the custom field of an entry (like the one you developed on the previous module).

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

import ContentstackAppSdk from "@contentstack/app-sdk";  
   
const \[state, setState\] \= useState<TypeAppSdkConfigState\>({  
config: {},  
entryData: {},  
location: {},  
appSdkInitialized: false,  
});  
useEffect(() \=> {  
ContentstackAppSdk.init()  
.then(async (appSdk) \=> {  
const config \= await appSdk?.getConfig();  
const entryData \= appSdk.location.SidebarWidget?.entry?.getData();  
setEntryData(data);  
setState({  
config,  
entryData,  
location: appSdk.location,  
appSdkInitialized: true,  
});  
})  
.catch((error) \=> {  
console.error("appSdk initialization error", error);  
});  
}, \[\]);  
 

## **Exercise 3**

In this exercise you will display certain data from the entry in the sidebar, an input box and a modal. When the exercise is completed, you will be able to click on the button, open the dialog, choose a product id from it (hardcoded in this example, but you could easily implement the logic to retrieve the actual product id from your third party system), and save it as part of the entry data.

*   Using your code editor, access the file located at: **src/containers/SidebarWidget/EntrySidebar.tsx**
    
*   In that file, locate the **renderProduct** function.
    
*   In that function replace the **return** statement with the following code snippet
    
*   return (  
    <ol\>  
    {products?.map((item: string, index: number) \=> (  
    <li key\={index} className\="list"\>{\`${index + 1}. ${item}\`}</li\>  
    ))}  
    </ol\>  
    );
    
*   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/SidebarWidget/solution.txt** file, which contents you can copy and paste into the **src/containers/SidebarWidget/EntrySidebar.tsx** file.
    
*   Using the left navigation bar, select the Entries section.
    
*   Next, find the entry you saved when you developed the Custom Field Location.
    
*   From the editorial form screen, using the right sidebar, open the **Widgets** section, and select _Sample App_:
    
*   ![BuildingMarketApps\_L8\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4cd2348d25be477d/67ddd582f7eccc6e4b90ddb2/BuildingMarketApps_L8_img-1.png)
    
*   ![BuildingMarketApps\_L8\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt764c0be74ab65029/67ddd596b1a1f3788a3efdd8/BuildingMarketApps_L8_img-2.png)
    
*   Once opened, you should see something like this: 
    
*   ![BuildingMarketApps\_L8\_img-3.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3de3dd3f8ab894ad/67ddd5b32d0b9838c7fd0b18/BuildingMarketApps_L8_img-3.png)
    

As you can see, the entry sidebar is displaying the products you added using the Custom Field and also the data you stored in your configuration app. This is a basic example but should give you the foundation to create your own sidebar application with a more complex UI as needed and leverage the configuration and the data entry to communicate with other systems and/or the entry 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 entry data.

If you want to learn more about this location, please visit our documentation: [Entry Sidebar Location](https://www.contentstack.com/docs/developers/developer-hub/sidebar-location)

Next, you will develop a Dashboard Widget.

#### Key takeaways

- Connect **Implementing App Locations: Entry 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: Entry Sidebar. The Sidebar Location provides the ability to integrate functionalities into your stack to analyze your entry content and recommend ideas. This Sidebar location allow users to provide additional capabilities over content, thus optimizing the content to suit their requirements. Examples of such sidebar locations are SEO tag recommendations, sentiment analysis, language translation, and so on. The Sidebar Widget location is located in the sidebar of the entry editorial page. In that location, the app sdk framework exposes the entry data as well as the application configuration data. This data then can be used by the user to, for example, display detailed information about the entry, or any othe

### Retrieval tags

- Implementing
- App
- Locations
- Entry
- Sidebar
- marketplace-apps
- lesson 08
- Implementing App Locations: Entry Sidebar
- marketplace-apps lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "08" and topics: [Implementing, App, Locations, Entry, 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\_L8\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4cd2348d25be477d/67ddd582f7eccc6e4b90ddb2/BuildingMarketApps_L8_img-1.png` |
| BuildingMarketApps\_L8\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt764c0be74ab65029/67ddd596b1a1f3788a3efdd8/BuildingMarketApps_L8_img-2.png` |
| BuildingMarketApps\_L8\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3de3dd3f8ab894ad/67ddd5b32d0b9838c7fd0b18/BuildingMarketApps_L8_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/` |
| BuildingMarketApps\_L8\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4cd2348d25be477d/67ddd582f7eccc6e4b90ddb2/BuildingMarketApps_L8_img-1.png` |
| BuildingMarketApps\_L8\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt764c0be74ab65029/67ddd596b1a1f3788a3efdd8/BuildingMarketApps_L8_img-2.png` |
| BuildingMarketApps\_L8\_img-3.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3de3dd3f8ab894ad/67ddd5b32d0b9838c7fd0b18/BuildingMarketApps_L8_img-3.png` |
| Entry Sidebar Location | `https://www.contentstack.com/docs/developers/developer-hub/sidebar-location` |