DEV Community: Karamoulas Eleftherios

Content SaaS | How to configure and use Resource Bundles

Karamoulas Eleftherios — Mon, 22 May 2023 14:40:45 +0000

Bloomreach Content is a powerful Software-as-a-Service (SaaS) solution that allows businesses to create, manage, and deliver digital content across multiple channels. Resource bundles are an important aspect of Bloomreach Content that enable users to easily manage localised content and translations for different regions and languages.

The use case of resource bundles is the localisation of labels that are reused frequently across your site. For example, unique texts in the header and footer, button labels, common component texts etc. The question at hand is how to make the resource bundles available to the frontend application in a headless implementation.

In this blog, we will showcase two solutions with their respective configurations, coding examples, and pros and cons.

Solution 1: Developer configurable Channel property in combination with an SPA provider component

In this approach, we define a new channel property (eg. rbPath) that will contain the absolute content path to the resource bundle (it can also be a comma-separated list if multiple is necessary). The frontend will utilise the document delivery API to retrieve and store the resource bundles. Below we provide implementation examples in React and Vue of such services.

Note: the implementation examples assume a single resource bundle is configured.

Adding the channel property can be achieved either via the site development tool (see screenshots below) or via the site management API as described here.

This is an example response of the content delivery API for a resource bundle
eg.https://{client}.bloomreach.io/delivery/site/v1/channels/{channel}/documents/{path-to-rb-document}

Important: Remember to change the {client}, {channel} and {path-to-rb-document} with the right values for you. The same applies to the provided URLs in the code snippets below.

{
 "meta": {
   "product": "brx",
   "version": "1.0",
   "branch": "master"
 },
 "document": {
   "$ref": "/content/u3e27f53db63b4a76a7912a1896acd157"
 },
 "content": {
   "u3e27f53db63b4a76a7912a1896acd157": {
     "type": "document",
     "links": {
       "site": {
         "type": "unknown"
       }
     },
     "meta": {},
     "data": {
       "name": "site-labels",
       "displayName": "Site labels",
       "stateSummary": "live",
       "messages": [
         "Test"
       ],
       "keys": [
         "test"
       ],
       "id": "3e27f53d-b63b-4a76-a791-2a1896acd157",
       "state": "published",
       "valueSets": [
         {
           "name": "[default]",
           "messages": [
             "Test"
           ]
         },
         {
           "name": "en",
           "messages": [
             "Test EN"
           ]
         },
         {
           "name": "nl",
           "messages": [
             "Test NL"
           ]
         }
       ],
       "localeString": null,
       "contentType": "resourcebundle:resourcebundle"
     }
   }
 }
}

React example code - Provider/Consumer

In React, we can have an implementation leveraging the Context provider/consumer functionality.

RBContext.tsx is our frontend component responsible for fetching and providing the resource bundle document

import React, {useEffect, useState} from "react";
import axios from "axios";

export const RBContext = React.createContext(null);

async function rbMap(page: any) {
 const locale = 'en'; //'this should be dynamic based on how your SPA handles the locale'
 const rbpath = page.model.channel.info.props.rbPath;

 const data = await axios
   .get(`https://{client}.bloomreach.io/delivery/site/v1/channels/{channel}/documents${rbpath}`)
   .then(response => response.data)
   .catch(error => console.log(error))

 const content = data?.document.$ref.split('/').reduce((value, key) => (key ? value?.[key] : data), data).data
 const keys = content.keys;
 const valueSets = content.valueSets;

 let valueSet;
 if(valueSets.some((set:any) => set.name === locale)) {
   valueSet = valueSets.find((set:any) => set.name === locale);
 } else {
   valueSet = valueSets.find((set:any) => set.name === '[default]');
 }

 const rbMap = {};
 keys.forEach((element, index) => {
    rbMap[element] = valueSet.messages[index];
 });

 return rbMap;
}

export const RBProvider = (props:any) =>{
 const [data, setData] = useState(new Map)

 useEffect(()=> {
   (async () => {
     const data = await rbMap(props.page);
     setData(data);
   })()
 },[])


 return(
   <RBContext.Provider value={data}>
     {props.children}
   </RBContext.Provider>
 )
}

In App.tsx we should wrap our application with the RBProvider component and pass to it the page context.

<BrPage configuration={{ ...configuration, httpClient: axios as any }} mapping={mapping} page={page}>
 <BrPageContext.Consumer>
   {(contextPage) => (<>
     <RBProvider page={contextPage}>
    //Rest of App
</RBProvider>
   </>)}
 </BrPageContext.Consumer>
</BrPage>

In any of your components where you want to retrieve and use a label

const valueSet = React.useContext(RBContext);

{valueSet?.['test']}//where test is the key

Vue example code - Provide/Inject

RBContext.vue is our frontend component responsible for fetching and providing the resource bundle document

<template>
 <div>
   <slot />
 </div>
</template>

<script lang="ts">
import { Page } from '@bloomreach/spa-sdk';
import { Component, Prop, Vue } from 'nuxt-property-decorator';
import axios from 'axios';

@Component({
 name: 'RBContext',
 provide()  {
   return {
     rbMap: this.rbMap
   }
 },
 computed: {
   async rbMap() {
     const locale = 'en'; //'this should be dynamic based on how your SPA handles the locale'
     const rbpath = this.page.model.channel.info.props.rbPath;

     const data = await axios
       .get(`https://{client}.bloomreach.io/delivery/site/v1/channels/{channel}/documents${rbpath}`)
       .then(response => response.data)
       .catch(error => console.log(error))

     const content = data?.document.$ref.split('/').reduce((value, key) => (key ? value?.[key] : data), data).data
     const keys = content.keys;
     const valueSets = content.valueSets;

     let valueSet;
     if(valueSets.some(set => set.name === locale)) {
       valueSet = valueSets.find(set => set.name === locale);
     } else {
       valueSet = valueSets.find(set => set.name === '[default]');
     }

     const rbMap = {};
     keys.forEach((element, index) => {
        rbMap[element] = valueSet.messages[index];
     });

     return rbMap;
   }
 },
})

export default class RBContext extends Vue {
@Prop() page!: Page;
data: any;
}
</script>

In your _.vue file the template should look something like the following example.

Important: the component r-b-context should be within the br-page component and include the rest application structure so that we can use the provide/inject functionality of Vue.

<template>
 <br-page v-if="configuration && page" :configuration="configuration" :mapping="mapping" :page="page">
   <template #default="props">
     <template v-if="props.page">
       <r-b-context :page="page">
         <br-component component="header" />
         <br-component component="main">
           <template v-slot:default="{ component, page }" />
         </br-component>
         <br-component component="footer" />
       </r-b-context>
     </template>
   </template>
 </br-page>
</template>

In your template use the valueSet map like below

{{valueSet?.['test']}} //where 'test' is the key
In your component configuration have the inject, data and mounted defined as follows

@Component({
 name: 'HomepageBanner',
 inject: ['rbMap'],
 data() {
   return {
     valueSet: null,
   };
 },
 computed: {...},
 async mounted(): Promise<void> {
   this.valueSet = await this.rbMap;
 },
})

Solution 2: Page layout root component with a SPA provider component

An alternative solution to the first approach is to make the resource bundle document(s) part of the page model API response directly.

For the above, all the page layouts will require a root component (via inheritance and explicitly) that contributes the configured resource bundle to the API response. As a static component, the document(s) can only be configured by site developers. The resource bundle component will have to have the rest of the page structure below it. This hierarchy is required so that the frontend functionality can work.

The frontend implementation though similar would have to change slightly. Now the RBContext component won’t read the data from the Content delivery API but instead from the component itself that is part of the page structure. The rest functionality of parsing the retrieved resource bundle document and providing it for consumption (React) or injection (Vue) will remain the same.

Implementation remarks

Any type of async functionality has to be done outside the rendering of components to HTML if you want to support SSR. Getting the valueSet on the server side and setting it as a value in the provider/context directly.
We advise building in some caching mechanism that allows you to only request the translation once per session or something like that. Usually, translations can be requested per page, but once requested they could simply be saved in memory instead of re-requesting it on every page load as a user is navigating through the app.
Solution 1
+ smaller payload of initial page load
+ easier maintainable configuration
- requires extra call(s) to retrieve the configured resource bundles
Solution 2
+ no extra calls necessary
- due to how translations are usually quite static the request can not be cached this way as it is always part of the page
- the response payload will be bigger as the resource bundle component and the document(s) will always be part of the API response
- it is a more complicated setup
- configuring more than one resource bundles will be an extra configuration overhead

Content-SaaS | DAM Integration with Frontify

Karamoulas Eleftherios — Mon, 08 May 2023 09:36:44 +0000

Introduction

Bloomreach's Integrations Library is a powerful feature that enables seamless integration of various third-party tools and services with Bloomreach Content. With this feature, businesses can easily extend the capabilities of their Content platform by integrating it with other essential services such as marketing automation tools, customer data platforms (CDP), customer relationship management (CRM) systems, social media platforms, and more.

Frontify is a powerful digital asset management solution that enables organisations to streamline their content creation and management processes. Integrating with Frontify can bring many benefits to businesses, such as centralised access to digital assets, optimised content management processes, and improved overall productivity.

In the following example, we will show you how the Frontify integration works from a functional point of view and how to install this as a developer in your instance.

Installation

Installing the Frontify integration can be achieved in two ways.

The first option is to visit the Content integrations marketplace and click the “Install” button in the top right corner. You will have to follow the instructions and provide some necessary information like your domain, a valid API key, and the necessary integration configuration.

The second option is a manual installation that can be achieved either via the UI as shown in the image below. Navigate to Setup > Integrations. Select Add Custom Integration and fill in the necessary data.

Name: Frontify
Description (optional): Frontify is a cloud-based brand management platform that enables organisations to manage their brand assets, guidelines, and content in a centralised location.
Logo (optional): click and copy from the expandable
base64 image data:image/png;base64,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
Application URL: https://content-frontify-ui-extension.vercel.app
In the configuration you must specify if the select mode is single or multiple and provide your client id.
Configuration:{"allowMultiSelect":false,"clientId":"your-client-id"}
Height (in pixels, optional): 200
Don’t forget to add the CSP property and refresh the window before it takes effect.
frame-src: https://content-frontify-ui-extension.vercel.app

Alternatively, you can add this integration to your instance by utilising the Content Integrations Management API.
Below is a JSON snippet you can use to add the integration.

Note: Don’t forget to update the configuration object according to your requirements and the client id.

{
    "id": "frontify",
    "displayName": "Frontify",
    "url": "https://content-frontify-ui-extension.vercel.app",
    "config": "{\"allowMultiSelect\":false,\"clientId\":\"client-id\"}",
    "extensionPoint": "document.field",
    "height": 200,
    "description": "Frontify is a cloud-based brand management platform that enables organizations to manage their brand assets, guidelines, and content in a centralized location.",
    "logo": "",
    "package": null,
    "connect-src": [],
    "frame-ancestors": [],
    "frame-src": [
        "https://content-frontify-ui-extension.vercel.app"
    ],
    "img-src": [],
    "script-src": [],
    "style-src": [],
    "font-src": [],
    "media-src": []
}

Open UI String Field

An Open UI String field uses the document field extension point to display a custom field type. When the Frontify integration is available, document editors can add an Open UI String field to the desired document type and link it to the integration, using the UI extension drop-down. Details on how to configure the field are documented here.

The String field stores the assets object as received from the Frontify finder. The specifications of those structures are documented here. All the fields can be retrieved and mapped in your frontend application wherever a document or component is integrated with Frontify.

Demo

Check out the demo video and the screenshots below to see the Frontify integration in action.