Adobe Learning Manager reference site (ALM reference site) package for AEM Sites

Adobe Learning Manager (ALM) integrates with Adobe Experience Manager (AEM) sites. This enables you to create your own website and responsive mobile interfaces for Adobe Learning Manager with minimum coding effort. With this integration, you can create customized learning experiences for your users.

To build such an experience, ALM provides an Adobe Learning Manager reference site package (ALM reference site package) for AEM Sites in the form of a ZIP file that you can install on your AEM Sites instance.

The package includes AEM Sites web page templates and website components along with embeddable widgets, for example, Learning catalog, embeddable widgets, calendar, and so on.

After you install the ALM reference site package, you can start building a website for Adobe Learning Manager that you can host on your AEM Sites instance. Your users can then drag and drop the components on the website.

Install ALM reference site package

Pre-requisites

  • Licenses for AEM Sites and Adobe Commerce.

  • AEM on-premise 6.5 or Adobe Experience Manager – Cloud Service

  • Adobe Commerce 2.4.3

After you secure your environment of AEM Sites, you must install the ALM reference site package. This package includes AEM web pages and website components that help construct the learning platform.

The reference site package is hosted on the GitHub repository.

For more information, see the README.

Create an application in Adobe Learning Manager

After you install the AEM site package, you must configure an ALM application to connect your learning portal with the AEM site.

This scenario is applicable when AEM is used with Adobe Learning Manager.

Follow the steps below:

  1. As an Integration Administrator, click Applications.
  2. To create a new application, on the upper-right corner of the page, click Register.
  3. In the Register a new application screen, enter the following details:
    1. Application Name: The name of the application that you are creating.
    2. URL: The URL of your organization.
    3. Redirect Domains: The hosting domains of the AEM website. You can also specify wildcards.
    4. Description: The description of the application.
    5. Scopes: Select Learner role read access and Learner role write access.
    6. For this account only?: Select Yes if you want to use the application for the existing ALM account.
  4. After making the changes, click Save.

Note the application credentials from the screen.

Application. credentials
Application. credentials

To approve the application, click Approve.

Get the tokens

  1. In the Developer Resources tab, click Access Tokens for Testing and Development. 

  2. Enter the following details:

    1. Get OAuth Code: Enter the client ID from the previous section and change the scope. Click Submit to get the Oauth code.
    2. Get Refresh Token: Enter the client ID and secret from the previous section. Also enter the OAuth code that you got from the previous step. Click Submit.
    3. Get Access Token: Enter the client ID and secret from the previous section. Also enter the Refresh token that you got from the previous step. Click Submit.
    4. Get Access Token Details: Enter the access token that you got from the previous step. Click Submit.

  3. You can get the details from the JSON response that follows. The response consists of the access token, refresh token, user role, account id, user id, and the time to expire. Note the refresh token, as you will reuse that. 

Configure ALM account in AEM

  1. Launch your AEM instance.

  2. Click Settings > Cloud Services. 

  3. Click Adobe Learning Manager Configuration.

  4. Click Create > Configuration Folder. Name your folder.

    Create configuration
    Create configuration

  5. In the learning project, select the configuration that you created.

  6. Enter the details of the configuration. 

    1. Adobe Learning Manager mode: Choose how you want the learning experience for both logged-in and non-logged in learners.
    2. Adobe Learning Manager URL: Enter the URL of the ALM instance where the learning services are hosted.
    3. Account ID: The ID of the ALM account.
    4. Client ID, Client Secret, and Author Refresh Token: Enter the credentials that you got while creating the application in ALM. 
    5. Customization of Widget: For more information, see Integrate with AEM.

  7. Save and close the configuration.

Log in process (Adobe Learning Manager, AEM, and Adobe Commerce)

  • Adobe Commerce supports only username/password and doesn't support any Saml based SSO out of the box.
  • Adobe Learning Manager reference site implementation for AEM works with Adobe Commerce username/password.
  • Once we get the token from Adobe Commerce, this will be shared with AEM backend from AEM client js. AEM backend will use this token to get the email of the user by contacting Adobe Commerce. With the email and already configured ALM Admin refresh token, ALM access token will be generated for the learner and sent to AEM client js for rendering the learning components.

Log in process (Adobe Learning Manager and Adobe Commerce)

  • By default, As there is no default SSO support from Commerce, user has to login twice - one to ALM, and another to Commerce.
  • However, if on the commerce side, if any of the ALM supported SSOs are enabled (through extensions or custom coding) - SAML 2.0 based, Social logins like Facebook, Twitter, Linkedin, Microsoft or Adobe Id, then the same IDP can be used for ALM and Commerce and can avoid entering login credentials twice.

AEM + Adobe Learning Manager (logged-in/non-logged-in users)

Adobe Learning Manager now enables you to showcase your product and training to your existing and prospective customers and partners without mandating account creation or sign-in. This functionality will help you drive product and training adoption by providing learners with a quick and easy preview of the training, which helps highlight and promote product features. Therefore, you can effectively showcase your products and offerings, especially to prospective customers and partners resulting in increased product awareness. The ease of access and better reachability lead to heightened interest, which helps drive training enrollments and learning adoption. 

Using this workflow a learner can preview a training, access training information, or search for training without signing into Adobe Learning Manager. This workflow is not applicable for the native Learning Manager interface (applicable ONLY for AEM Sites, and other headless interfaces).

Configure and enable the learning platform connector

This section underlines the steps needed to configure and enable the following connector:

Training Data Access

This connector enables your AEM Sites-based or another custom-made headless user interface to retrieve and render training information to the learners and realize a seamless training information search either before or after a learner logs in. 

This connector is only required if you are using AEM Sites-based or other headless interfaces. 

The connector exports training metadata to a data storage and retrieval solution as well as a search enablement system. Therefore, you can configure your AEM Sites-based or another custom-made headless user interface to use these two services to retrieve training data, render web pages, and provide optimized training search functionality to the learners. For example, a non-logged in AEM Sites-based interface can use the exported metadata to help a learner search, browse, and access training pages that show training information. 

Enable this connector to build and render your AEM Sites-based web pages and deliver customized experiences to your learners both before and after login. Enable this connector to build and render your AEM Sites-based web pages and deliver customized experiences to your learners both before and after login.

  • Adobe Learning Manager cdn base URL – Enter the base URL of the data retrieval CDN service path from the Training Data Access connection page.
  • Admin refresh token – Enter the refresh token that you determined in the earlier section. 
  • Training Metadata base URL – Enter the base URL of the search enablement and search data retrieval service path from the Training Data Access connection page.
  • Adobe Learning Manager Register URL - Enter the self-registration URL generated by the integration administrator for the account, which is used by learners to enroll in training.

AEM + Adobe Learning Manager + Adobe Commerce (logged-in/ non-logged-in users)

Adobe Learning Manager now provides solutions to help you seamlessly integrate the learning platform with Adobe Commerce. This release will enable you to easily connect your native, AEM sites-based or other headless Learning Manager interfaces to Adobe Commerce. This integration enables you to realize e-commerce abilities within your learning platform. You can now offer paid training to your customers and business partners as well as enable training purchases easily on both native and non-native Learning Manager interfaces. A learner can also preview a training, access training information, or search for training without signing into Adobe Learning Manager.

A user can use the already AEM application and approve it, instead of creating one.

  • Adobe Learning Manager cdn base URL – Enter the base URL of the data retrieval CDN service path from the Adobe Commerce connection page.
  • Adobe Commerce URL – Enter the URL of the Adobe Commerce instance that you are using. 
  • GraphQL proxy path – The client-side Learning Manager components access the Adobe Commerce GraphQL endpoint directly, and therefore, CORS error may occur. To avoid this error, all calls must either be served from the same endpoint as AEM or served via a proxy that adds CORS headers.
  • Adobe Commerce store name – Enter the Adobe Commerce store name that you determined in the earlier section. 
  • Adobe Commerce customer token lifetime (in secs) – Enter the customer token lifetime indicating the pre-determined period for a login session. 
  • Admin refresh token – Enter the refresh token that you determined in the earlier section.

Customize webpages

Customize your webpages by using the AEM references site and the available widgets. 

  1. Launch your AEM instance.

  2. Click Sites and open the configuration page.

  3. Click Learning Site > Language Masters > English. All webpages in the project are included in the folder. 

  4. Select any template and click Edit.

  5. On the page, click the component settings button and change the properties of the component.

  6. Preview your changes or you can publish the page. 

Create webpages

Apart from the templates that you can use that are provided by the reference site package, you can also create webpages based on the templates ibn AEM.

  1. On the main AEM page, click Create > Page. 

  2. Choose the template that you want to customize. Click Next. 

  3. Enter the page properties. 

    Page properties
    Page properties

  4. To create the page, click Create.

  5. Select the new page and click Edit.

  6. Insert a component on the page, for example, Learning- Content.

    Insert component
    Insert component

  7. Choose the required Catalog filters that will be displayed on the page.

Create site from Blueprint

The ALM reference site package provides a “Learning Site Blueprint,” which enables you to create a website for your learning platform. AEM blueprints allow you to build webpages directly from AEM Sites components. You need not use any templates. 

  1. On the AEM start page, click Sites.

  2. Click Create > Site. 

  3. Click Learning Site Blueprint. 

  4. Click Next. 

  5. On the properties page, enter the page metadata. Click Create. 

  6. Click the Home hyperlink to navigate to the home page of the site that you have created. On this page, you can customize the widgets and catalog components.

Code your website

In addition to using the built-in templates and creating your website from scratch using the WYSIWYG components, you can also write code and build the site.

The code is in the Reference site GitHub repository for you to get started.

The main parts of the template are: 

  • core: Java bundle containing all core functionality like OSGi services, listeners or schedulers, as well as component-related Java code such as servlets or request filters.
  • ui.apps: contains the /apps (and /etc) parts of the project, ie JS&CSS clientlibs, components, templates.
  • ui.content: contains sample content using the components from the ui.apps
  • ui.frontend: contains React components.

All the code is in the repo to get you up and running. 

Import and add learning manager components to existing web-page or template

Installing AEM reference site package adds the Learning Manager components to your AEM Sites instance. By default, you can add these components to the web project (website) Learning Site that we provide out-of-the-box. These components are also available in the website that you create from the Learning Site Blueprint.

However, if you want to use these newly added Learning Manager components to your existing web project or website, you should import them using the following procedure.

  1. Install the ALM reference site package.

  2. Open the web project and navigate to the HTML file (for the webpage or web template where you want to add the Learning Manager components).

  3. Joining a meeting

    Open the HTML file and add the following code snippets to the page component so that the code executes before the learning components present in the page render.

    <sly data-sly-use.configModel="com.adobe.learning.core.models.GlobalConfigurationModel"/>

    <meta name="cp-config" content="${configModel.config}" />

    The preceding code adds the mapped configuration in the meta tag of the page, which is required for the learning components to render. For more details, see https://github.com/adobe/adobe-learning-manager-reference-site/blob/master/ui.apps/src/main/content/jcr_root/apps/learning/components/page/customheaderlibs.html.

  4. Ensure that you have mapped the configuration with the web project.

  5. Open the AEM Sites template where you want to import the Learning Manager components.

  6. On the template page editor, navigate to the Allowed Components container and select Policy.

  7. In the Policy page, navigate to Properties > Allowed Components and select the following components "Learning - Content," "Learning - Form," and "Learning - Structure"

The following procedure enables the template to fulfill the client library dependencies of the imported Learning Manager components.

The web pages that include these components should load these libraries to successfully render and use the components.

  1. On the template page editor, click Page Information and then click Page Policy.
  2. In the Policy page, navigate to Properties > Client Libraries and add these to your template page:
    1. learning.site
    2. learning.ui
    3. learning.commerce

After you save this template, you can add the Learning Manager components in all web pages derived from this template.

Get help faster and easier

New user?

Quick links

View all your plans Manage your plans
View quick links
Hide quick links

Legal Notices    |    Online Privacy Policy

Copyright © 2024 Adobe. All rights reserved.