Skip to main content
Version: 3.x

Extending Dashboard with Apps

info

This feature was introduced in Saleor 3.1.

Key concepts

App extensions allow applications to alter the dashboard's interface by contributing custom buttons, menu items, screens, and modal overlays. It's a convenient way to add new features and capabilities without maintaining a custom dashboard application fork.

All contributed views are embedded inside an <iframe> to protect against XSS attacks.

Manifest

A single App can provide multiple extensions. You can add each extension by specifying it in the App's manifest. The example manifest below defines two extensions, one providing a custom product action that opens a modal overlay and the second one providing an alternative product creation page:

{
...
"extensions": [
{
"label": "Create with Sample app",
"mount": "PRODUCT_DETAILS_MORE_ACTIONS",
"target": "POPUP",
"permissions": [
"MANAGE_PRODUCTS"
],
"url": "https://example.com/extension/"
},
{
"label": "Create with App and redirect",
"mount": "PRODUCT_OVERVIEW_CREATE",
"target": "APP_PAGE",
"permissions": [
"MANAGE_PRODUCTS"
],
"url": "/extension/redirect"
}
],
}
Expand ▼
  • label: The name which will be displayed in the dashboard.
  • mount: The place where the extension will be mounted.
  • target: The method of presenting the interface (defaults to POPUP). POPUP will present the interface in a modal overlay, APP_PAGE will navigate to the application page.
  • permissions: An array of permissions required for a user to access the extension.
  • url: The URL of the view to display. You can skip the domain and protocol when target is set to APP_PAGE, or when your manifest defines an appUrl. When target is set to POPUP, the url will be used to render an <iframe>.

Possible mounting places

Saleor requires extensions to define a mounting place. The table below explains all mounting locations currently supported by Saleor.

MountDescription
PRODUCT_DETAILS_MORE_ACTIONSMount extension on product's detail page under the more action button.
PRODUCT_OVERVIEW_CREATEMount extension on product's list page under the create button.
PRODUCT_OVERVIEW_MORE_ACTIONSMount extension on product's list page under the more action button.
NAVIGATION_CATALOGMount extension in Catalogs section in the navigation bar.
NAVIGATION_ORDERSMount extension in Orders section in the navigation bar.
NAVIGATION_CUSTOMERSMount extension in Customers section in the navigation bar.
NAVIGATION_DISCOUNTSMount extension in Discounts section in the navigation bar.
NAVIGATION_TRANSLATIONSMount extension in Translations section in the navigation bar.
NAVIGATION_PAGESMount extension in Pages section in the navigation bar.
ORDER_DETAILS_MORE_ACTIONSMount extension on order's detail page under the more action button.
ORDER_OVERVIEW_CREATEMount extension on order's list page under the create button.
ORDER_OVERVIEW_MORE_ACTIONSMount extension on order's list page under the more action button.

Was this page helpful?