The Frontify AEM Connector allows you to create meaningful experiences by using Frontify brand assets in Adobe Experience Manager (AEM). You can find and integrate your brand assets natively in the AEM authoring environment. Integrated assets are delivered as part of AEM pages and are linked to the Frontify CDN.

The Frontify AEM Connector delivers the following parts:

· Cloud Configuration to configure Frontify endpoints in AEM

· Frontify Content Finder Tab

· Example AEM component that can be used directly or as parent for own custom components to incorporate Frontify brand assets (e.g. in a carousel)

The AEM content author is authenticated and authorized against the Frontify platform to search for assets. Once assets are selected, no further authentication is required to deliver the content as the asset URL is publicly accessible over the Frontify CDN.

- An AEM author user opens the content page in edit mode.

- Author user then switches to the Frontify tab in the Content Finder - After pressing the Login button, the author user is redirected to log in on the Frontify platform.

- After successful login, author user is redirected back on the content page and available Frontify resources are loaded.

- After that, author users can search for assets.

- The author user can select and add a Frontify asset by drag and dropping it to the page.

- This asset is added on the page and in the repository with all the metadata that is sent through the Frontify API.

- The Author publishes the web page including Frontify metadata to the AEM publishing instance.

- The end-user loads the website which contains assets linking to the Frontify CDN.

The AEM Frontify plugin consists of:

OSGi Bundle with java logic for:

- Handling of Frontify images

- Cloud Config Servlet for handling the configuration for connecting to the Frontify API

AEM content package with:

- Examples of content for testing

AEM content package with:

- Custom image component for rendering the Frontify images

- Author JavaScript logic for handling Frontify images

- Author mode configuration for the Frontify AEM cloud

- Testing template

- Example Image component

One version of the plugin is available for AEM 6.5:

- AEM 6.5 Frontify Plugin

The plugin can be installed through the AEM Package Manager.

The configuration setting is the domain registered on Frontify and the endpoint for the API calls:

Example:

Domain: company.frontify.com ( your Frontify account domain)

Endpoint: https://company.frontify.com/graphql (your Frontify domain with https:// and the path /graphql )

In author dispatcher the URL has to be accessible:

{Hostname}/bin/ffyconfig

In case of having problems while using Frontify, log messages can be found in WARN and DEBUG log level on the com.frontify.core package.

We need to create a Custom AEM Cloud Configuration page to connect to the Frontify API.

This Cloud configuration can be connected to any site, in Page Properties in Tab “Cloud Service Configurations”

To enable components that support Frontify brand assets in a custom template the policy has to be changed accordingly to define a custom mapping.

On the template set the Allowed components on Policy:

On the “Default Components” add a mapping for the component using mime type image/*

ffy-dam-author-panel.js

This code takes care of different actions.

- Read the cloud configuration settings.

- Handle the actions of the Frontify Tabs in author mode.

- Handle the drag and drop API of AEM.

- After this UI is initialized and Frontify assets are loaded, filtering by keyword or by category is possible.

ffy-filter.js

This code takes care of actions related to populating the categories combobox in the Frontify assets tab.

- Check if the categories are available on browser local cache

- Get the available categories by Frontify API call

ffy-authentication.js

This code takes care of actions related to authentication.

- Read the cloud configuration settings.

- Manage the authorization token we get back from the cloud server after we are logged in.

For rendering the Frontify images we need an AEM component. We do provide an example “Frontify image component. There is no JavaScript interaction once the component is displayed on the page.

For building your own custom components (e.g. a carousel) you should reuse the Image.js Spring Model to display image resources.

<sly data-sly-use.image="com.frontify.core.models.FrontifyImage"></sly>

The model can be adapted from a resource and provides:

This is the structure that is saved in the AEM node.

This is the structure that is saved in the AEM node:

Path: /bin/ffyconfig

Delivers configuration to the JavaScript code.