# Implementing App Locations: Stack Dashboard

### About this export

| Field | Value |
| --- | --- |
| **content_type** | lesson |
| **platform** | contentstack-academy |
| **source_url** | https://www.contentstack.com/academy/courses/marketplace-apps/implementing-app-locations-stack-dashboard |
| **course_slug** | marketplace-apps |
| **lesson_slug** | implementing-app-locations-stack-dashboard |
| **markdown_file_url** | /academy/md/courses/marketplace-apps/implementing-app-locations-stack-dashboard.md |
| **generated_at** | 2026-04-28T06:55:37.899Z |

> 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":"09","type":"text","duration_minutes":1,"topics":["Implementing","App","Locations","Stack","Dashboard"]} -->

#### Lesson text

The Dashboard Location is a type of location that lets you create widgets for your stack dashboard.  
Using this location, you can create several useful widgets.  
Consider a widget that does the following operations:

*   Shows real-time data of stack usage
    
*   Lists all the entries published recently
    
*   Allows you to add your "To-Dos" for the day or take notes. 
    

Contentstack loads this location of your app inside an iframe in the Dashboard of your Stack. Like in previous modules, you can use the app sdk framework to, for example,  access your configuration values, in case you need to display some third-party data such as Analytics data or Kanban Jira information, etc... Basically is a place for you to integrate any information and functionality that you want available to your editors when accessing their stacks.

## **Use Case**

One of the most common use cases in Contenstack to leverage stack dashboard widgets, is typically to display analytics information on your sites, workflow statuses within Contentstack or other third-party systems. Add custom buttons and functionality to allow editors to quickly perform repetitive tasks or automate processes on other systems, for example, search engines, invalidate cache, preview most used promotions, or even get a comprehensive list of the best performing content in their digital properties.

Similar to the other locations, you can use the app sdk in order to read the stored configuration values, user information and even stack details as follows:

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

Using these objects in the state variable, you can now render your UI according to your use case. 

Using the e-commerce platform integration use case, you can use Stack Dashboard Widget UI location to display analytics of all the products against each entry, i.e. what entries use what products and how those products are performing. Those analytics could also include the updates made to the products and whether the particular updated product data is published to the site or not. Again, the possibilities are endless.

## **Exercise 4**

In this exercise you will get the list of content types in Contenstack and you will display the amount of entries created based on each of those content types. The idea here is to illustrate how you can leverage the sdk to access other modules of the system, in this case, content types.

*   Using your code editor, access the file located at: **src/containers/DashboardWidget/StackDashboard.tsx**
    
*   In that file, within the available react component, create a state variable for the entry count:
    
*   const \[entriesCounts, setEntriesCounts\] \= useState<any\>(\[\]);
    
*   While initializing the appSDK, use the following code snippet to retrieve all the content types in the stack:
    
*   const { content\_types } \=  
    (await appSdk?.location?.DashboardWidget?.stack?.getContentTypes()) || {};
    
*   Next, you will use the apSDK to query for all the entries for all the content types. Here is the code:
    
*   let entriesCountObj \= await Promise.all(  
    content\_types?.map(async (content\_type: any) \=> {  
    const { entries } \=  
    (await appSdk?.location?.DashboardWidget?.stack  
    ?.ContentType(content\_type.uid)  
    ?.Entry.Query()  
    .find()) || {};  
    return {  
    uid: content\_type?.uid,  
    title: content\_type?.title,  
    count: entries?.length,  
    };  
    })  
    );  
    setEntriesCounts(entriesCountObj);
    
*   Next, import the following component from the Venus Component Library by pasting int into the file:
    
*   import { InfiniteScrollTable } from "@contentstack/venus-components";
    
*   The **InfiniteScrollTable** component you just imported requires a columns object to use for its columns definition. Use the following code to define the table columns:
    
*   const columns \= \[  
    {  
    Header: "Title",  
    accessor: "title",  
    columnWidthMultiplier: 1.9,  
    },  
    {  
    Header: "UID",  
    accessor: "uid",  
    id: "uid",  
    columnWidthMultiplier: 1.4,  
    },  
    {  
    Header: "Count",  
    accessor: "count",  
    columnWidthMultiplier: 0.7,  
    },  
    \];
    
    *   To read more on how to use InfiniteScrollTable, refer to the [Venus Components Documentation](https://venus-storybook.contentstack.com/?path=/story/overview-getting-started--page)
        
    
*   To signal the loaded state of the rows in the Table, you need to populate the **itemStatusMap** object. To do that, you will:
    
    *   Initialize the **itemStatusMap**:
        
    *   let itemStatusMap: any \= {};  
         
        
    *   Then, set the state as ‘**loaded**’ when the **entriesCount** is set:
        
    *   useEffect(() \=> {  
        entriesCounts.forEach(  
        (\_: any, index: any) \=> (itemStatusMap\[index\] \= "loaded")  
        );  
        }, \[entriesCounts, itemStatusMap\]);
        
    *   And lastly, render the InifinteScrollTable in the DOM:
        
    *   <div className\="dashboard"\>  
        <div className\="dashboard-container"\>  
        {state?.appSdkInitialized && (  
        <>  
        <h2\>Entries Count</h2\>  
        <InfiniteScrollTable  
        data\={entriesCounts}  
        columns\={columns}  
        uniqueKey\={"uid"}  
        totalCounts\={entriesCounts.length}  
        fetchTableData\={() \=> {}}  
        loadMoreItems\={() \=> {}}  
        itemStatusMap\={itemStatusMap}  
        /\>  
        </\>  
        )}  
        </div\>  
        </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/DashboardWidget/solution.txt** file, which contents you can copy and paste into the **src/containers/DashboardWidget/StackDashboard.tsx** file.
    
*   Now, go back to your Stack Dashboard. You can do so, by clicking the top \`Dashboard\` icon in the left navigation bar.
    
*   ![BuildingMarketApps\_L9\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt042ebb93137ccbdc/67ddd6065e486d10db71bba7/BuildingMarketApps_L9_img-1.png)
    
*   You will see your Stack Dashboard Widget. It should look similar to this: 
    
*   ![BuildingMarketApps\_L9\_img-2.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8051783e925f5d8d/67ddd61ac566ee763c5e05d7/BuildingMarketApps_L9_img-2.png)
    

**Tip**: make sure you go over the entire code in the file to get a better understanding on how the logic is implemented.

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

In the next module you will implement the Asset Sidebar Widget location.

## **Video: Implementing Stack Dashboard Location**

The following video walks you through the previous exercise steps so you can review and follow along:

#### Key takeaways

- Connect **Implementing App Locations: Stack Dashboard** 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: Stack Dashboard. The Dashboard Location is a type of location that lets you create widgets for your stack dashboard. Using this location, you can create several useful widgets. Consider a widget that does the following operations: Shows real-time data of stack usage Lists all the entries published recently Allows you to add your "To-Dos" for the day or take notes. Contentstack loads this location of your app inside an iframe in the Dashboard of your Stack. Like in previous modules, you can use the app sdk framework to, for example, access your configuration values, in case you need to display some third-party data such as Analytics data or Kanban Jira information, etc... Basically is a place for you to integ

### Retrieval tags

- Implementing
- App
- Locations
- Stack
- Dashboard
- marketplace-apps
- lesson 09
- Implementing App Locations: Stack Dashboard
- marketplace-apps lesson

### Indexing notes

Index this lesson as a primary chunk tagged with lesson_id "09" and topics: [Implementing, App, Locations, Stack, Dashboard].
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\_L9\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt042ebb93137ccbdc/67ddd6065e486d10db71bba7/BuildingMarketApps_L9_img-1.png` |
| BuildingMarketApps\_L9\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8051783e925f5d8d/67ddd61ac566ee763c5e05d7/BuildingMarketApps_L9_img-2.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/` |
| Venus Components Documentation | `https://venus-storybook.contentstack.com/?path=/story/overview-getting-started--page` |
| BuildingMarketApps\_L9\_img-1.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt042ebb93137ccbdc/67ddd6065e486d10db71bba7/BuildingMarketApps_L9_img-1.png` |
| BuildingMarketApps\_L9\_img-2.png | `https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8051783e925f5d8d/67ddd61ac566ee763c5e05d7/BuildingMarketApps_L9_img-2.png` |
| Stack Dashboard Location | `https://www.contentstack.com/docs/developers/developer-hub/dashboard-location` |