Skip to main content
All CollectionsIntegrationsDesign
Developer Guide – Frontify for Adobe Experience Manager (AEM)
Developer Guide – Frontify for Adobe Experience Manager (AEM)
Updated over a year ago

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.

Connector Parts

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)

Information Flow

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.

AEM Frontify Plugin

The AEM Frontify plugin consists of:

com.frontify.aem.frontifyassets.core

OSGi Bundle with java logic for:

- Handling of Frontify images

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

aem.frontifyassets.ui.content

AEM content package with:

- Examples of content for testing

aem.frontifyassets.ui.apps

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

Plugin Installation

The plugin can be installed through the AEM Package Manager.

Custom AEM Cloud Configuration

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 )

Whitelist URLs

In author dispatcher the URL has to be accessible:

{Hostname}/bin/ffyconfig

Troubleshooting

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.

Implementation Guide

Custom AEM Cloud Configuration

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”

How to add the component to editable template

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.

FrontifyImage.java

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.

Image resource

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

AEM default fields

CloudConfigServlet

Path: /bin/ffyconfig

Delivers configuration to the JavaScript code.

Did this answer your question?