# Implementing App Locations: Full Page ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/courses/marketplace-apps/implementing-app-locations-full-page | | **course_slug** | marketplace-apps | | **lesson_slug** | implementing-app-locations-full-page | | **markdown_file_url** | /academy/md/courses/marketplace-apps/implementing-app-locations-full-page.md | | **generated_at** | 2026-04-28T06:55:38.036Z | > 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. #### Lesson text The Full Page location gives you full screen real state in Contenstack to integrate your applications. This will display on the left main navigation bar with the icon you chose when registering the location in Developer Hub: ![BuildingMarketApps\_L11\_img-1.png](https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt93aed1b21138c5c7/67ddd703460eb4e71e947d6b/BuildingMarketApps_L11_img-1.png) In that location, the app sdk framework exposes the application configuration data, as well as other objects such as the stack, user, etc... similar to the Stack Dashboard Widget location.  When the user clicks on the icon on the left navigation bar, the app will get loaded inside an iframe in the main area within the dashboard.  ## **Use Case** One of the most common use cases in Contenstack to leverage the full page location, is typically when you want to add additional functionality or a custom application that requires a larger space to be used. With this extension location you have endless possibilities, and you can even bring your own custom app that might not necessarily interact with Contenstack, but that makes sense to have integrated so your editors go to the same place to do all their work. For example, you can implement access to a network location to access certain files and documentation; you can provide a dashboard with useful information and/or useful resources so your editors can access those at a glance; etc. A good example of an existing full page sidebar extension managed and maintained by Contenstack is the [Release Preview](https://www.contentstack.com/docs/developers/marketplace-apps/release-preview) marketplace app. In order to read the configuration values and the get access to the available objects in this location, you can use the following code snippet: useEffect(() \=> { ContentstackAppSDK.init().then(async (appSdk) \=> { const config \= await appSdk?.getConfig(); setState({ config, location: appSdk?.location, appSdkInitialized: true, }); }); }, \[\]); ## **Exercise 6** In this exercise you will display display a table with all the entries for one specific content type. You will be able to select the content type using an dropdown, and upon selection of the content type, the table will update its data with the list of entries based on the selected content type.  Using your code editor, access the file located at: **src/containers/FullPage/FullPage.tsx** * In order to use the **Select** venus component, import it from the venus component library adding this piece of code at the tope of the file: * import { Select } from "@contentstack/venus-components"; * Now, inside the **FullPageExtension** component, add the following code snippet to create a state variable to store the available content types: * const \[contentTypes, setContentTypes\] \= useState(); * Inside the _useEffect_ code, and within the _appSdk.init()_ **,** add the following code snippet to get all the available content types from the stack object and to store them in the previously defined state: * const { content\_types } \= (await appSdk?.location?.FullPage?.stack?.getContentTypes()) || {}; setContentTypes(content\_types); * Next, you will add a Dropdown component to contain the different content types to use in the UI by the users. For this, you first need to create a local state to store the options and the selected Content Type. Right after the previous snipped code, paste this code, too: * const \[contentTypeOptions, setContentTypeOptions\] \= useState(\[\]); const \[selectedContentType, setSelectedContentType\] \= useState(""); * Additionally, you will need to add the following code snippet, after the existing **useEffect** hook: * useEffect(() \=> { if (!state.appSdkInitialized) return; let dropdownOptions: any \= \[\]; contentTypes?.forEach((contentType: any) \=> { dropdownOptions.push({ label: contentType?.title, value: contentType?.uid, }); }); setContentTypeOptions(dropdownOptions); }, \[contentTypes\]); * Next, you will need a listener to update the selected Content Type whenever the user selects a different value. Add  the following code snippet right after the code you just pasted: * const handleDropdownChange \= (e: any) \=> { setSelectedContentType(e); }; * Next, you will add the UI Select dropdown element.  Replace the **{/\* your code goes here \*/}** placeholder with the following code: *