Interface: PageApi

Defines page-level APIs available to solutions.

Hierarchy

• PageApiProperties

  ↳ PageApi

Index

Properties

• favicon
• modal
• preventDefaultCombos
• spinner
• title
• viewportTakeover

Methods

• done
• generateShellUrl
• iframeReload
• openInNewTab
• shellRedirect

Properties

favicon

• favicon: string

Inherited from PageApiProperties.favicon

Gets or set the favicon for the page. If this isn't set, then the default experience cloud favicon will be used.

Example:

Copy
page.favicon = "https://img.icons8.com/color/48/000000/thumb-up.png";
Copied to your clipboard
page.favicon = "https://img.icons8.com/color/48/000000/thumb-up.png";

modal

• modal: boolean

Inherited from PageApiProperties.modal

Configuration to show/hide a modal with fullscreen overlay. Defaults to false.

Example:

Copy
page.modal = true;
Copied to your clipboard
page.modal = true;

preventDefaultCombos

• preventDefaultCombos: object[]

Inherited from PageApiProperties.preventDefaultCombos

An array of key combinations for the shell to prevent default browser behavior on in cases where an application performs some other action.

Example:

Copy
page.preventDefaultCombos = [
  {
    ctrlKey: true,
    key: 's'
  }
];
Copied to your clipboard
page.preventDefaultCombos = [
  {
    ctrlKey: true,
    key: 's'
  }
];

spinner

• spinner: boolean

Inherited from PageApiProperties.spinner

Gets or sets a value indicating whether or not to show a spinner on the page. This configuration value is NOT used for the initial loading spinner (see Route Configuration hideInitialSpinner for that), but can be used to dismiss it if the spinner needs to be dismissed before a solution invokes runtime.done().

Example:

Copy
page.spinner = true;
Copied to your clipboard
page.spinner = true;

title

• title: string

Inherited from PageApiProperties.title

Gets or sets the title of the page.

Example:

Copy
page.title = 'Adobe Experience Cloud';
Copied to your clipboard
page.title = 'Adobe Experience Cloud';

viewportTakeover

• viewportTakeover: boolean

Inherited from PageApiProperties.viewportTakeover

Configuration to alter the z-index ordering of the Shell and iframe based on whether viewport takeover is needed.

Some applications will need to open a view that takes up the entire viewport of the browser. This works by increasing the size of the iframe the entire height of the viewport and using the z-index property to switch between the header or the content (iframe) being on top. To make this work seamlessly, a DOM element with id="shell-placeholder" is automatically added to the top of the document.body container. The Unified Shell adds a height property to the DOM element, effectively pushing down the rest of the application's UI below the Shell UI.

By default, the Shell will have a higher z-index than the iframe, so it will be usable. In order to alternate the z-index values, putting the iframe above the Shell, set:

Copy
page.viewportTakeover = true;
Copied to your clipboard
page.viewportTakeover = true;

Now the solution application is 100% of the browser's viewport and can open any views at 100%. When the takeover is complete, set the value back to false to return the Shell to the top of the application.

Methods

done

▸ done(): void

Tells the Shell that the Solution has loaded and is ready to be used by a user and dismisses the initial loading spinner.

Example:

Copy
page.done();
Copied to your clipboard
page.done();

Returns: void

generateShellUrl

▸ generateShellUrl(location: LocationLike): string

Method to take a relative path or full iframe URL and generate a unified shell url.

Example:

Copy
// returns `https://experience.adobe.com/#/@tenant/solution/abc`
page.generateShellUrl({path: '/abc'});

// returns `https://experience.adobe.com/#/@tenant/solution/abc`
page.generateShellUrl({href: 'https://example.com/abc'});
Copied to your clipboard
// returns `https://experience.adobe.com/#/@tenant/solution/abc`
page.generateShellUrl({path: '/abc'});

// returns `https://experience.adobe.com/#/@tenant/solution/abc`
page.generateShellUrl({href: 'https://example.com/abc'});

Parameters:

Returns: string

The shell URL for the specified view of the solution.

iframeReload

▸ iframeReload(): void

Triggers the reload of the solution iframe. Calling this function will regenerate the iframe source, triggering the discovery URL flow if configured.

Example:

Copy
page.iframeReload();
Copied to your clipboard
page.iframeReload();

Returns: void

openInNewTab

▸ openInNewTab(path: string): void

Opens the specified URL in the shell in a new tab. This is useful in scenarios where an element won't be an anchor or link and solution needs to open the URL.

Example:

Copy
page.openInNewTab('/path');
Copied to your clipboard
page.openInNewTab('/path');

Parameters:

Returns: void

shellRedirect

▸ shellRedirect(path: string): void

Redirects to another unified shell solution. Path should be the complete relative path of a valid unified shell solution url (i.e. if shellRedirect is called from /target to /analytics, the path paremeter would need to start with /analytics). Query and hash are optional.

Example:

Copy
page.shellRedirect('/path?a=b#workspace');
Copied to your clipboard
page.shellRedirect('/path?a=b#workspace');

Parameters:

Returns: void

Last updated 5/21/2024

Was this helpful?

Yes

No