About UI Locations

A UI Location allows you to extend the functionality of the Contentstack application. These UI locations facilitate you to customize the experience by customizing Contentstack's default UI and behavior. You can use different locations to build an experience that integrates third-party applications.
For example, you can add a custom field location to add images from your Cloudinary account.

The Contentstack App Framework allows all the UI elements to be bundled together into a single application. Once this app has been created, it can be distributed as a single application based on the application's use case.

The Contentstack App Framework currently supports the following UI locations:

• Custom Field Location
• Dashboard Location
• Asset Sidebar Location
• App Config Location
• RTE Location
• Sidebar Location

Add UI Locations to your App

To enhance the user experience of an application, multiple UI locations can be added.

To add multiple UI locations within a single app, use the following code snippet:

"ui_location": {
      "locations": [
        {
          "type": "cs.cm.stack.sidebar",
          "meta": []
        },
        {
          "type": "cs.cm.stack.dashboard",
          "meta": []
        },
        {
          "type": "cs.cm.stack.config",
          "meta": []
        }
      ],
      "signed": true,
      "base_url": "<<url_generated_via_ngrok>>"
    }</url_generated_via_ngrok>>

You can also have multiple fields within a UI location:

"ui_location": {
      "locations": [
        {
          "type": "cs.cm.stack.custom_field",
          "meta": [
            {
              "signed": true,
              "path": "/product-field",
              "name": "Product - BigCommerce",
              "data_type": "json"
            },
            {
              "signed": true,
              "path": "/category-field",
              "name": "Category - BigCommerce",
              "data_type": "json"
            }
          ]
      }
      ],
      "signed": true,
      "base_url": "http://localhost:4000"
    }