开发者社区> 镜像站> NPM> @adobe/exc-app
@adobe/exc-app
This project provides the interface for app developers to integrate with the experience cloud unified shell web application at https://experience.adobe.com
Last updated 13 days ago by symanovi .
CC-BY-ND-4.0 · Original npm · Tarball · package.json
$ cnpm install @adobe/exc-app 
SYNC missed versions from official npm registry.

exc-app

Adobe Experience Cloud gives you everything you need to bring world-class experiences to every customer. It consists of multiple solutions that power insights, content, engagement, commerce and optimization. The unified shell web application at https://experience.adobe.com provides a unified user experience for customers to manage these solutions from a single place.

The solution experiences run within an iframe in the unified shell web application and can interact with components of the unified shell such as topbar, menus, nps, alerts, etc. These interactions are made possible through two components: -

  1. A module-runtime script that is injected into the product iframe
  2. This @adobe/exc-app package that provides an API to interact with the injected module-runtime script.

Getting Started

To get started with this integration, below two things need to be done.

  1. Include the runtime loader script on the home page
  2. Include the @adobe/exc-app package in your NPM package.json and invoke the init API.
import React from 'react';
import ReactDOM from 'react-dom';
import {init} from '@adobe/exc-app';

init(runtime => {
  // Example initialization for a solution that uses React
  ReactDOM.render(<MyProductPage runtime={runtime} />, document.querySelector('#main'));
});

Features

APIs

root

Core APIs that let solutions initialize the application, provide access to the runtime object from anywhere in the app, listen to events. learn more

AppApi

APIs that provide access to certain data types nested inside the app Context. learn more

HelpCenter

APIs that let solutions interact with the Help Center menu. learn more

Metrics

APIs used to log messages, errors, events, metrics and analytics that get pushed to our telemetry system. learn more

Network

APIs that simplify code to make authenticated network requests for resources, execute GraphQL queries, etc. and optimize them through efficient batching when appropriate. learn more

NPS

APIs that let solutions interact with the NPS (Net Promoter Score) widget component, the interface for recording user experience within a specific solution. learn more

OrgSwitcher

APIs that let solutions interact with Org Switcher menu. learn more

Page

APIs that let solutions interact with the main page and personalize it, e.g. setting the title, favicon, refreshing the solution iframe, etc. learn more

Pulse

APIs that let solutions interact with Pulse, Adobe's Notification System. learn more

Settings

APIs to get or set settings, preferences or configuration data that can be stored and retrieved at an IMS user and/or an IMS org level. An app in unified shell can consume Settings service. learn more

TopBar

APIs that let solutions interact with the top bar and personalize it, e.g. configuring the solution area on the left, setting up workspaces, custom search, etc. learn more

User

APIs to request user-specific information such as IMS organization, IMS profile, access token, tenant, etc. It also provides solutions with other capabilities such as notifying the shell that the session has expired and configuring a logout URL to expire custom sessions. learn more

UserProfile

APIs that let solutions interact with User Profile menu. learn more

Events

Events are emitted by the module runtime when it receives certain messages from the Unified Shell.

Ready

The ready event fires when the initial configuration has been received from the Shell. It would make sense to wait for this event before rendering the application or setting any workspaces. The locale will be required to do globalization and we require the workspaces translated prior to setting them on the Shell, since we don’t (and shouldn’t) have translations for every Solution’s workspaces.

Example:

import excApp from '@adobe/exc-app';

function setup() {
  const runtime = excApp();
  runtime.on('ready', ({imsOrg, imsToken, locale}) => {
  this.setState({
      imsOrg,
      imsToken,
      loading: false,
      locale
  });
  });
}

Payload:

  • baseUrl: Base url for the solution.
  • environment: Environment being used.
  • historyType: Type of history.
  • imsEnvironment: IMS environment. This follows general rules unless shell_ims query param is in use.
  • imsOrg: IMS org ID.
  • imsOrgName: Name of the IMS org.
  • imsProfile: Object containing information about the authenticated user.
  • imsToken: IMS token.
  • locale: Locale string for globalization.
  • preferredLanguages: List of preferred languages from the user's IMS profile.
  • shellInfo: Shell related information needed to populate the shell UI. More details about what is included are Shell API.
  • tenant: tenant name for current ims org.

Configuration

The configuration event fires when any configuration changes from the Shell. This has the same payload as the ready event.

Example:

import runtime from '@adobe/exc-app';

function setup() {
  const runtime = excApp();
  runtime.on('configuration', ({imsOrg, imsToken, locale}) => {
    if (imsOrg !== this.state.imsOrg) {
      // Change org
    }
    this.setState({imsOrg, imsToken, locale});
  });
}

History

The history event fires when the browser history changes and the frame needs to know about it.

Example:

import runtime from '@adobe/exc-app';

function setup() {
  const runtime = excApp();
  runtime.on('history', ({type, path}) => {
    const cleanedPath = path[0] === '/' ? path : '/' + path;
    if (type === 'external' && this.history.location.pathname !== cleanedPath) {
      this.history.replace(cleanedPath);
    }
  });
}

Payload:

  • type: Internal or external depending on where the event originates from.
  • path: The new path to update the browser history with.

Licensing

This project is licensed under the Creative Commons Attribution-NoDerivatives 4.0 International Public License. See LICENSE for more information.

Current Tags

  • 0.2.19-beta                                ...           beta (4 months ago)
  • 0.2.24                                ...           latest (13 days ago)
  • 0.2.14-test.0                                ...           test (8 months ago)

20 Versions

  • 0.2.24                                ...           13 days ago
  • 0.2.23                                ...           2 months ago
  • 0.2.22                                ...           2 months ago
  • 0.2.21                                ...           3 months ago
  • 0.2.20                                ...           4 months ago
  • 0.2.20-beta                                ...           4 months ago
  • 0.2.19                                ...           4 months ago
  • 0.2.19-beta                                ...           4 months ago
  • 0.2.18                                ...           5 months ago
  • 0.2.17                                ...           5 months ago
  • 0.2.16                                ...           5 months ago
  • 0.2.16-beta2                                ...           6 months ago
  • 0.2.16-beta                                ...           7 months ago
  • 0.2.15                                ...           7 months ago
  • 0.2.14                                ...           8 months ago
  • 0.2.14-test.0                                ...           8 months ago
  • 0.2.13                                ...           8 months ago
  • 0.2.12                                ...           8 months ago
  • 0.2.11                                ...           8 months ago
  • 0.2.10                                ...           8 months ago