This course will help customers, partners and developers create a marketplace application from scratch.This course covers the different areas of integration in Contenstack’s UI. By integrating your own functionality in these areas or “locations”, you can address different use cases and add functionality in the platform, according to your business needs. The Marketplace App framework provides a seamless way to directly integrate with Contentstack’s UI.Additionally, Marketplace applications provide one-click install, simplifying the setup and distribution of your application across different stacks.Marketplace Applications leverage the App Framework, a module which can be used to develop a new marketplace app. The framework is available as a npm package under @contentstack/app-sdk. The package can be installed by developers using npm or yarn (or any other package manager of their choosing that supports node packages) as they would normally do when building other react or node apps. This framework provides access to various data points when loaded in specific locations as mentioned in the previous section. The [Contentstack App SDK](<a href="https://github.com/contentstack/app-sdk-docs" target="_self">https://github.com/contentstack/app-sdk-docs</a>) also provides necessary methods to interact with the Contentstack application.By the end of this course. participants will be able to develop and deploy an example marketplace application that illustrates how you can extend those UI areas.

Introduction to Marketplace Apps and App Framework

In computer programming, boilerplate code, or simply boilerplate, are sections of code that are repeated in multiple places with little to no variation. Boilerplate templates or frameworks provide a starting point for building new solutions that follow a given pattern, require repetitive tasks, access to certain SDKs, and that reuse certain pieces of code. Boilerplate code or applications can define project-level elements or standard methods for one or more projects.Contentstack provides a boilerplate that incorporates reference examples developers can use when building UI integrations in Contentstack.This boilerplate reduces the effort of developers when building their integrations. It also provides more visibility on the structure of the marketplace applications.The boilerplate code includes all the locations where your integrations can be placed inside Contentstack’s UI. Those locations are:<ul><li>Custom Field</li><li>Entry Sidebar Widget</li><li>Asset Sidebar Widget</li><li>Dashboard Widget</li><li>Field Modifier</li><li>Full Page</li><li>JSON RTE plugin&nbsp;</li></ul>The following modules in this course describe how to build an app using our Marketplace App boilerplate (which uses app sdk for interaction with Contentstack). For more information about the Marketplace App boilerplate, you can check the <a href="https://github.com/contentstack/marketplace-academycourse-app">Marketplace App Boilerplate GitHub repository</a>.

Marketplace Boilerplate

In this module we will describe how to set up your development environment, that is, clone our boilerplate application and get you ready to start developing your first marketplace application.<h2>Pre-requisites</h2>Before setting up the development environment in your local machine, you must make sure the below software is installed:1. <a href="https://docs.npmjs.com/downloading-and-installing-node-js-and-npm">NPM</a> - v8.1.4 or greater2. <a href="https://nodejs.org/en/download">NodeJS</a> - v14.18.2 or greater Then, <a href="https://github.com/contentstack/marketplace-academycourse-app" target="_blank">Download or clone the Marketplace app boilerplate repo from our GitHub repo.</a>The boilerplate application consists of the following file structure:<h2>Project Folder Structure</h2>There are two main working directories. The project root, which is used for all Locations except for JSON RTE. The JSON RTE plugin logic is managed and developed within [root]/rte.└── marketplace-academycourse-app //Main Project Directory ├── CODEOWNERS ├── LICENSE ├── README.md ├── SECURITY.md ├── manifest.json ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── rte //Main RTE Plugin directory │ ├── CODEOWNERS │ ├── LICENSE │ ├── README.md │ ├── SECURITY.md │ ├── docs │ │ ├── api-reference.md │ │ └── images │ │ ├── BlockLeaf.png │ │ ├── BlockTypes.png │ │ ├── Dropdown.jpg │ │ ├── Path.png │ │ ├── Point.png │ │ └── Range.png │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── plugin.tsx │ │ ├── solution-1.txt │ │ └── solution-2.txt │ ├── tsconfig.json │ ├── webpack.academy.js │ ├── webpack.common.js │ ├── webpack.dev.js │ ├── webpack.prod.js │ └── yarn.lock ├── src │ ├── assets │ │ ├── Field_Modifier.svg │ │ ├── Icon.svg │ │ ├── appconfig.svg │ │ ├── assetsidebar.svg │ │ ├── customfield.svg │ │ ├── fullScreenGraphics.svg │ │ ├── fullscreen.svg │ │ └── sidebarwidget.svg │ ├── common │ │ ├── contexts │ │ │ ├── appConfigurationExtensionContext.ts │ │ │ ├── customFieldExtensionContext.ts │ │ │ ├── entrySidebarExtensionContext.ts │ │ │ └── marketplaceContext.ts │ │ ├── hooks │ │ │ ├── useAppConfig.ts │ │ │ ├── useAppLocation.ts │ │ │ ├── useAppSdk.tsx │ │ │ ├── useCustomField.tsx │ │ │ ├── useEntry.tsx │ │ │ ├── useFrame.ts │ │ │ ├── useHostUrl.ts │ │ │ ├── useInstallationData.tsx │ │ │ └── useSdkDataByPath.ts │ │ ├── locales │ │ │ └── en-us │ │ │ └── index.ts │ │ ├── providers │ │ │ ├── AppConfigurationExtensionProvider.tsx │ │ │ ├── CustomFieldExtensionProvider.tsx │ │ │ ├── EntrySidebarExtensionProvider.tsx │ │ │ └── MarketplaceAppProvider.tsx │ │ ├── types │ │ │ └── types.ts │ │ └── utils │ │ └── functions.ts │ ├── components │ │ ├── AppFailed.tsx │ │ └── ErrorBoundary.tsx │ ├── containers │ │ ├── 404 │ │ │ └── 404.tsx │ │ ├── App │ │ │ └── App.tsx │ │ ├── AssetSidebarWidget │ │ │ ├── AssetSidebar.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── ConfigScreen │ │ │ ├── AppConfiguration.tsx │ │ │ └── solution.txt │ │ ├── CustomField │ │ │ ├── CustomField.tsx │ │ │ ├── solution-1.txt │ │ │ ├── solution-2.txt │ │ │ └── styles.scss │ │ ├── DashboardWidget │ │ │ ├── StackDashboard.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── FieldModifier │ │ │ ├── FieldModifier.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── FullPage │ │ │ ├── FullPage.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ ├── SidebarWidget │ │ │ ├── EntrySidebar.tsx │ │ │ ├── solution.txt │ │ │ └── styles.scss │ │ └── index.tsx │ ├── index.css │ ├── index.tsx │ ├── react-app-env.d.ts │ └── reportWebVitals.ts └── tsconfig.json &nbsp; Tip: For each exercise in this course, you can access the "solution" code for each modified file in their respective folders within the files named as solution.txt or solution-X.txt.&nbsp;Those files can be used to fix any issues or missed steps while performing the exercises.<h2>Dependency Installation and Application Run</h2>Using your terminal or command prompt, navigate to the root directory of the downloaded repo and execute the following commands:npm install npm startThe first command will install all the npm dependencies. Once dependencies are installed, execute the second command to start the development server. The server will start in the port 3000, <a href="http://localhost:3000">http://localhost:3000</a>In this boilerplate the JSON RTE plugin can be started and tested as a separate service. It can not be started along with the react app that we use for other UI locations. To start the JSON RTE plugin service, follow below steps.To setup and run the JSON RTE plugin example, using your terminal, navigate to the /rte directory of the downloaded repository and execute the following commands:npm install npm startLike before, the first command will install the npm dependencies and the second command will start the development server. The server will start in the port 3000 <a href="http://localhost:3000">http://localhost:3000</a>Most of the development in this course will take place within the container folder located at: src/containers.Below are the containers that are available in the boilerplate:<ul><li>404 - This is just an example react component that can be used to render in the UI during 404 errors.</li><li>App - This is the top level container for the react app that is getting rendered in the index.tsx of react app. This contains definitions of all the routes that are available in our app.</li><li>AssetSidebarWidget - This container has the component that gets rendered in the asset sidebar UI location of our app. This can be used for reading asset data and updating its properties</li><li>ConfigScreen - This container has the component that gets rendered in the configuration UI location of our app. All the credentials needed to integrate the 3rd party system should be updated here.</li><li>CustomField - This container has the component that gets rendered in the custom field UI location. This is the major location where the data from 3rd party systems gets added into the entry of Contentstack.</li><li>DashboardWidget - This container has the component that gets rendered in the Dashboard UI location of the stack. This location can be used to display analytics data of the stack.</li><li>FieldModifier - This container has the component that gets rendered in the Field Modifier UI location. This location is available at each field level in the entry page. This can be used to extend capabilities of entry fields , so that apps can appear only on defined data types.</li><li>FullPage - This container has the component that gets rendered in the Full Page UI location. This location can be used for doing bulk activities on entries.</li><li>SidebarWidget - This container has the component that gets rendered in the SidebarWidget UI location. This can be used to display more detailed information of the data of a 3rd party system or can even be used to update workflow or actual data of entries.</li></ul><h2>JSON RTE PLUGINS</h2>The JSON RTE Plugin will be implemented in the rte/src.&nbsp;A couple scripts are provided to build and deploy the compiled plugin code into the create-react-app&nbsp;public folder so it can be served from there.<h2>Video: Development Environment Setup</h2>The following video walks you through the process of downloading the boilerplate app, and preparing your code editor, so you can perform the exercises in the following modules.<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/FPrCCQqd-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="01 - Development Environment Setup" style="position: absolute;" allowfullscreen=""></iframe></div>

Development Environment Setup for Marketplace

In this section you will register your app in Developer Hub.The Contentstack Developer Hub is an app development framework/portal that developers can leverage to rapidly build, host, and publish ready-to-use private or public apps. For more information about Developer Hub, please refer to the <a href="https://www.contentstack.com/docs/developers/developer-hub">Developer Hub documentation</a>.Note: To complete this module is mandatory that you have your application running locally in Visual Studio Code, so make sure that you run the npm start command and that your application is running and browsable in port 3000, To confirm your application is running, go to&nbsp;<a href="http://localhost:3000">http://localhost:3000</a>. you should see the following screen: <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9baf8e24ad9fac41/67ddd1beefd8a977054c06d5/BuildingMarketplaceApps_L1_img-1.png" alt="BuildingMarketplaceApps_L1_img-1.png" height="auto"/> Next, you will access the Developer Hub and register your application. To do so, follow these steps:1. <a href="https://www.contentstack.com/login/">Log in to your Contentstack account</a>.2. In the left-hand-side primary navigation, you will find the Developer Hub section (as shown below). Click the icon to go to the Developer Hub.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt80ff7d7c1ff2bc95/67ddd1da782bfb1d246f5b22/BuildingMarketplaceApps_L4_img-2.png" alt="BuildingMarketplaceApps_L4_img-2.png" height="auto"/>3. Click the +New App button at the top right corner of the page.4. In the New App modal, provide a name and a description for your application. E.g. Sample App.Notice this type of applications are considered private as they will not be publicly available in Contentstack’s marketplace.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt584d5bc4b9b2c57c/67ddd1f3983a65221b3b8134/BuildingMarketplaceApps_L4_img-3.png" alt="BuildingMarketplaceApps_L4_img-3.png" height="auto"/>5. Next, click Create.6. Next you will be presented with your application’s Information Page. Here you get access to your application’s basic information, and optionally you can upload an icon for your application. Once you are satisfied with the application’s name, description and icon, click Save to save your application’s data.&nbsp;<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb20872c72a9d764f/67ddd211c566eea1c65e05ac/BuildingMarketplaceApps_L4_img-4.png" alt="BuildingMarketplaceApps_L4_img-4.png" height="auto"/>7. Next you will register all the UI locations this boilerplate application implements. To do so, you will click the UI Locations section on the left navigation bar. This will take you to the UI Locations Page.8. In the UI Locations Page, enter the App URL in the input field. The App URL is the url where your application is hosted. Since we are running the boilerplate locally on port 3000, you will enter the following value in the App URL field: http://localhost:3000<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltca8399c374d7fda5/67ddd229c566ee43de5e05b0/BuildingMarketplaceApps_L4_img-5.png" alt="BuildingMarketplaceApps_L4_img-5.png" height="auto"/> 9. Next we will register the different UI locations supported by the Boilerplate Application. In the following picture you can see a list of all the different supported extension locations.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte073ab35b2984bbd/67ddd243443bd642a3f1d063/BuildingMarketplaceApps_L4_img-6.png" alt="BuildingMarketplaceApps_L4_img-6.png" height="auto"/>10. Add the following locations by clicking the +Add&nbsp;button that shows up when you mouse over the different Available Location(s), e.g:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt54fc7725493b90a5/67ddd258632b9325acd4a744/BuildingMarketplaceApps_L4_img-7.png" alt="BuildingMarketplaceApps_L4_img-7.png" height="auto"/> &nbsp;Note: The name for each UI Location is optional, and can be used to override the default app name. Once you provide the necessary data as described below, click the&nbsp;Save&nbsp;button at the bottom right corner of the page.<h2>Custom Field</h2>Name:&nbsp;Sample App&nbsp; Path: /custom-field Data Type: JSON&nbsp;&nbsp; Multiple: checked Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0660fcf65e5af419/67ddd27cf7eccc8cb390dd93/BuildingMarketApps_L4_img-8.png" alt="BuildingMarketApps_L4_img-8.png" height="auto"/><h3> Stack Dashboard &nbsp;</h3>Name: Sample App Path: /stack-dashboard Default Width: Full Width Enabled: on <img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2801a882269d8baa/67ddd295cb02417c5f41baf5/BuildingMarketApps_L4_img-9.png" alt="BuildingMarketApps_L4_img-9.png" height="auto"/> <h2>Asset Sidebar</h2>Name:&nbsp;Sample App Path: /asset-sidebar Enabled: on Width: 500<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt465d51e71080deaf/67ddd2ae37e25a0c8b1e4be3/BuildingMarketApps_L4_img-10.png" alt="BuildingMarketApps_L4_img-10.png" height="auto"/> App ConfigurationPath: /app-configuration Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf7a9e25a026d071e/67ddd2c145b2297837911ba8/BuildingMarketApps_L4_img-11.png" alt="BuildingMarketApps_L4_img-11.png" height="auto"/> <h2>JSON RTE</h2>Name: Sample App Path: /json-rte.js Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt998120cf9e693e24/67ddd3535e486df27471bb8b/BuildingMarketApps_L4_img-12.png" alt="BuildingMarketApps_L4_img-12.png" height="auto"/><h2>Entry Sidebar</h2>Name: Sample App Description: Example JSON RTE Path: /entry-sidebar Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt38f2afe06ed1a224/67ddd3683a0f383e7e00f05f/BuildingMarketApps_L4_img-13.png" alt="BuildingMarketApps_L4_img-13.png" height="auto"/><h2>Field&nbsp;Modifier</h2>Name: Sample App Path: /field-modifier Allowed Field Types: All Enabled: on<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9c735c8481833e23/67ddd37ea6d88e2861053a14/BuildingMarketApps_L4_img-14.png" alt="BuildingMarketApps_L4_img-14.png" height="auto"/><h2>Full Page</h2>Name: Full Page Example Path: /full-page Enabled: onFor full page integrations, this location supports the ability to upload an icon. This icon is then displayed in the main left navigation icon list.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8218c8dd05f02172/67ddd3930c6f554d721fd454/BuildingMarketApps_L4_img-15.png" alt="BuildingMarketApps_L4_img-15.png" height="auto"/>Make sure that all the locations have been added and that you clicked "Save" for each of them. You should see the following in your Enabled Location(s) list:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltfec1818564c23a2e/67ddd3a845b229ab4b911bb0/BuildingMarketApps_L4_img-16.png" alt="BuildingMarketApps_L4_img-16.png" height="auto"/>11.&nbsp; Next you will install this application on a Stack. To do so, click the “Install” button on the top right corner of the screen.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt9463c65f9c2664d9/67ddd3c15e486d864171bb91/BuildingMarketApps_L4_img-17.png" alt="BuildingMarketApps_L4_img-17.png" height="auto"/> 12. Next, Select the stack where you want to install the app and click the Install button.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7d2a83f254f6b4bf/67ddd3d7a6d88e5250053a1b/BuildingMarketApps_L4_img-18.png" alt="BuildingMarketApps_L4_img-18.png" height="auto"/>Note: make sue you accept the Terms of Service, and click&nbsp;Install.13. You will be redirected to the configuration page of the app. This is the App configuration location we registered earlier. At this time, no configuration needs to be provided here, but for a real world marketplace app, this is where developers would provide input fields and configure their application. For now you will see an empty configuration&nbsp;screen like this:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteedfa72cad67f1de/67ddd40cc9b8d450e7d14779/BuildingMarketApps_L4_img-19.png" alt="BuildingMarketApps_L4_img-19.png" height="auto"/>14. Click Save&nbsp;at the bottom right corner.15. Next, click the&nbsp;Open Stack&nbsp;button. Congratulations! You registered and installed your first Marketplace App using Automation Hub. In the following modules you will learn how to modify the logic inside the different locations and add your own ui elements and functionality.We will provide example code and will guide you step by step.Additionally, here are some screenshots of&nbsp;examples of configuration screens for different apps available in Contentstack’s marketplace:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/TjUGn0H1-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="02 - Registering The Boilerplate App" style="position: absolute;" allowfullscreen=""></iframe></div>

Creating App in Developer Hub and Installing the App

In this module you will take a look at the source code and do some modifications and you will see those changes taking effect in the UI as you make them.The marketplace boilerplate app is based on React, more specifically a Client-Side-Rendered app. You can learn more about React’s standard setup by looking at the create-react-app template in which this boilerplate is based.The React app rendering starts from the file “/src/index.tsx”. In that file, the App component is imported and wrapped with Browser Router which handles routing for the application, and allows you to navigate through the different locations registered before.Next, the App component is defined at “/src/containers/App/App.tsx”. Here all the registered routes that are needed for the app are defined. Notice how the urls here match the ones used while registering them in Developer Hub.Best Practice: Instead of directly importing the components of each route, you can import inside React.lazy() and wrap it inside the component of react for better performance of the app. This will improve the initial loading time of the application in the browser making the components load lazily for routes as needed and only when requested.The following code snippet illustrates this concept:<pre>const AppConfigurationExtension = React.lazy(() =&gt; import("../ConfigScreen/AppConfiguration"));&nbsp;...&nbsp;&lt;Routepath="/uri-endpoint-for-your-route"element={&lt;Suspense&gt;&lt;NewProviderOfTheRoute&gt;&lt;NewComponentOfTheRoute /&gt;&lt;/NewProviderOfTheRoute&gt;&lt;/Suspense&gt;}/&gt;;
 </pre>In the following modules, you will browse through the available UI locations along with their corresponding routes and code.

Implementing App Locations Introduction

The App Config UI Location allows you to manage all the settings for your app centrally. You need to configure it once and all the other locations (where the app is installed) can access these configurations.The app configuration page is a separate entity that allows you to configure your application. Setting up an app configuration page allows you to store all the config settings for your application and secure their access from a single location.<h2>Use Case</h2>Imagine&nbsp;we are going to build an e-commerce&nbsp;app to integrate an e-commerce platform with Contentstack. Normally, these applications offer different configuration parameters that need to be saved and used to communicate with them.&nbsp;&nbsp;You&nbsp;can leverage the app configuration UI&nbsp;Location to manage those parameters,&nbsp;such as API Key, Store Id, Channels, Locales...To save these app configuration values, you have to use the app sdk framework. You can refer to the code below which initializes the app sdk framework and gets the config object from the app sdk and sets it into a state variable.This state variable can be used in future for displaying in the UI Component of configuration screen. Here you can find an example code snippet:import ContentstackAppSdk from "@contentstack/app-sdk"; &nbsp; const [state, setState] = useState&lt;TypeAppSdkConfigState&gt;({ installationData: { configuration: {}, serverConfiguration: {}, }, setInstallationData: (): any =&gt; {}, appSdkInitialized: false, }); &nbsp; useEffect(() =&gt; { ContentstackAppSdk.init() .then(async (appSdk) =&gt; { const sdkConfigObject = appSdk?.location?.AppConfigWidget?.installation; if (sdkConfigObject) { const installationDataFromSDK = await sdkConfigObject.getInstallationData(); const setInstallationDataOfSDK = sdkConfigObject.setInstallationData; setState({ ...state, installationData: installationDataFromSDK, setInstallationData: setInstallationDataOfSDK, appSdkInitialized: true, }); } }) .catch((error) =&gt; { console.error("appSdk initialization error", error); }); }, []); &nbsp;The configuration values will be available in the installationData attribute of the object that we get from appSdk object, too.The installationData is an object which has two keys in it:<ol><li>configuration - This should have all the insensitive configs of an app as this will be available in all the other UI locations.</li><li>serverConfiguration - This should have all the sensitive / critical information= of the configs. This will only be sent through webhooks. Users of the app will never get these values in other UI locations.</li></ol>Once the configurations are set using the code above, whenever the user (installer) changes any values in the configuration screen, state.installationData() can be called by passing updated configuration and serverConfiguration values as shown below. That way the app sdk saves the updated values for this installation, persisting them for the application to use when loading in the different locations. Here is a code snipped to do so:state.setInstallationData({ configuration: updatedConfigurationObject, serverConfiguration: updatedServerConfigurationObject, }); &nbsp;<h2>Exercise 1</h2>In this exercise, you will add a&nbsp;form with an input box to your configuration screen. Then you will capture the text entered in such input field and store it in Contentstack's application&nbsp;configuration. The value will be persisted and will be displayed in the input field every time you access the configuration screen so users can manage it.<ul><li>Using your code editor, access the file located at:&nbsp;src/containers/ConfigScreen/AppConfiguration.tsx</li><li>Import the following react components from the Contenstack venus components library:</li></ul><ol><li>import { Field, FieldLabel, Form, TextInput, } from "@contentstack/venus-components"; &nbsp;</li></ol><ul><li>Copy the following JSX snipped and replace the {/* add form code here */} placeholder with it:</li></ul><ol><li>&lt;Form className="config-wrapper"&gt; &lt;Field&gt; &lt;FieldLabel required htmlFor="title"&gt; {localeTexts.ConfigScreen.page.label} &lt;/FieldLabel&gt; &lt;TextInput type="text" required value={state?.installationData?.configuration?.title} placeholder={localeTexts.ConfigScreen.page.placeholder} name="title" onChange={updateConfig} /&gt; &lt;/Field&gt; &lt;/Form&gt;</li></ol><ul><li>Add the below function inside the component:</li><li>const updateConfig = async (e: any) =&gt; { // eslint-disable-next-line prefer-const let { name: fieldName, value: fieldValue } = e?.target || {}; if (typeof fieldValue === "string") fieldValue = fieldValue?.trim(); const updatedConfig = state?.installationData?.configuration || {}; updatedConfig[fieldName] = fieldValue; &nbsp; if (typeof state?.setInstallationData !== "undefined") { await state?.setInstallationData({ ...state.installationData, configuration: updatedConfig, }); } &nbsp; return true; };</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/ConfigScreen/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/ConfigScreen/AppConfiguration.tsx&nbsp;file.</li><li>You should see the following Configuration screen in your browser:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt65ba5d2c51370f0a/67ddd47a20a3dc1de3f82d1c/BuildingMarketApps_L6_img-1.png" alt="BuildingMarketApps_L6_img-1.png" height="auto"/></li><li>From this moment on, as soon as the value in the input field changes, it gets saved. If you reload the page you will see that the value is persisted.</li></ul>This exercise just show you how to to save and read configuration from Consesntack for your marketplace applications. As a developer, you can create your own interface with differnt UI elements and as many inputs as needed to store as many configuration parameters as needed, too. These configuration parameters are then available in the rest of the locations, shall you need to use them in other places.Tip: make sure you go over the entire code in the file to get a better understanding on how the logic access the configuration.If you want to learn more about this location, please visit our documentation: <a href="https://www.contentstack.com/docs/developers/developer-hub/app-config-location">App Configuration Location</a>In the next module you will create a Custom Field.&nbsp;&nbsp;<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/yUZpejhH-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="03 - Exercise 1 - App Configuration Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: App Configuration

<h1>Implementing App Locations: Custom Field</h1>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&nbsp;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&nbsp;in the entry from third-party systems such as Digital Asset Management systems Product Information Management systems, etc...<h2>Use Case</h2>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.&nbsp;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"; &nbsp; const [state, setState] = useState&lt;TypeAppSdkConfigState&gt;({ config: {}, entry: {}, location: {}, appSdkInitialized: false, }); useEffect(() =&gt; { ContentstackAppSdk.init() .then(async (appSdk) =&gt; { 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) =&gt; { console.error("appSdk initialization error", error); }); }, []); &nbsp;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);<h2>Exercise 2</h2>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.<ul><li>Using your code editor, access the file located at:&nbsp;src/containers/CustomField/CustomField.tsx</li><li>Import the following react components from the Contenstack venus components library:</li><li>import { Tag, cbModal } from "@contentstack/venus-components";</li><li>Create the following two new functions inside the component. This code will display a modal dialog upon clicking on a button:</li><li>const productModal = (props: any) =&gt; ( &lt;ProductModal updateSelectedItems={updateSelectedItems} // eslint-disable-next-line react/jsx-props-no-spreading {...props} /&gt; ); &nbsp; const handleClick = () =&gt; { cbModal({ component: productModal, modalProps: { onClose: () =&gt; {}, onOpen: () =&gt; {}, size: "xsmall", }, }); }; &nbsp;</li><li>Add the below code in &nbsp;the&nbsp;renderCustomFile function to replace the placeholder that &nbsp;says “{//add tag code here}”.</li><li>&lt;Tag version="v1" tags={selectedItems} onChange={(tags: any) =&gt; setSelectedItems(tags)} /&gt; &nbsp;</li><li>Next, create a new file named ProductModal.tsx in the following folder:&nbsp;src/containers/CustomField/</li><li>Paste the following code into the file:</li><li>import { Button, ButtonGroup, Field, FieldLabel, ModalBody, ModalFooter, ModalHeader, TextInput, } from "@contentstack/venus-components"; import React, { useState } from "react"; &nbsp; import localeTexts from "../../common/locales/en-us"; &nbsp; const ProductModal = ({ updateSelectedItems, ...props }: any) =&gt; { const [name, setName] = useState(""); &nbsp; return ( &lt;&gt; &lt;ModalHeader title={localeTexts.CustomField.productModal.header} closeModal={props?.closeModal} /&gt; &lt;ModalBody className="audienceModalBody"&gt; &lt;Field&gt; &lt;FieldLabel required htmlFor="name"&gt; {"Name"} &lt;/FieldLabel&gt; &lt;TextInput type="text" name="name" placeholder={localeTexts.CustomField.productModal.placeholder} onChange={(e: any) =&gt; setName(e.target.value)} /&gt; &lt;/Field&gt; &lt;/ModalBody&gt; &lt;ModalFooter&gt; &lt;ButtonGroup&gt; &lt;Button buttonType="light" onClick={props?.closeModal}&gt; {localeTexts.CustomField.productModal.cancelButton} &lt;/Button&gt; &lt;Button buttonType="secondary" icon="AddPlusBold" onClick={() =&gt; { updateSelectedItems(name); props?.closeModal(); }} &gt; {localeTexts.CustomField.productModal.confirmButton} &lt;/Button&gt; &lt;/ButtonGroup&gt; &lt;/ModalFooter&gt; &lt;/&gt; ); }; &nbsp; export default React.memo(ProductModal); &nbsp;</li><li>Next, import this file into the CustomField.tsx component. Add this import to the&nbsp;src/containers/CustomField/CustomField.tsx&nbsp;file:</li><li>import ProductModal from "./ProductModal";</li><li>In that same field, make sure you associate the&nbsp;handleClick&nbsp;function with the button&nbsp;onClick&nbsp;property as follows:</li><li>&lt;Tag version="v1" tags={selectedItems} onChange={(tags: any) =&gt; setSelectedItems(tags)} /&gt;</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/CustomField/solution-1.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/CustomField/CustomField.tsx&nbsp;file. Likewise, you can replace the contents of&nbsp;src/containers/CustomField/ProductModal.tsx with the solution provided in the&nbsp;src/containers/CustomField/solution-2.txt&nbsp;file.</li><li>At this point your custom field is ready. In order to visualize it, you will need to create a content type or modify an existing one to use the Custom Field. You can read more about how to manage custom fields in our <a href="https://www.contentstack.com/docs/developers/create-custom-fields/about-custom-fields">documentation portal</a>, more specifically the <a href="https://www.contentstack.com/docs/developers/create-custom-fields/use-custom-field-in-content-types">Use Custom Field in Content Types</a> section.</li><li>These screenshots illustrate the process of creating a content type with a custom field:<ul><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3bdd6e185d07d7cd/67ddd4d120a3dc8816f82d21/BuildingMarketApps_L7_img-1.png" alt="BuildingMarketApps_L7_img-1.png" height="auto"/></li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2801f429b2fb846d/67ddd4e84a89c3021ba308e8/BuildingMarketApps_L7_img-2.png" alt="BuildingMarketApps_L7_img-2.png" height="auto"/></li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt504f1d0eace9effc/67ddd4fcb1a1f3084c3efdc9/BuildingMarketApps_L7_img-3.png" alt="BuildingMarketApps_L7_img-3.png" height="auto"/></li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8f85a7850c0adb36/67ddd510b1a1f303f33efdcf/BuildingMarketApps_L7_img-4.png" alt="BuildingMarketApps_L7_img-4.png" height="auto"/></li><li>Once you have a content type that uses the custom field, go ahead an create an entry, you should see something like this:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt72d974f5cacafa58/67ddd527314d6717471b7525/BuildingMarketApps_L7_img-5.png" alt="BuildingMarketApps_L7_img-5.png" height="auto"/></li></ul></li><li>As you can see the "Custom" filed displays. Go ahead and click the +Add button. You will see the dialog popping up. This example provides an input field for you to enter a value. In a real-world scenario, you can display here available attributes from your Product Information Management system, and save those in the entry.&nbsp;</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltbf2ccc07a99ab0b1/67ddd539db243fef1c12c82d/BuildingMarketApps_L7_img-6.png" alt="BuildingMarketApps_L7_img-6.png" height="auto"/></li><li>Next click Save to save the entry data. The value you entered will be persisted as part of the entry data and the next time you open it, it will be displayed in the custom field.&nbsp;</li></ul>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: <a href="https://www.contentstack.com/docs/developers/developer-hub/custom-field-location">Custom Field Location</a>In the next module you will create a Stack Dashboard Widget.<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/ha1xvQic-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="04 - Exercise 2 - Custom Field Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: Custom Field

The Sidebar Location provides the ability to integrate&nbsp;functionalities&nbsp;into your stack to analyze your entry content and recommend ideas.This Sidebar location&nbsp;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&nbsp;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.&nbsp;<h2>Use Case</h2>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,&nbsp; you can use Sidebar Widget UI location to display the complete details of a product&nbsp;selected from a third&nbsp;party e-commerce platform that has been added&nbsp; 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"; &nbsp; const [state, setState] = useState&lt;TypeAppSdkConfigState&gt;({ config: {}, entryData: {}, location: {}, appSdkInitialized: false, }); useEffect(() =&gt; { ContentstackAppSdk.init() .then(async (appSdk) =&gt; { const config = await appSdk?.getConfig(); const entryData = appSdk.location.SidebarWidget?.entry?.getData(); setEntryData(data); setState({ config, entryData, location: appSdk.location, appSdkInitialized: true, }); }) .catch((error) =&gt; { console.error("appSdk initialization error", error); }); }, []); &nbsp;<h2>Exercise 3</h2>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.<ul><li>Using your code editor, access the file located at:&nbsp;src/containers/SidebarWidget/EntrySidebar.tsx</li><li>In that file, locate the renderProduct function.</li><li>In that function replace the return&nbsp;statement with the following code snippet</li><li>return ( &lt;ol&gt; {products?.map((item: string, index: number) =&gt; ( &lt;li key={index} className="list"&gt;{`${index + 1}. ${item}`}&lt;/li&gt; ))} &lt;/ol&gt; );</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/SidebarWidget/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/SidebarWidget/EntrySidebar.tsx&nbsp;file.</li><li>Using the left navigation bar, select the Entries section.</li><li>Next, find the entry you saved when you developed the Custom Field Location.</li><li>From the editorial form screen, using the right sidebar, open the Widgets&nbsp;section, and select&nbsp;Sample App:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt4cd2348d25be477d/67ddd582f7eccc6e4b90ddb2/BuildingMarketApps_L8_img-1.png" alt="BuildingMarketApps_L8_img-1.png" height="auto"/></li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt764c0be74ab65029/67ddd596b1a1f3788a3efdd8/BuildingMarketApps_L8_img-2.png" alt="BuildingMarketApps_L8_img-2.png" height="auto"/></li><li>Once opened, you should see something like this:&nbsp;</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt3de3dd3f8ab894ad/67ddd5b32d0b9838c7fd0b18/BuildingMarketApps_L8_img-3.png" alt="BuildingMarketApps_L8_img-3.png" height="auto"/></li></ul>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: <a href="https://www.contentstack.com/docs/developers/developer-hub/sidebar-location">Entry Sidebar Location</a>Next, you will develop a Dashboard Widget.<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/PvtdeOfs-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="05 - Exercise 3 - Entry Sidebar Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: Entry Sidebar

The Dashboard Location is a type of location that lets you create widgets for your&nbsp;stack dashboard. Using this location, you can create several useful widgets. Consider a&nbsp;widget that does the following operations:<ul><li>Shows real-time data of stack usage</li><li>Lists all the entries published recently</li><li>Allows you to add your "To-Dos" for the day or take notes.&nbsp;</li></ul>Contentstack loads this location of your app inside an iframe in the Dashboard of your Stack. Like in previous modules,&nbsp;you can use the app sdk framework to, for example,&nbsp; 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.<h2>Use Case</h2>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&nbsp;as follows:useEffect(() =&gt; { ContentstackAppSdk.init() .then(async (appSdk: any) =&gt; { const config = await appSdk.getConfig(); const currentUser = appSdk?.currentUser; const stack = appSdk?.stack; setState({ config, currentUser, stack, appSdkInitialized: true, }); }) .catch((err: any) =&gt; { 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.&nbsp;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&nbsp;and whether the particular updated product data is published to the site or not.&nbsp;Again, the possibilities are endless.<h2>Exercise 4</h2>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.<ul><li>Using your code editor, access the file located at:&nbsp;src/containers/DashboardWidget/StackDashboard.tsx</li><li>In that file, within the available react component, create a state variable for the entry count:</li><li>const [entriesCounts, setEntriesCounts] = useState&lt;any&gt;([]);</li><li>While initializing the appSDK, use the following code snippet to retrieve all the content types in the stack:</li><li>const { content_types } = (await appSdk?.location?.DashboardWidget?.stack?.getContentTypes()) || {};</li><li>Next, you will use the apSDK to query for all the entries for all the content types. Here is the code:</li><li>let entriesCountObj = await Promise.all( content_types?.map(async (content_type: any) =&gt; { 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);</li><li>Next, import the following component from the Venus Component Library by pasting int into the file:</li><li>import { InfiniteScrollTable } from "@contentstack/venus-components";</li><li>The InfiniteScrollTable&nbsp;component you just imported requires a columns object to use for its columns definition. Use the following code to define the table columns:</li><li>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, }, ];<ul><li>To read more on how to use InfiniteScrollTable, refer to the <a href="https://venus-storybook.contentstack.com/?path=/story/overview-getting-started--page">Venus Components Documentation</a></li></ul></li><li>To signal the loaded state of the rows in the Table, you need to populate the itemStatusMap object. To do that, you will:<ul><li>Initialize the itemStatusMap:</li><li>let itemStatusMap: any = {}; &nbsp;</li><li>Then, set the state as ‘loaded’ when the entriesCount is set:</li><li>useEffect(() =&gt; { entriesCounts.forEach( (_: any, index: any) =&gt; (itemStatusMap[index] = "loaded") ); }, [entriesCounts, itemStatusMap]);</li><li>And lastly, render the InifinteScrollTable in the DOM:</li><li>&lt;div className="dashboard"&gt; &lt;div className="dashboard-container"&gt; {state?.appSdkInitialized &amp;&amp; ( &lt;&gt; &lt;h2&gt;Entries Count&lt;/h2&gt; &lt;InfiniteScrollTable data={entriesCounts} columns={columns} uniqueKey={"uid"} totalCounts={entriesCounts.length} fetchTableData={() =&gt; {}} loadMoreItems={() =&gt; {}} itemStatusMap={itemStatusMap} /&gt; &lt;/&gt; )} &lt;/div&gt; &lt;/div&gt;</li></ul></li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/DashboardWidget/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/DashboardWidget/StackDashboard.tsx&nbsp;file.</li><li>Now, go back to your Stack Dashboard. You can do so, by clicking the top `Dashboard` icon in the left navigation bar.</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt042ebb93137ccbdc/67ddd6065e486d10db71bba7/BuildingMarketApps_L9_img-1.png" alt="BuildingMarketApps_L9_img-1.png" height="auto"/></li><li>You will see your Stack Dashboard Widget. It should look similar to this:&nbsp;</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt8051783e925f5d8d/67ddd61ac566ee763c5e05d7/BuildingMarketApps_L9_img-2.png" alt="BuildingMarketApps_L9_img-2.png" height="auto"/></li></ul>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: <a href="https://www.contentstack.com/docs/developers/developer-hub/dashboard-location">Stack Dashboard Location</a>In the next module you will implement the Asset Sidebar Widget location.<h2>Video: Implementing Stack Dashboard Location</h2>The following video walks you through the previous exercise steps so you can review and follow along:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/KGErhOYQ-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="06 - Exercise 4 - Stack Dashboard Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: Stack Dashboard

The Asset Sidebar Location lets you create customized sidebar widgets that extend the functionality of your&nbsp;assets&nbsp;and enhance their editorial experience to suit your needs. You can efficiently manage, transform, and optimize the assets in your&nbsp;stack.The Asset Sidebar Widget location is located in&nbsp;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.&nbsp;<h2>Use Case</h2>One of the most common use cases in Contenstack to leverage the entry sidebar location, is typically when you want to add additional metadata&nbsp;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 <a href="https://www.contentstack.com/marketplace/image-preset-builder">Image Preset Builder</a>.In order to read the configuration values and the asset data you can use the following code snippet:useEffect(() =&gt; { ContentstackAppSdk.init() .then(async (appSdk) =&gt; { const config = await appSdk.getConfig(); const asset = appSdk?.location?.AssetSidebarWidget?.currentAsset; await setState({ config, asset, appSdkInitialized: true, }); }) .catch((sdkError: any) =&gt; { console.error("Error while initializing app sdk: ", sdkError); }); }, []);<h2>Exercise 5</h2>In this exercise you will display the data from the asset in the sidebar, in a field-value pair fashion.&nbsp;Using your code editor, access the file located at:&nbsp;src/containers/AssetSidebarWidget/AssetSidebar.tsx<ul><li>In that file, inside&nbsp;the AssetSidebarExtension, add the following code snippet to create a state variable to store the asset data:</li><li>const [assetData, setAssetData] = useState&lt;any&gt;({});</li><li>Inside the&nbsp;useEffect&nbsp;code, and within the appSdk.init()&nbsp;, add&nbsp;the following code snippet to use the appSdk object to set the data in your local state:</li><li>const assetDataFromLocation = await appSdk?.location?.AssetSidebarWidget?.getData(); setAssetData(assetDataFromLocation);</li><li>Next, you add the following JSX snippet in that same file. Look for this placeholder:&nbsp;{/* your code goes here */}, and replace it with this code:</li><li>&lt;div&gt;Filename : {assetData?.filename}&lt;/div&gt; &lt;div&gt; Dimensions : {assetData?.dimension?.height} x {assetData?.dimension?.width} &lt;/div&gt; &lt;div&gt;URL: {assetData?.url}&lt;/div&gt;</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/AssetSidebarWidget/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/AssetSidebarWidget/AssetSidebar.tsx&nbsp;file.</li><li>Using the left navigation bar, select the Assets section.</li><li>Next, find an asset and click on it. This will display the asset details. This will work on any asset.</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blted35390bdd69fe1a/67ddd6c2a714582179b9bae8/BuildingMarketApps_L10_img-4.png" alt="BuildingMarketApps_L10_img-4.png" height="auto"/></li><li>From the editorial form screen, using the right sidebar, open the Widgets&nbsp;section, and select&nbsp;Sample App:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt35b158833dab0fd8/67ddd65fa6d88e507e053a3a/BuildingMarketApps_L10_img-1.png" alt="BuildingMarketApps_L10_img-1.png" height="auto"/></li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7a0fd085c01578dd/67ddd677cb0241239641bb1e/BuildingMarketApps_L10_img-2.png" alt="BuildingMarketApps_L10_img-2.png" height="auto"/></li><li>Once opened, you should see something like this:&nbsp;</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb24e5863574c6103/67ddd68c17f7b4e3e20d0698/BuildingMarketApps_L10_img-3.png" alt="BuildingMarketApps_L10_img-3.png" height="auto"/></li></ul>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&nbsp;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: <a href="https://www.contentstack.com/docs/developers/developer-hub/asset-sidebar-location">Asset Sidebar Location</a>Next, you will develop a Full Page location extension.<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/DPAOTyRt-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="07 - Exercise 5 - Asset Sidebar Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: Asset Sidebar

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:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt93aed1b21138c5c7/67ddd703460eb4e71e947d6b/BuildingMarketApps_L11_img-1.png" alt="BuildingMarketApps_L11_img-1.png" height="auto"/>In that location, the app sdk framework exposes the&nbsp;application configuration data, as well as other objects such as the stack, user, etc... similar to the Stack Dashboard Widget location.&nbsp;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.&nbsp;<h2>Use Case</h2>One of the most common use cases in Contenstack to leverage the full page&nbsp;location, is typically when you want to add additional functionality or a custom application&nbsp;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&nbsp;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 <a href="https://www.contentstack.com/docs/developers/marketplace-apps/release-preview">Release Preview</a> marketplace app.In order to read the configuration values and the get access to the available objects in this location,&nbsp;you can use the following code snippet:useEffect(() =&gt; { ContentstackAppSDK.init().then(async (appSdk) =&gt; { const config = await appSdk?.getConfig(); setState({ config, location: appSdk?.location, appSdkInitialized: true, }); }); }, []);<h2>Exercise 6</h2>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.&nbsp;Using your code editor, access the file located at:&nbsp;src/containers/FullPage/FullPage.tsx<ul><li>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:</li><li>import { Select } from "@contentstack/venus-components";</li><li>Now, inside&nbsp;the FullPageExtension component, add the following code snippet to create a state variable to store the available content types:</li><li>const [contentTypes, setContentTypes] = useState&lt;any[]&gt;();</li><li>Inside the&nbsp;useEffect&nbsp;code, and within the appSdk.init()&nbsp;, add&nbsp;the following code snippet to get all the available content types from the stack object and to store them in the previously defined state:</li><li>const { content_types } = (await appSdk?.location?.FullPage?.stack?.getContentTypes()) || {}; setContentTypes(content_types);</li><li>Next, you will&nbsp;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:</li><li>const [contentTypeOptions, setContentTypeOptions] = useState&lt;any[]&gt;([]); const [selectedContentType, setSelectedContentType] = useState&lt;any&gt;("");</li><li>Additionally, you will need to add the following&nbsp;code snippet, after the existing useEffect&nbsp;hook:</li><li>useEffect(() =&gt; { if (!state.appSdkInitialized) return; let dropdownOptions: any = []; contentTypes?.forEach((contentType: any) =&gt; { dropdownOptions.push({ label: contentType?.title, value: contentType?.uid, }); }); setContentTypeOptions(dropdownOptions); }, [contentTypes]);</li><li>Next, you will need a listener to update the selected Content Type whenever the user selects a different value.&nbsp;Add&nbsp; the following code snippet right after the code you just pasted:</li><li>const handleDropdownChange = (e: any) =&gt; { setSelectedContentType(e); };</li><li>Next, you will add the UI Select dropdown element.&nbsp; Replace the {/* your code goes here */} placeholder with the following code:</li><li>&lt;Select options={contentTypeOptions} value={selectedContentType} onChange={handleDropdownChange} placeholder="Select Content Type" selectLabel="Content Type" /&gt;;</li><li>Now that we are done with the data retrieval and UI selection of content types, let's work on the display of the entries associated with each content type. For that you will need:<ul><li>A state variable to store the current list of entries</li><li>A function that will retrieve the entries for the selected content type</li><li>A&nbsp;useEffect&nbsp;hook that will run every time the content type selection changes, and that will update the table accordingly.</li></ul></li><li>Copy the following code inside your&nbsp;FullPageExtension right before the return&nbsp;statement:</li><li>const [entriesData, setEntriesData] = useState&lt;any[]&gt;([]); &nbsp; const getEntriesOfAContentType = async (contentTypeUid: any) =&gt; { const { entries } = (await state?.location?.FullPage?.stack ?.ContentType(contentTypeUid) .Entry.Query() .find()) || {}; setEntriesData(entries); }; &nbsp; useEffect(() =&gt; { if (!Object.keys(selectedContentType).length) return; getEntriesOfAContentType(selectedContentType?.value); }, [selectedContentType]);</li><li>And lastly, let's add the UI component and code to display the table of entries. We will be using the&nbsp;InfiniteScrollTable&nbsp;&nbsp;component like we did previously in a past module. Let's import that component adding this clause at the top of the file:</li><li>import { InfiniteScrollTable } from "@contentstack/venus-components";</li><li>Now, right before the return statement, paste&nbsp;this snippet to define the columns of our table:</li><li>const columns = [ { Header: "Title", accessor: "title", columnWidthMultiplier: 1.9, }, { Header: "UID", accessor: "uid", id: "uid", columnWidthMultiplier: 1.5, }, { Header: "Locale", accessor: "locale", columnWidthMultiplier: 1, }, { Header: "Updated At", accessor: (obj: any) =&gt; { return new Date(obj?.updated_at).toUTCString(); }, columnWidthMultiplier: 2, }, ]; &nbsp;</li><li>Note: we have converted the date into a UTC string to display in the table. To learn more about this component, please visit our Venus Component Library <a href="https://venus-storybook.contentstack.com/?path=/story/components-table--default">documentation</a>.</li><li>Let's keep adding some more code. To signal the loaded state of the rows in the Table, you need to maintain a status map object. Copy this code snipped right after the columns&nbsp;variable you just defined:</li><li>let itemStatusMap: any = {}; useEffect(() =&gt; { entriesData?.forEach( (_: any, index: any) =&gt; (itemStatusMap[index] = "loaded") ); }, [entriesData]);</li><li>And lastly, let's add the table UI elements. Copy this JSX snippet right after the Select&nbsp;JSX component you pasted earlier:</li><li>&lt;InfiniteScrollTable data={entriesData} columns={columns} uniqueKey={"uid"} totalCounts={entriesData.length} fetchTableData={() =&gt; {}} loadMoreItems={() =&gt; {}} itemStatusMap={itemStatusMap} /&gt;;</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/FullPage/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/FullPage/FullPage.tsx&nbsp;file.</li><li>Let's take a look at the Full Page extension. From the Stack dashboard screen, access the Full Page location by clicking on the Sample App&nbsp;icon:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltb624c265797a4908/67ddd721f7ecccef8390ddcc/BuildingMarketApps_L11_img-2.png" alt="BuildingMarketApps_L11_img-2.png" height="auto"/></li><li>You should see something like this:</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt7fd8bfdb21f67065/67ddd73a3a0f38bf6800f08b/BuildingMarketApps_L11_img-3.png" alt="BuildingMarketApps_L11_img-3.png" height="auto"/></li><li>Then select a content type form the dropdown and the table should update accordingly</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltba037dbc6447399b/67ddd74e314d6730271b7543/BuildingMarketApps_L11_img-4.png" alt="BuildingMarketApps_L11_img-4.png" height="auto"/></li></ul>As you can see, the full page shows the dropdown with the available content types in the stack, and upon selection, a table with the list of entries based on such content type is also displayed.&nbsp;This is a basic example but should give you the foundation to create your own full page application with a more complex UI as needed.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: <a href="https://www.contentstack.com/docs/developers/developer-hub/full-page-location">Full Page Location</a>Next, you will develop a Field Modifier location extension.<h2>Video: Implementing Full Page Location</h2>The following video walks you through the previous exercise steps so you can review and follow along:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/WaU3dBWx-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="08 - Exercise 6 - Full Page Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: Full Page

The Field Modifier Location is a type of UI location which extends the capabilities of entry fields. With the Field Modifier UI location, you can allow the different apps to appear on defined field data types such as Text, Number, JSON, Boolean, File, Reference fields etc...<h2>Use Case</h2>Using the Field Modifier&nbsp;UI location you can manage the content of a field, you can get the value of a field, modify it according to your use case,&nbsp;&nbsp;and update it in the entry. Form this location, liken in the others, you can get the application configuration, and entry data using Contentstack SDK, too.A common use case can be machine translation of a field, you can send a single field for translation to a third-party system, wait for it response and update the field. You can also use this location to implement logic to get sentiment analysis, ensure that your editors follow your companies messaging guidelines by removing unwanted terms and ensuring that certain others are used etc...You can refer to the sample code below on how to access the field value&nbsp;data and to update the entry as needed:<pre>useEffect&lt;span&gt;(&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; ContentstackAppSdk.&lt;span&gt;init&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; .&lt;span&gt;then&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;async &lt;span&gt;(&lt;/span&gt;appSdk&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;const&lt;/span&gt; config &lt;span&gt;=&lt;/span&gt; await appSdk&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;getConfig&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;const&lt;/span&gt; entryData &lt;span&gt;=&lt;/span&gt; appSdk&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;location&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;FieldModifierLocation&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;field&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;getData&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; &lt;span&gt;||&lt;/span&gt; &lt;span&gt;""&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; appSdk&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;location&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;CustomField&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;frame&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;enableAutoResizing&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; setEntry&lt;span&gt;(&lt;/span&gt;entryData&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; setState&lt;span&gt;(&lt;/span&gt;&lt;span&gt;{&lt;/span&gt; config, location&lt;span&gt;:&lt;/span&gt; appSdk&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;location&lt;/span&gt;, appSdkInitialized&lt;span&gt;:&lt;/span&gt; &lt;span&gt;true&lt;/span&gt;, &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; setLoading&lt;span&gt;(&lt;/span&gt;&lt;span&gt;false&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; .&lt;span&gt;catch&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;error&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; console.&lt;span&gt;error&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;"appSdk initialization error"&lt;/span&gt;, error&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; setError&lt;span&gt;(&lt;/span&gt;&lt;span&gt;"Something went wrong!"&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;, &lt;span&gt;[&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;const&lt;/span&gt; updateEntry &lt;span&gt;=&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;updatedData&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;const&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; location &lt;span&gt;}&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; state&lt;span&gt;;&lt;/span&gt; location.&lt;span&gt;FieldModifierLocation&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;field&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;setData&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;updatedData&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp;</pre><h2>Exercise 7</h2>In this exercise you will show the configuration value stored when using the App Configuration location, and also you will add a button, that when clicked, will capitalize the value of the field.<ul><li>Using your code editor, access the file located at:&nbsp;src/containers/FieldModifier/FieldModifier.tsx</li><li>In that file, locate the {/* your code goes here */}&nbsp;and replace it with this:&nbsp;</li></ul>&lt;&gt;<pre>&lt;h3&gt;{state?.config?.title}&lt;/h3&gt;</pre>&lt;button onClick={() =&gt; updateEntry(entry.toUpperCase())}&gt;Capitalize&lt;/button&gt;<pre>&lt;/&gt;</pre><li>Note: notice how in this case we used a regular button&nbsp;html element as opposed to a Button&nbsp;component from the Venus Component Library. This shows how you can use the library of your choice and any components that might fit better your application and your UI requirements.</li><li>Save your file and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;src/containers/SidebarWidget/solution.txt&nbsp;file, which contents you can copy and paste into the&nbsp;src/containers/SidebarWidget/EntrySidebar.tsx&nbsp;file.</li><li>Using the left navigation bar, select the Entries section.</li><li>Next, find the entry you saved when you developed the Custom Field Location.</li><li>From the editorial form screen, over the title &nbsp;field click the&nbsp;Sample App&nbsp;icon:</li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt2f6625927a6db60e/67ddd9c6986725010d888f6f/BuildingMarketApps_L12_img-1.png" alt="BuildingMarketApps_L12_img-1.png" height="auto"/>You should see something like this:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltf05e3c45b26df693/67ddd9f0632b93877cd4a792/BuildingMarketApps_L12_img-2.png" alt="BuildingMarketApps_L12_img-2.png" height="auto"/>On the field modifier dialog, click the Capitalize button, it should capitalize the value of the field as follows:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/bltcfc1c7bf4056b920/67ddda2b443bd6f690f1d0af/BuildingMarketApps_L12_img-3.png" alt="BuildingMarketApps_L12_img-3.png" height="auto"/><li>As you can see the title has been capitalized.</li>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: <a href="https://www.contentstack.com/docs/developers/developer-hub/field-modifier-location">Field Modifier Location</a>Next, you will develop a JSON RTE extension.<h2>Video: Implementing Field Modifier Location</h2>The following video walks you through the previous exercise steps so you can review and follow along:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/KeJiusJ9-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="09 - Exercise 7 - Field Modifier Location" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: Field Modifier

The JSON Rich Text Editor Plugins lets you add/create custom plugins to extend the functionality of your&nbsp;JSON Rich Text Editor&nbsp;as per your needs. You can use third-party applications to interact with your JSON Rich Text Editor content.<h2>Use Case</h2>With prebuilt plugins such as Highlight, Info Panel, and Word Count, you can enhance the JSON Rich Text Editor (JSON RTE) field. Instead of using separate custom fields to interact with the content within the JSON RTE, create and add plugins to your JSON RTE for real-time adaptiveness.<h2>Exercise 8</h2>For this exercise you will need to navigate to a different location in the project directory to work on the JSON RTE plugin code. Once you complete the exercise a compiled file with the plugin will be placed in the public&nbsp;folder of the main project and will be served as defined in the JSON RTE location path definition.&nbsp;In this exercise you will create a plugin that will capitalize the text in the JSON RTE, similar to the logic implemented for the Field Modifier location.<ul><li>First navigate into the [project-root]/rte/src folder, that's where the core of the work will be done for this exercise.</li><li>Next, in that folder, create a new file under the rte/src&nbsp;folder, and name it academy.tsx</li><li>Copy the following code into the file contents:</li></ul><pre>import &lt;span&gt;{&lt;/span&gt; cloneDeep &lt;span&gt;}&lt;/span&gt; from &lt;span&gt;"lodash"&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;export&lt;/span&gt; &lt;span&gt;const&lt;/span&gt; onClickHandler &lt;span&gt;=&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;rte&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;const&lt;/span&gt; getNode &lt;span&gt;=&lt;/span&gt; rte&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;getNode&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;[&lt;/span&gt;&lt;span&gt;0&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; let rteData&lt;span&gt;:&lt;/span&gt; any &lt;span&gt;=&lt;/span&gt; &lt;span&gt;[&lt;/span&gt;&lt;span&gt;]&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;const&lt;/span&gt; findRteObj &lt;span&gt;=&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;obj&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;for&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;let key in obj&lt;span&gt;)&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;typeof obj&lt;span&gt;[&lt;/span&gt;key&lt;span&gt;]&lt;/span&gt; &lt;span&gt;===&lt;/span&gt; &lt;span&gt;"object"&lt;/span&gt; &lt;span&gt;&amp;amp;&amp;amp;&lt;/span&gt; obj&lt;span&gt;[&lt;/span&gt;key&lt;span&gt;]&lt;/span&gt; &lt;span&gt;!&lt;/span&gt;&lt;span&gt;==&lt;/span&gt; null&lt;span&gt;)&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;if&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;obj&lt;span&gt;[&lt;/span&gt;key&lt;span&gt;]&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;type&lt;/span&gt; &lt;span&gt;===&lt;/span&gt; &lt;span&gt;"p"&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; rteData.&lt;span&gt;push&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;obj&lt;span&gt;[&lt;/span&gt;key&lt;span&gt;]&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;else&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; findRteObj&lt;span&gt;(&lt;/span&gt;obj&lt;span&gt;[&lt;/span&gt;key&lt;span&gt;]&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; findRteObj&lt;span&gt;(&lt;/span&gt;getNode&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;const&lt;/span&gt; path &lt;span&gt;=&lt;/span&gt; rteData&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;map&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;path&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;return&lt;/span&gt; rte&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;getPath&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;path&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;const&lt;/span&gt; rteDataCopy &lt;span&gt;=&lt;/span&gt; cloneDeep&lt;span&gt;(&lt;/span&gt;rteData&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; rteDataCopy.&lt;span&gt;forEach&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;element&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; element&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;children&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;forEach&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;j&lt;span&gt;:&lt;/span&gt; any&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; j.&lt;span&gt;text&lt;/span&gt; &lt;span&gt;=&lt;/span&gt; j&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;text&lt;/span&gt;&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;toUpperCase&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;for&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;let i &lt;span&gt;=&lt;/span&gt; &lt;span&gt;0&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; i &lt;span&gt;&amp;lt;&lt;/span&gt; rteDataCopy&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;length&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; i&lt;span&gt;++&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; rte&lt;span&gt;?&lt;/span&gt;.&lt;span&gt;deleteNode&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;{&lt;/span&gt; at&lt;span&gt;:&lt;/span&gt; path&lt;span&gt;[&lt;/span&gt;i&lt;span&gt;]&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; rte.&lt;span&gt;insertNode&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;rteDataCopy&lt;span&gt;[&lt;/span&gt;i&lt;span&gt;]&lt;/span&gt;, &lt;span&gt;{&lt;/span&gt; at&lt;span&gt;:&lt;/span&gt; path&lt;span&gt;[&lt;/span&gt;i&lt;span&gt;]&lt;/span&gt;, &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp;</pre><li>Save your academy.tsx file&nbsp;and make sure that your application is still running with no errors. </li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;rte/src/solution-1.txt&nbsp;file, which contents you can copy and paste into the&nbsp;rte/src/academy.tsx&nbsp;file.</li><li>Next navigate to the rte/src/plugin.tsx&nbsp;and add the following two import statements:</li><li>import { Icon } from "@contentstack/venus-components"; import React from "react"; import { onClickHandler } from "./academy";</li><li>On that same file, replace the return { }&nbsp;statement with the following code snippet:</li><pre>&lt;span&gt;if&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;&lt;span&gt;!&lt;/span&gt;RTE&lt;span&gt;)&lt;/span&gt; &lt;span&gt;return&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;const&lt;/span&gt; Academy &lt;span&gt;=&lt;/span&gt; RTE&lt;span&gt;(&lt;/span&gt;&lt;span&gt;"academy"&lt;/span&gt;, &lt;span&gt;(&lt;/span&gt;&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;return&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; title&lt;span&gt;:&lt;/span&gt; &lt;span&gt;"Capitalize"&lt;/span&gt;, icon&lt;span&gt;:&lt;/span&gt; &lt;span&gt;&amp;lt;&lt;/span&gt;Icon icon&lt;span&gt;=&lt;/span&gt;&lt;span&gt;"Settings"&lt;/span&gt; &lt;span&gt;/&lt;/span&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;, &lt;span&gt;}&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;//@ts-ignore&lt;/span&gt; Academy.&lt;span&gt;on&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;"exec"&lt;/span&gt;, async &lt;span&gt;(&lt;/span&gt;rte&lt;span&gt;:&lt;/span&gt; RTE&lt;span&gt;)&lt;/span&gt; &lt;span&gt;=&amp;gt;&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; &lt;span&gt;try&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; onClickHandler&lt;span&gt;(&lt;/span&gt;rte&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;catch&lt;/span&gt; &lt;span&gt;(&lt;/span&gt;e&lt;span&gt;)&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; console.&lt;span&gt;error&lt;/span&gt;&lt;span&gt;(&lt;/span&gt;&lt;span&gt;"Error"&lt;/span&gt;, e&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &lt;span&gt;}&lt;/span&gt; &lt;span&gt;}&lt;/span&gt;&lt;span&gt;)&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp; &lt;span&gt;return&lt;/span&gt; &lt;span&gt;{&lt;/span&gt; Academy, &lt;span&gt;}&lt;/span&gt;&lt;span&gt;;&lt;/span&gt; &nbsp;</pre><li>Save your plugin.tsx file and make sure that your application is still running with no errors.</li><li>Tip: in case you might have experienced any issues or your application is erroring, the final code is provided in the&nbsp;rte/src/solution-2.txt&nbsp;file, which contents you can copy and paste into the&nbsp;rte/src/plugin.tsx&nbsp;file.</li><li>Now, for the plugin to be served you will need to build the code and deploy it to the&nbsp;public&nbsp;folder of the main application. If you still have the boilerplate app running, stop it. You can do so, by pressing CNTRL+C in the terminal where the app is running.</li><li>Once the application has stopped you will need to execute the following commands from your terminal:<ul>Navigate to the root location of the rte plugin code: [project-root]/rte/src:cd [project-root]/rte/srcFirst, install the dependencies by running the following command:npm installSecond, build your plugin by running the following command:npm run build-academyNavigate back to the root of the main boilerplate app project&nbsp;[project-root]/srccd [project-root]/srcStart the boilerplate app by running:npm startYou should see something like this if you browse <a href="http://localhost:3000/json-rte.js">http://localhost:3000/json-rte.js</a></ul><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt979797fe9bc4c1d2/67e19cad914c24e15e497198/BuildingMarketApps_L13_img-1.png" alt="BuildingMarketApps_L13_img-1.png" height="auto"/></li>Next, we will need to add a JSON RTE field to our Sample Content Type and activate the plugin so we can see it in action. To do that take the following steps:<ul><li>Using the left navigation bar, click on the Content Models section</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt51fdd596b74fba88/67e19cf8e5b23a6e6a9473b2/BuildingMarketApps_L13_img-2.png" alt="BuildingMarketApps_L13_img-2.png" height="auto"/></li><li>The select the Sample Content Type&nbsp;content type you created during the entry sidebar exercise. Alternatively you can use other Content Type, these steps work for any content type.</li><li>Add a JSON Rich Text Editor field to your content type<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte173e1cba4a4c832/67e19d24d148ed8ae2a3fd72/BuildingMarketApps_L13_img-3.png" alt="BuildingMarketApps_L13_img-3.png" height="auto"/></li></ul><ul><li>Choose the&nbsp;Sample App&nbsp;plugin</li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt0f30322a1f5db900/67e19f04b9f9a644badc4021/BuildingMarketApps_L13_img-4.png" alt="BuildingMarketApps_L13_img-4.png" height="auto"/></li><li>Save the content type and open an entry based on it. You can go to the Entries section as described on the previous Module where you created the entry sidebar location extension.</li><li></li><li><img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blteab33dc0720c7457/67e19f7f42bb03fbb96247ae/BuildingMarketApps_L13_img-5.png" alt="BuildingMarketApps_L13_img-5.png" height="auto"/></li></ul><li><ul>Once in the editor view of the entry, navigate to the JSON RTE field, type some content and select it. For example type in Marketplace App Example.<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blt5d06c6668747a45b/67e19fbc8f508c4aad13970d/BuildingMarketApps_L13_img-6.png" alt="BuildingMarketApps_L13_img-6.png" height="auto"/>Once you have some text selected,&nbsp;click on the toolbar "settings"&nbsp;icon. The text should be capitalized:<img src="https://images.contentstack.io/v3/assets/bltebc53cfaf0dd6403/blte7e41ae577695ea8/67e1a040e6ff226fb40d14da/BuildingMarketApps_L13_img-7.png" alt="BuildingMarketApps_L13_img-7.png" height="auto"/></ul></li>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 JSON RTE plugins, please visit our documentation: <a href="https://www.contentstack.com/docs/developers/json-rich-text-editor-plugins/create-new-json-rte-plugin">Create JSON RTE Plugins</a>Congratulations! You just finished implementing the last UI Location supported by Marketplace Apps.In the next module you will get access to some best practices and useful tips to develop your Marketplace Apps.<h2>Video: Implementing JSON RTE Plugin</h2>The following video walks you through the previous exercise steps so you can review and follow along:<div style="position: relative;overflow: hidden;padding-bottom: 56.25%;"><iframe src="https://cdn.jwplayer.com/players/Zr9I2gbF-b769H14u.html" width="100%" height="100%" frameborder="0" scrolling="auto" title="10 - Exercise 8 - Json Rte Plugin" style="position: absolute;" allowfullscreen=""></iframe></div>

Implementing App Locations: JSON RTE

Developers can follow these guidelines and simplify the application development process, its management, and its reviewing and&nbsp;approval process while building their applications.<ol><li>Use Venus Components Library: For building the UI, we strongly recommend to use Venus Components Library as it provides various UI components of contentstack. It makes the app’s UI consistent with Contenstack.</li><li>Define Project Structure: While building a project, defining a scalable project structure is essential. The architecture and infra of the project depends on your app’s complexity. Define reusable components as smaller as possible to make it available in all the higher order of other components. You can use component-centric structure or any other structure of your choice. For larger UI projects, it's better to define themes for CSS and use it across the app.</li><li>Follow Naming Conventions: Throughout the project, follow standard naming conventions. Developers can use the Pascal case to name components and Camel case to name the functions/ methods inside the components. Also for functions/methods used within a file locally can be prefixed with an underscore _. For temporary variables that are used in loops or anonymous functions, snake case can be used.</li><li>Thorough E2E code testing: Avoid potential errors by thorough automated test cases. To provide a quality experience to end users, a good end to end automated testing is suggested strongly. You can also use linters, pre-commit hooks to avoid syntax errors in code during the development phase itself.</li><li>Logging and Monitoring: Writing logs helps to analyze various analytics and performance of the app. As a best practice, you can even use one of suitable logging libraries available. Its recommended to write detailed log events and avoid logging sensitive data/credentials.</li><li>App Security:Apps should have the capability to encrypt data exchanged over the internet using HTTPS.Store client ID and client secret keys securely. We suggest you store them as environmental variables. It is mandatory for OAuth Apps to authenticate using an OAuth token.Also, it is highly recommended to use App signing feature for apps that have backend APIs to interact with the 3rd party systems. App signing is the feature/method through which the app can verify whether it is loaded inside contentstack only. When the app signing feature is enabled, Contentstack will attach an app-token in the source URL of the app iframe where it is loaded. Users can fetch the app-token, decode and verify it to confirm that the request is from Contentstack. This can prevent any other attackers from loading the app on their site. For verifying the app-token, you might need a public key. Below is the code snippet explaining the logic to verify the app-token from Contentstack.</li></ol><pre>const jwt = require("jsonwebtoken"); const appToken = req.params["app-token"]; const publicKey = ( await axios("https://app.contentstack.com/.well-known/public-keys.json") ).data["signing-key"]; try { const { app_uid, installation_uid, organization_uid, user_uid, stack_api_key, } = jwt.verify(appToken, publicKey); console.info("app token is valid!"); } catch (e) { console.error( "app token is invalid or request is not initiated from Contentstack!" ); }</pre><h2>Next Steps</h2>You can look into <a href="https://www.contentstack.com/docs/developers/developer-hub/contentstack-oauth">implementing OAuth with marketplace apps</a>. If OAuth is enabled for an app, then contentstack will redirect to the OAuth endpoint upon installation by providing the access tokens and refresh tokens, which the apps can save in backend and use in future to communicate with Contentstack for authenticated actions.<h2>Deploying and Hosting Your Application</h2>Once the app is developed, for building the app, you can execute npn run build&nbsp;command will result in creation of a build folder inside the project’s root directory. The contents of this build directory can be hosted in any of the static file hosting servers like AWS S3, for making the app publicly accessible on a hosted environment. Alternatively you can host your APP using Contentstack Launch, too. If you want to learn more about the Contenstack Launch service, please <a href="https://www.contentstack.com/docs/developers/automation-hub-connectors/launch">visit our documentation</a>.

Best Practices, Tips and Next Steps

Through completing this course you have learned how to properly setup your development environment to work with the <a href="https://github.com/contentstack/marketplace-app-boilerplate">marketplace boilerplate app</a>. In addition, you implemented all the available extension locations in Contentstack's UI, namely
 Additional Resources:<ul><li><a href="https://www.contentstack.com/docs">Contentstack Documentation</a></li><li><a href="https://www.contentstack.com/docs/developers">Developer's Guide</a></li><li><a href="https://www.contentstack.com/docs/developers/developer-hub/marketplace-app-boilerplate">Marketplace App Boilerplate Installation Guide</a></li><li><a href="https://www.contentstack.com/docs/developers/developer-hub">Developer Hub</a></li><li><a href="https://www.contentstack.com/docs/developers/marketplace-apps">Marketplace Applications</a></li><li><a href="https://www.contentstack.com/docs/developers/marketplace-platform-guides">Marketplace Platform Guides</a></li><li><a href="https://www.contentstack.com/docs/developers/developer-hub/marketplace-ecommerce-app-boilerplate">Marketplace e-commerce App Boilerplate</a></li></ul>

Summary

<h3>Welcome to Introduction to Marketplace Applications&nbsp;Course!</h3> This course is intended to introduce developers to the process of creating new Marketplace Apps and installing them in Contenstack.&nbsp;Required for this course:<ol><li>Account in Contentstack with access to an Organization&nbsp;as an Administrator or Developer. Create a training Org/Stack <a href="https://www.contentstack.com/academy/">here</a>. Training stacks are available for 25 days. Alternatively, you can bootstrap a <a href="https://www.contentstack.com/docs/developers/cli/bootstrap-starter-apps">Starter App via the CLI</a> or from the <a href="https://app.contentstack.com/#!/marketplace/starters">Marketplace</a>.&nbsp;</li><li>Permissions to create new Marketplace Apps in Developer Hub.</li><li>Permissions to install Developer Hub Applications in your stack.&nbsp;</li><li>Assets for all the walkthroughs can be found on <a href="https://github.com/contentstack/marketplace-academycourse-app">Github</a>.</li><li>Contentstack Community account. If you do not have one, you can visit <a href="http://community.contentstack.com/">community.contentstack.com/</a> and register for a new account. You can adjust your email notifications under your profile at&nbsp;<a href="https://community.contentstack.com/settings/general">https://community.contentstack.com/settings/general</a>&nbsp;﹥ Settings.</li></ol>

Building Marketplace Apps

Building Marketplace Apps

Welcome to Introduction to Marketplace Applications Course!

Skills Covered

About the Course