addOnUISdk.app.ui

Provides you with UI related values from the Adobe Express host application where the add-on is running, so you can do things such as detect the current locale or theme in use to update your add-on user interface accordingly.

Properties

theme

Access the theme currently set in Adobe Express. This value is accessed via the AddOnSdk.app.ui object, so you should ensure you only access this object after the AddOnSdk is initialized (via the ready).

Values

A string containing the current theme value. Currently "light" is the only theme supported.

Example Usage

addOnUISdk.ready.then(async () => {    
    console.log(addOnUISdk.app.ui.theme); // output is "light"
});
Copied to your clipboard
addOnUISdk.ready.then(async () => {    
    console.log(addOnUISdk.app.ui.theme); // output is "light"
});

locale

Access the locale currently set in Adobe Express. This value is accessed via the addOnUISdk.app.ui object, so you should ensure you only access this object after the addOnUISdk is initialized (via the addOnUISdk.ready).

Values

A string containing the current locale value. Current locale could be one of:

['cy-GB', 'da-DK', 'de-DE', 'en-US', 'es-ES', 'fi-FI', 'fr-FR', 'it-IT', 
'ja-JP', 'ko-KR', 'nb-NO', 'nl-NL', 'pt-BR', 'sv-SE', 'zh-Hans-CN', 'zh-Hant-TW','zz-ZZ']
Copied to your clipboard
['cy-GB', 'da-DK', 'de-DE', 'en-US', 'es-ES', 'fi-FI', 'fr-FR', 'it-IT', 
'ja-JP', 'ko-KR', 'nb-NO', 'nl-NL', 'pt-BR', 'sv-SE', 'zh-Hans-CN', 'zh-Hant-TW','zz-ZZ']

Example Usage

addOnUISdk.ready.then(async () => {    
    console.log(addOnUISdk.app.ui.locale); // output "es-ES" 
});
Copied to your clipboard
addOnUISdk.ready.then(async () => {    
    console.log(addOnUISdk.app.ui.locale); // output "es-ES" 
});

locales

Access all locales currently supported in Adobe Express. This value is accessed via the addOnUISdk.app.ui object, so you should ensure you only access this object after the AddOnSdk is initialized (via the addOnUISdk.ready).

Values

A string array containing the supported locales:

locales: 
    ['cy-GB', 'da-DK', 'de-DE', 'en-US', 'es-ES', 'fi-FI', 'fr-FR', 'it-IT', 'ja-JP', 'ko-KR', 'nb-NO', 'nl-NL', 'pt-BR', 'sv-SE', 'zh-Hans-CN', 'zh-Hant-TW', 'zz-ZZ']
Copied to your clipboard
locales: 
    ['cy-GB', 'da-DK', 'de-DE', 'en-US', 'es-ES', 'fi-FI', 'fr-FR', 'it-IT', 'ja-JP', 'ko-KR', 'nb-NO', 'nl-NL', 'pt-BR', 'sv-SE', 'zh-Hans-CN', 'zh-Hant-TW', 'zz-ZZ']

Example Usage

addOnUISdk.ready.then(async () => {    
    console.log(JSON.stringify(addOnUISdk.app.ui.locales)) 
    // output is ["cy-GB","da-DK","de-DE","en-US","es-ES","fi-FI","fr-FR","it-IT","ja-JP","ko-KR","nb-NO","nl-NL","pt-BR","sv-SE","zh-Hans-CN","zh-Hant-TW","zz-ZZ"]
});
Copied to your clipboard
addOnUISdk.ready.then(async () => {    
    console.log(JSON.stringify(addOnUISdk.app.ui.locales)) 
    // output is ["cy-GB","da-DK","de-DE","en-US","es-ES","fi-FI","fr-FR","it-IT","ja-JP","ko-KR","nb-NO","nl-NL","pt-BR","sv-SE","zh-Hans-CN","zh-Hant-TW","zz-ZZ"]
});

format

Access the regional format currently set in Adobe Express to display dates, times, numbers, etc. This value is accessed via the addOnUISdk.app.ui object, so you should only access this object after the addOnUISdk is initialized (via the addOnUISdk.ready).

Values

A string containing the current format value. Current regional format could be one of:

["ms-MY", "cs-CZ", "cy-GB", "da-DK", "de-DE", "de-LU", "de-AT", "de-CH", "et-EE", 
"en-AU", "en-CA", "en-GB", "en-HK", "en-IN", "en-IE", "en-IL", "en-NZ", "en-SG", 
"en-ZA", "en-US", "es-AR", "es-CL", "es-CO", "es-CR", "es-EC", "es-ES", "es-GT", 
"es-419", "es-MX", "es-PE", "es-PR", "fr-BE", "fr-CA", "fr-FR", "fr-LU", "fr-CH", 
"hr-HR", "id-ID", "it-IT", "it-CH", "lv-LV", "lt-LT", "hu-HU", "nl-BE", "nl-NL", 
"nb-NO", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "sk-SK", "sl-SI", "sr-Latn-RS", "fi-FI", 
"sv-SE", "vi-VN", "tr-TR", "el-GR", "bg-BG", "ru-RU", "uk-UA", "he-IL", "ar-AE", 
"ar-KW", "ar-SA", "ar-QA", "ar-EG", "ne-NP", "mr-IN", "hi-IN", "bn-IN", "ta-IN", 
"te-IN", "th-TH", "ko-KR", "zh-Hant-HK", "ja-JP", "zh-Hans-CN", "zh-Hant-TW"]
Copied to your clipboard
["ms-MY", "cs-CZ", "cy-GB", "da-DK", "de-DE", "de-LU", "de-AT", "de-CH", "et-EE", 
"en-AU", "en-CA", "en-GB", "en-HK", "en-IN", "en-IE", "en-IL", "en-NZ", "en-SG", 
"en-ZA", "en-US", "es-AR", "es-CL", "es-CO", "es-CR", "es-EC", "es-ES", "es-GT", 
"es-419", "es-MX", "es-PE", "es-PR", "fr-BE", "fr-CA", "fr-FR", "fr-LU", "fr-CH", 
"hr-HR", "id-ID", "it-IT", "it-CH", "lv-LV", "lt-LT", "hu-HU", "nl-BE", "nl-NL", 
"nb-NO", "pl-PL", "pt-BR", "pt-PT", "ro-RO", "sk-SK", "sl-SI", "sr-Latn-RS", "fi-FI", 
"sv-SE", "vi-VN", "tr-TR", "el-GR", "bg-BG", "ru-RU", "uk-UA", "he-IL", "ar-AE", 
"ar-KW", "ar-SA", "ar-QA", "ar-EG", "ne-NP", "mr-IN", "hi-IN", "bn-IN", "ta-IN", 
"te-IN", "th-TH", "ko-KR", "zh-Hant-HK", "ja-JP", "zh-Hans-CN", "zh-Hant-TW"]

Example Usage

addOnUISdk.ready.then(async () => {    
    console.log(addOnUISdk.app.ui.format); // output "en-GB" 
});
Copied to your clipboard
addOnUISdk.ready.then(async () => {    
    console.log(addOnUISdk.app.ui.format); // output "en-GB" 
});

Methods

openEditorPanel

Programmatically open the Editor panel in Adobe Express. When sub-tabs are available, this method can target them, as well as pre-populate the Search field.

IMPORTANT: This method is currently experimental only and should not be used in any add-ons you will be distributing until it has been declared stable. To use this method, you will first need to set the experimentalApis flag to true in the requirements section of the manifest.json.

Signature

openEditorPanel(panel: EditorPanel, action?: PanelAction): void;

Parameters

Name	Type	Description
`panel`	`string`	`EditorPanel` constant value.
`action?`	`Object`	`PanelAction` object.

`PanelAction`

Name	Type	Description
`type`	`string`	`PanelActionType` constant value.

`SearchAction`

Extends the PanelAction object and adds the following options for the Search action:

Name	Type	Description
`type`	`string`	`PanelActionType.search` constant value.
`searchString`	`string`	Query used to perform the Search action.

`NavigateAction`

Extends the PanelAction object and adds the following options for the Navigation action:

Name	Type	Description
`type`	`string`	`PanelActionType.navigate` constant value.
`tab?`	`string`	`ElementsTabs` or `MediaTabs` constant values
`collectionId?`	`string`	collectionId of the asset collection to navigate to

Actions Notes

Actions are currently not supported on every Editor panel. Please find the supported actions for each panel below:

Action	Supported panels
Search	Templates, Media, Elements, Text, Your stuff, Search
Navigate to Collection	Templates, Media, Elements, Text
Navigate to Tab	Media, Elements

Both Collection and Tab navigation can be executed in combination.

Example usage

JavaScript

TypeScript

import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
const { constants } = addOnUISdk;
const { PanelActionType, EditorPanel } = constants;
 
addOnUISdk.ready.then(() => {
  const action = { 
    type: PanelActionType.search, 
    searchString: "test" 
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});
 
// Navigate to collection
addOnUISdk.ready.then(() => {
  const action = { 
    type: PanelActionType.navigate, 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});
 
// Navigate to tab
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    tab: "photos"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});
 
// Navigate to tab + collection
addOnUISdk.ready.then(() => {
  const action: NavigateAction = { 
    type: PanelActionType.navigate, 
    tab: "photos", 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});
Copied to your clipboard
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
const { constants } = addOnUISdk;
const { PanelActionType, EditorPanel } = constants;
 
addOnUISdk.ready.then(() => {
  const action = { 
    type: PanelActionType.search, 
    searchString: "test" 
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});
 
// Navigate to collection
addOnUISdk.ready.then(() => {
  const action = { 
    type: PanelActionType.navigate, 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});
 
// Navigate to tab
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    tab: "photos"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});
 
// Navigate to tab + collection
addOnUISdk.ready.then(() => {
  const action: NavigateAction = { 
    type: PanelActionType.navigate, 
    tab: "photos", 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});

import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
const { constants } = addOnUISdk;
const { PanelActionType, EditorPanel } = constants;

addOnUISdk.ready.then(() => {
  const action: SearchAction = {
    type: PanelActionType.search, 
    searchString: "test"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});

// Navigate to collection
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});
 
// Navigate to tab 
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    tab: "photos"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});
 
// Navigate to tab + collection
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    tab: "photos", 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});
Copied to your clipboard
import addOnUISdk from "https://new.express.adobe.com/static/add-on-sdk/sdk.js";
const { constants } = addOnUISdk;
const { PanelActionType, EditorPanel } = constants;

addOnUISdk.ready.then(() => {
  const action: SearchAction = {
    type: PanelActionType.search, 
    searchString: "test"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});

// Navigate to collection
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.templates, action); 
});
 
// Navigate to tab 
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    tab: "photos"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});
 
// Navigate to tab + collection
addOnUISdk.ready.then(() => {
  const action: NavigateAction = {
    type: PanelActionType.navigate, 
    tab: "photos", 
    collectionId: "urn:aaid:sc:VA6C2:cd6aa706-12f2-525b-9500-3d23bc663882"
  };
  addOnUISdk.app.ui.openEditorPanel(EditorPanel.media, action); 
});

Events

themechange

themechange: string
The "themechange" event is fired when the user changes the UI theme in Adobe Express. It's used with the addOnUISdk.app.on function.

Parameters

N/A

Return Value

N/A

Example Usage

addOnUISdk.app.on("themechange", (data) => {
  applyTheme(data.theme); 
});
Copied to your clipboard
addOnUISdk.app.on("themechange", (data) => {
  applyTheme(data.theme); 
});

Please see the swc sample provided in the code samples within the contributed folder as a reference for how to use the theme in your own add-on.

localechange

localechange: string
The "localechange" event is fired when the user changes the UI locale in Adobe Express. It's used with the addOnUISdk.app.on function.

Parameters

N/A

Return Value

N/A

Example Usage

addOnUISdk.app.on("localechange", (data) => {
  applyTheme(data.locale);
});
Copied to your clipboard
addOnUISdk.app.on("localechange", (data) => {
  applyTheme(data.locale);
});

formatchange

formatchange: string
The "formatchange" event is fired when the user changes the UI format in Adobe Express. It's used with the addOnUISdk.app.on function.

Parameters

N/A

Return Value

N/A

Example Usage

addOnUISdk.app.on("formatchange", (data) => {
  console.log(data.format);
});
Copied to your clipboard
addOnUISdk.app.on("formatchange", (data) => {
  console.log(data.format);
});

oauth

instance

Last updated 12/7/2023

Was this helpful?

Yes

addOnUISdk.app.ui

Properties.css-83mclq{margin-left:var(--spectrum-global-dimension-size-100);}

theme.css-jmmyhj{margin-left:var(--spectrum-global-dimension-size-50);}

Values

Example Usage

locale

Values

Example Usage

locales

Values

Example Usage

format

Values

Example Usage

Methods

openEditorPanel

Signature

Parameters

PanelAction

SearchAction

NavigateAction

Actions Notes

Example usage

Events

themechange

Parameters

Return Value

Example Usage

localechange

Parameters

Return Value

Example Usage

formatchange

Parameters

Return Value

Example Usage

Properties

theme

`PanelAction`

`SearchAction`

`NavigateAction`