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

Copy
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:

Copy
['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

Copy
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:

Copy
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

Copy
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"]
});

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

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

localechange

localechange: string
The "localechange" 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

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

Last updated 12/7/2023

Was this helpful?

Yes

No