# Implementing App Locations: Custom Field ### About this export | Field | Value | | --- | --- | | **content_type** | lesson | | **platform** | contentstack-academy | | **source_url** | https://www.contentstack.com/academy/learning-paths/contentstack-implementation-certification/marketplace-apps/implementing-app-locations-custom-field | | **course_slug** | marketplace-apps | | **lesson_slug** | implementing-app-locations-custom-field | | **learning_path_slug** | contentstack-implementation-certification | | **markdown_file_url** | /academy/md/learning-paths/contentstack-implementation-certification/marketplace-apps/implementing-app-locations-custom-field.md | | **generated_at** | 2026-05-28T12:30:29.075Z | > Lesson in **[Building Marketplace Apps](https://www.contentstack.com/academy/learning-paths/contentstack-implementation-certification/marketplace-apps)** within the **contentstack-implementation-certification** learning path on Contentstack Academy. **Academy MD v3** — structured for retrieval; no quiz or assessment keys. #### Lesson text # **Implementing App Locations: Custom Field** The Custom Field Location of an app lets you add/ create custom fields that you can use in your content type. Apart from using the default fields such as "Single-line textbox", "Rich Text Editor", and so on, you can integrate with numerous business applications, such as "Bynder", "Cloudinary", "Shopify", by adding them as custom fields to your stack's content type. Contentstack loads this location of your app inside an iframe in the entry editing page. You can use the app sdk framework to access the entry data, manipulated it, and store your custom filed data into it. This will allow you to store field values in the entry from third-party systems such as Digital Asset Management systems Product Information Management systems, etc... ## **Use Case** One of the most common use cases in Contenstack to leverage custom fields, is typically when you want to manage assets from a different system and then bring the asset id and/or reference into Contenstack, so your editors can browse the Digital Asset Management system and choose their images from there and associate them with other content managed in Contenstack. Similarly you can apply the same concept if you need to browse product categories or attributes from your Product Information Management system so, again, your editor can choose the right product discounts, product ids, product features, etc... when, for instance creating product promotional pages.  In order to read and save this values as a field as part of the entry you can refer to the following code snippet: import ContentstackAppSdk from "@contentstack/app-sdk";   const \[state, setState\] \= useState({ config: {}, entry: {}, location: {}, appSdkInitialized: false, }); useEffect(() \=> { ContentstackAppSdk.init() .then(async (appSdk) \=> { const config \= await appSdk?.getConfig(); const entryData \= appSdk.location.CustomField?.field?.getData(); appSdk.location.CustomField?.frame.enableAutoResizing(); setState({ config, entry: entryData, location: appSdk?.location, appSdkInitialized: true, }); }) .catch((error) \=> { console.error("appSdk initialization error", error); }); }, \[\]);   Using the config and the entry objects in the state variable, you can now render your UI of the custom field location as per your requirement. If you need to save/overwrite the updated data to the custom field of an entry, then you have to use the **state.location.CustomField.field.setData()** function as shown below: state.location.CustomField?.field?.setData(updatedDataThatHasToBeStoredInCustomFieldOfTheEntry); ## **Exercise 2** In this exercise you will add a button to your custom field, 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/CustomField/CustomField.tsx** * Import the following react components from the Contenstack venus components library: * import { Tag, cbModal } from "@contentstack/venus-components"; * Create the following two new functions inside the component. This code will display a modal dialog upon clicking on a button: * const productModal \= (props: any) \=> ( );   const handleClick \= () \=> { cbModal({ component: productModal, modalProps: { onClose: () \=> {}, onOpen: () \=> {}, size: "xsmall", }, }); };   * Add the below code in  the **renderCustomFile** function to replace the placeholder that  says “{//add tag code here}”. * setSelectedItems(tags)} /\>   * Next, create a new file named **ProductModal.tsx** in the following folder: **src/containers/CustomField/** * Paste the following code into the file: * import { Button, ButtonGroup, Field, FieldLabel, ModalBody, ModalFooter, ModalHeader, TextInput, } from "@contentstack/venus-components"; import React, { useState } from "react";   import localeTexts from "../../common/locales/en-us";   const ProductModal \= ({ updateSelectedItems, ...props }: any) \=> { const \[name, setName\] \= useState("");   return ( <> {"Name"} setName(e.target.value)} /\>