What is the Frontify DAM?
Digital Asset Management systems (DAMs) are user-friendly, centralised software solutions, specifically designed to store, organise, manage and distribute digital assets efficiently with ease.
By reducing the time spent searching for assets and avoiding any duplications of work, DAMs can lead to overall cost savings.
When it comes to sharing digital assets across multiple platforms, they can be particularly advantageous; only a single source for digital assets, such as documents, videos, images and brand icons, needs to be created. Through carrying out a centralised update, all related platforms are then automatically updated.
During our Drupal 9 redesign and development of the Joseph Rowntree Housing Trust (JRHT), Zoocha were requested to integrate Frontify as the DAM solution. Our team required a bespoke solution in order to incorporate the Frontify system into the pre-existing Drupal media library.
Zoocha’s Approach to Frontify DAM Integration
To carry out a Frontify DAM integration, we were initially required to extend the Drupal media library to load the Frontify Finder tool. This tool is an interface that allows users to select their desired digital assets from the management system.
To do so, we had to employ Frontify’s script. The script could then return details about the chosen asset, including its ID, with which it is then possible to pull metadata and synchronise the assets with the Frontify platform.
The relevant metadata for each asset would hereby be retrieved from Frontify’s GraphQL API through the mghoneimy/php-graphql-client PHP package.
GraphQL is a popular and powerful query language for APIs, allowing our team to extract the specific information needed in a clear, structured manner. This solution was designed by Zoocha to ensure that reusable code could be used within our Frontify GraphQL service, allowing site editors to obtain information and map it to fields on the media entity, all through config. This can be represented through the following code:
/**
* Get an asset by id.
*
* @param string $id
* @param array $attributes
* Each entry must be of the structure [$type => $type_attributes,...]
* Where $type_attributes is a list of strings.
* @return \stdClass|null
*/
public function getAssetById(string $id, array $attributes): ?\stdClass {
// Build fragments for each of the types (Asset/Image/Video/Document etc.)
$fragments = [];
foreach ($attributes as $type => $type_attributes) {
$fragments[] = $this->buildFragment($type, $type_attributes);
}
$query = (new Query('asset'))
->setArguments(['id' => $id])
->setSelectionSet($fragments);
$results = $this->executeQuery($query);
return $results?->getData()->asset;
}
Webhooks
Another useful feature that GraphQL offers is the ability to register webhooks. Doing so gives us the ability to listen for events that are triggered by Frontify, such as when digital assets are created, edited or deleted, and react to them accordingly.
Essentially, the webhooks are REST endpoints that can be registered within Frontify. A REST endpoint is the way in which a webhook event, being the change of an asset, is communicated and therefore received.
In the admin area of Drupal, we added a configuration form, which allows the input of necessary client data to register webhooks, and buttons to both install and uninstall these webhooks on each environment.
Frontify webhooks are installed through this code:
/**
* Installs a webhook for a given endpoint.
*
* @param string $endpoint
* @param string $name
* @return void
* @throws InvalidPluginDefinitionException
* @throws PluginNotFoundException
* @throws EntityStorageException
*/
public function installWebhook(string $endpoint, string $name): void {
$libraries = $this->getAllLibraries(['name']);
foreach ($libraries as $library) {
$variables = [
'input' => [
'projectId' => $library['id'],
'notificationUrl' => $endpoint,
'name' => $name,
],
];
$mutation = (new Mutation('installProjectWebhook'))
->setVariables([new Variable('input', 'InstallProjectWebhookInput', true)])
->setArguments([
'input' => '$input'
])
->setSelectionSet([
(new Query('webhook'))->setSelectionSet([
'id',
'secret',
]),
]);
$results = $this->executeQuery($mutation, FALSE, $variables);
$webhook_values = json_decode(json_encode($results->getData()->installProjectWebhook->webhook), TRUE);
$webhook_values['library_id'] = $library['id'];
$webhook_values['library_name'] = $library['name'];
$webhook_values['webhook_name'] = $name;
$webhook = $this->entityTypeManager->getStorage('frontify_webhook')
->create($webhook_values);
$webhook->save();
}
}
Leveraging this system for the JRHT DAM integration, Zoocha could ensure that signatures were provided in order to create an additional layer of security, meaning that only Frontify could POST, referring to the communication of events, to the endpoint.
At the point when endpoints receive the POST requests, we were then provided with the asset ID and told which operation had occurred.
Webhook integration is essential for utilising a DAM effectively, guaranteeing that all assets synchronised across the relevant platforms.
Outcome of the Frontify DAM Integration
By following this process, we have provided JRHT with a single source of truth for their brand and for important documents, saving time for content managers and reducing the need for extensive internal coordination.
We hope to contribute our work back to the official Frontify module in due course and to introduce more businesses to the power of DAMs and the ease of GraphQL webhooks within their Drupal sites.