DEV Community: ksalic

Content SaaS | Integration with Youtube

ksalic — Mon, 14 Nov 2022 09:08:55 +0000

Recently Bloomreach Content (SaaS) released a feature, Integrations Library - UI Extensions. By using this feature, you can add your document field extensions as a custom integration. This opens up new possibilities to create content-type fields of your own.

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

When the Youtube integration is enabled in your Bloomreach Content SaaS channel you can add a component and browse through the youtube video catalog. Free text search is available to filter the results and with the returned results, whenever you hover over the thumbnail you will see a video preview. Click on the video element to add the youtube video link to your page.

The integration can also be configured to only show videos from a particular youtube channel.

Installing the Youtube integration as a Developer

When adding the custom integration through the "integrations" dashboard make sure to add the following parameters:

Application URL: https://youtube-integration.bloomreach.works/
Configuration: {"apiKey":"[youtube-api-key]"}
Height: 170
CSP:

frame-src:["youtube-integration.bloomreach.works","www.youtube.com"]

Configure the integration to allow browsing through a single youtube channel:

Configuration: {"apiKey":"[youtube-api-key]", "channelId" : "[your-channel-id]"}

OpenUI String field

An Open UI String field uses the document field extension point to display a custom field type.
When a Youtube 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 like below.

Once the Open UI String field is correctly configured, editors are able to include Youtube videos directly within the document or component field group.

Content SaaS | DAM Integration with Brandfolder

ksalic — Wed, 19 Oct 2022 09:06:05 +0000

Recently Bloomreach Content SaaS released the feature: “Integrations Library”, in which integrations with 3rd party vendors such as DAM systems can be achieved using a built-in App framework. With the release of Custom integrations, you will be able to integrate, for example, with Brandfolder DAM in a self-service manner. Look at our Documentation pages dedicated to the Integrations Library to learn more.

Brandfolder is one of our preferred DAM systems and a strong technology partner. With the Brandfolder integration, content editors can seamlessly search and select assets from Brandfolder DAM to a website managed by the Bloomreach Experience Manager. This will save you time and demonstrate the flexibility of Bloomreach Content’s out-of-the-box integrations with more integrations to come.

Check out the demo to see the Brandfolder integration in action:

Install Brandfolder DAM with the installer (developer):

Click here for the installer

See the following video on how to easily install the Brandfolder DAM:

Integration checklist:

Content SaaS | Form Integrations

ksalic — Mon, 17 Oct 2022 09:25:48 +0000

Google forms
Jotform
Forms.app
Typeform
Form.io
How to get your frontend to render the Form
Custom Frontend Forms

In the upcoming sections you will learn how to integrate with each of the solutions mentioned above individually.

Integrate Content SaaS with Google Forms

To integrate with Google Forms you will need to add the following UI extension to a Custom Integration:

{
  "id": "googleforms",
  "displayName": "Google Forms",
  "url": "https://form-integration-googleforms.bloomreach.works",
  "config": "{\"apiKey\":\"123\", \"clientId\":\"456\"}",
  "extensionPoint": "document.field",
  "height": 80,
  "description": "Google Forms Integration",
  "logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAAdVBMVEUAAABqQL9ySbt0SLdqP61ySbpySLlqRKtVN4pySLhoQahWNopxR7hnQadyR7hxSLlpQqhxR7hrQ6xqQqpnQqhoQqdoQ6mTc8nc0e3VyOqKaMW0ndrKuuXn3/P////t6Pbe1O+egc/Br+BySbl0RrlySbl1SrWG8Ys8AAAAJ3RSTlMADDhANZP/22+f9v8k/1Nf9OLV6Pn97f///////////////1cssxgd1lquAAAAuklEQVR4Ae3SNQLDMBBEUbPDMTPT/W8YboyzYdI3qNKrhvuweEEcTqJdl5Wx1BkFmCujLZYEYaWMt14ShM00gIUtAICAACBgAAgYAAIGgIABIGAACBgAAgK0JRAQoC6BgADdMK31JdsxJADARAZ8AeB6fnA4wqgTGYiTxD8cXtKJDKRJkt0F5GnsHo7C68R2wHbAdsB2wHbAAAZcBZR0QBgEKjrAc4PVCjGZG64hCnOeG6sqt7DNivus9tWqVjv7KE1rAAAAAElFTkSuQmCC",
  "package": null,
  "connect-src": [],
  "frame-ancestors": [],
  "frame-src": [
    "form-integration-googleforms.bloomreach.works"
  ],
  "img-src": [],
  "script-src": [],
  "style-src": [],
  "font-src": [],
  "media-src": []
}

Be aware that you will need to go to your Google Cloud Console to enable the Google Drive Picker in the API & Services and generate a Google Cloud apiKey and OAuth Client ID. When created add this to configuration of the UI extension (config element above).

Once the UI extension is registered, make sure to add the UI extension to a content type and component.

See the following demo how this can work in the Experience Manager:

Integrate Content SaaS with Jotform

To integrate with Jotform you will need to add the following UI extension to a Custom Integration:

{
  "id": "jotform",
  "displayName": "Jotform",
  "url": "https://form-integration-jotform.bloomreach.works",
  "config": "{\"apiKey\": \"123\"}",
  "extensionPoint": "document.field",
  "height": 80,
  "description": "Jotform Integration",
  "logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJAAAACQCAMAAADQmBKKAAAA4VBMVEUAAAAAmf8Al/8JFVD/YgD/YAD/tyn/tSj/YQD/YgAAmf//YAD/YQD/YAD/YQAAlv//ryH/YAD/YAAAn/8KFVH/tikIEVD/sygAmv//tikAmf//tSn/YQD/YAD/YQD/tSr/tSgGFFAKFFEAmv8Amv//YAAAmP8Al/8KFVH/tioAmf//YAD/tSn/YAALFVL/tin/tykAmP//uCkAmP//YAD/syj/tSoAl/8LE1D/tigAmf//tSX/sDAQEFAJFVH/YQAKFVL/tioJFlD/tSkKFVAKFlD/uiX/YQAAmf//tikKFVERZpE6AAAAR3RSTlMA3yDfXxCfYM9/76DfgO8wEDAgEH/fICDPv4DPv0CvgIA3z7+fkHBA7++vn5BwX96wkG9fUEAwoJBfTzAREL+gn49vT6BQMKG90BwAAAOxSURBVHja7dmLUtpQFIXhFZoApWmlQUQoUBSBcvOu9W7VtiG8/wPVcWxTu8GTZBnZM+V/gm/2Ocw+GbBs2bKn9WoDazKZWO29Myy+Uq0wCbO2Mlhs3UdOWA0LrDSYyKzFDSljTWZVWAER6dEkCj1SRJ0a75G1wcR7ZF0Q8R5ZoYS0kx5FI/rt0XKL7j3mqDPjPTJy0fKeGDvNO7Rt+7DhpOmRbWF2jY7rP5Yfeyl7zKBG3X/S0OM9BMhp+qK3rIcAea4/o6ZDexJe6o8f/Jm5XgoeWc/kCcs7vMdcyegJ67yCpy09z9RgPeYO4nh8N3WPJTzPZ6fnkQOSHlk9Zc+W8JjyUvVYGeExNVbm8YfKPH5emcd3lXl8V5knMmilwHgakT1+/TU8th+9pjKPP1bm8T1lnrwyj28r87jKPL6tzNNR5skr87je0iOK9ZWYsXR5oM1TU+bJWLo8OFDmgaXMs6LMg25iz9tUPBgo86CtzIN1ZR5YyjxoK/PgqzIPuso86CnzAAVlHuyl66nH9SBj8KyXGM87xG9PmQclS5cH6CnzAF1lHqCmzAOcWRPZHumhyoidZvWwOI8krddKtIcnHQzWH2YzqPWAxXv+TrnHVubxXNJzvj/KVqvZ1lERL9I15Tke9YM/7Z6Cz2M8lWzwtB2edE149vuBKMsenJvc0wpmtVMBUyO5JxvIeNGY9sjKzKk1o3veGzxhNwSoTnjmd8SAeI+sTIAITyojaqbiCapIWofyzK/IrHreI7tDwpx0PEGLudW8R5Zlnme8R7ZLbFfGw//MZIeUh5+QrMl7ZCMC5Li0R3bKPfNZj+wnOJHZU4zlKYPLeSc5HxpPPJ+COH3G3DZuVzdgznb/4bx3CE9QwbxWp/ddXcLcYTPkuCFHeLgBbU8f2owigtMYd4bDYcf2gGQe86N6c/ooWkOMSE9wjLm9mT72Zu31PPswgEhRXM9nGECk6IbySBAr2uc8EkSKKmXOI0GkKEt6JIgTVeJ5cogICkUbiFWO85hB0y/xRFXWI0GciPZIECU65z0SJEU/ELU7wmMGhW0Td5rz3IMoUY72SBAlynEeMyjslrnU0sODpquIUJH2SBAnqrIeCeJELdYjQZzogvVIECnaJT0SRIoqfc4jQayoxXnkdxktqhIe2cnU1IbxXpcJj2jNCPqW9J3fP0aSTngQLrIv+TfdlSAkWLM5MaRWEbPiZ7QJkZnUH1VAtPZ97m/ty+olonbcqn66x5Sro6Mili37v/sFtkjVNRrxrTkAAAAASUVORK5CYII=",
  "package": null,
  "connect-src": [],
  "frame-ancestors": [],
  "frame-src": [
    "form-integration-jotform.bloomreach.works"
  ],
  "img-src": [],
  "script-src": [],
  "style-src": [],
  "font-src": [],
  "media-src": []
}

Keep in mind that you will need to generate a Jotform apiKey. When created, add this to the configuration of the UI extension (config element above)

Get a Jotform api key here: https://www.jotform.com/myaccount/api

Once the UI extension is registered, make sure to add the UI extension to a content type and component.

See the following demo of how this can work in the Experience Manager:

{ % embed https://www.youtube.com/watch?v=f0vz7-StAXw&list=PLL4MAGpY4oGKzfZATk173wKhLiFEUjcB-&index=5 %}

Integrate Content SaaS with Forms.app

To integrate with Forms.app, you will need to add the following UI extension to a Custom Integration:

{
  "id": "formsapp",
  "displayName": "Forms.app",
  "url": "https://form-integration-formsapp.bloomreach.works",
  "config": "{\"token\":\"123\"}",
  "extensionPoint": "document.field",
  "height": 80,
  "description": "Forms.app Integration",
  "logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAB0VBMVEUAAABDRl5CSGAIyugOvdoki6ZFQVkembUOvNkNvtsMwd4E0/FDRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl5DRl4OvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdpERFw+UWkLw+AOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdo8VW4glLANv9wOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoPutcUsMwPvNkOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvtsOvtsOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdsOvdoOvdoOvdpDRl5DRl5DRl5DRl5GP1dSOk0StdIOvNkOvdoOvdpDRl5DRl5DRl5DRl5DRV0udI4QudYOvdoOvdoOvdpDRl5DRl5DRl5DRl5ERFwRt9MOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdoOvdr///803KqTAAAAmnRSTlMAAAAAAAAAAAAAAAABAgVWpKyrUN+ciYpRk6YDmZiaDiQCVVpC1E+YqiBJTQuP3jgDJTYSk/ykBhTOjQVw4ey9LxS52ToX0Ypy5XtMuc2k1ToPmtgyMeQasteOv9Y7mNxDTukzkq1E2ggNl91FVOKEVuOWRou0EAYGBV3lg5U41Mi5ut7rgQdHLm12d1VefwqR30gBXMHHop08rHnSpQAAAAFiS0dEmpjfZxIAAAAHdElNRQfjBBgLExfSQDGIAAABXElEQVQ4y2NgGBSAkZGHFwXwMDKiyPPxCwgKIQFBAX4+RmT9wiKiYuJIQExURALJDEZGSSlpVCOlpSRRFMjIoNnJKCtHQIEMFRQwMbOwyCsosuBUwKqkzKKiqsbCglUBm7qGppY2i46unj5QBUIBi4GhkTFIhN3E1MychYHFwtIKWQGLtY2tnb0DCwuHo5OzC1CGxdXNHUkBi6KHp5e3j68Di4WffwAnUD4wKDgEyQ0soWEeiizhEZFR0TGxIP3ycfEJyI5kSUxKZmFhCU/xTTWCyqexIHuTxTDdKgMoYZBpDpbPys4ByyMUsOTm5WewQHyKJI/wBRd3QSFUBYt8UXYxVB6ooKS0rBwEKiqrqmtAKlgyaxHyQAV19Q2NENDU3NLaxgKU12uHywNV8HR0dkFAd09vWF9/4ISJk5DkUQDL5CmFU6fpeeOSB4Vn+/QZM3HLg3yrOBmP9MAAADyBS45uBi7bAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE5LTA0LTI0VDExOjE5OjIzKzAyOjAwmbHVPwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOS0wNC0yNFQxMToxOToyMyswMjowMOjsbYMAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAV3pUWHRSYXcgcHJvZmlsZSB0eXBlIGlwdGMAAHic4/IMCHFWKCjKT8vMSeVSAAMjCy5jCxMjE0uTFAMTIESANMNkAyOzVCDL2NTIxMzEHMQHy4BIoEouAOoXEXTyQjWVAAAAAElFTkSuQmCC",
  "package": null,
  "connect-src": [],
  "frame-ancestors": [],
  "frame-src": [
    "form-integration-formsapp.bloomreach.works"
  ],
  "img-src": [],
  "script-src": [],
  "style-src": [],
  "font-src": [],
  "media-src": []
}

Bear in mind that you will need to generate a Forms.app token. When created add this to the configuration of the UI extension (config element above).

Once the UI extension is registered, make sure to add the UI extension to a content type and component.

See the following demo of how this can work in the Experience Manager:

Integrate Content SaaS with Typeform

To integrate with Typeform, you will need to add the following UI extension to a Custom Integration:

{
  "id": "typeform",
  "displayName": "Typeform",
  "url": "https://form-integration-typeform.bloomreach.works",
  "config": "{\"token\":\"123\"}",
  "extensionPoint": "document.field",
  "height": 80,
  "description": "Typeform Integration",
  "logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAQAAADZc7J/AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAHdElNRQfkDAoKNhabE1+jAAACb0lEQVRIx52Vy08TURSHf/da+hhaRDHBRYNGI7KgJIpUIxvfYEJkpZHwiK8Yq2XjxpWKUTT+Ay7cEG2Ir4UuGgPRECIbgegCiSYYoyxEsLw6r06nU46LpgShtDPzu4vJTO73nZO5mTPAmhCjPXR1/rU0o0q0lDbk6cUBukKlyBm2Ci7Vw6lwzPPBOewewwwW4UAFAmhSTiD1pKSbTSFfjPOJeK9UR2U5ViU9TEpxo33dDqhIfjbdcMH7NU+BKvQqZf3eFqavERAX+0bqzwka8seDHnX/qK+RLW/kmYt8d+JgW0EcSKBV6A+KUXL81wHtUMdrPbGCeCYOvFBr3/haV3Qgdj9ymMUBA+1CrFkLLXdAvuTfGvecaQEAbMOg4qtj3zIdNI7o1nBgEl0e+SVxgAPy0QGfRR7AU/57O04DHEgGx5h1AeG2V7pPjAMu/6R1HsB7/NmCYxxw+uZtCYCIV2rjgMOp2hR85HSIA0ZKsCn4CXc5B5KL5TYFCfANHNCnKmwKtiIZ54BrZDfZE9RB/8QB77uToj1Bi7wpwgAqSc5Y/RYAIIDoXLGfA0xMRdvT1uvfU5y3mJaZB9XycECQLOGXjJs/imuYzgGAjaefPyg8jlYkiC69+BTTl0faxs6m2WbTZ1GNV1pRB5sAVk7lvcrQcWHCBL4LfZpw2RnJ3PHsY/bZee2tWmWielR1dWbxVTE64srhnL+V7AoZCck4k8dvnE0oN9K5YT/1JJQpChRokarE70Nqwxr84lJMkaO02cRLIpd2XVkYVcO0j3ZSJR2hO+lf4sIXqjd7SgDInQ7NDsoxTdXU+KT0mA6st/MfpVUmc1BpehgAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMTItMTBUMTA6NTQ6MjIrMDE6MDASXAx5AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTEyLTEwVDEwOjU0OjIyKzAxOjAwYwG0xQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAABXelRYdFJhdyBwcm9maWxlIHR5cGUgaXB0YwAAeJzj8gwIcVYoKMpPy8xJ5VIAAyMLLmMLEyMTS5MUAxMgRIA0w2QDI7NUIMvY1MjEzMQcxAfLgEigSi4A6hcRdPJCNZUAAAAASUVORK5CYII=",
  "package": null,
  "connect-src": [],
  "frame-ancestors": [],
  "frame-src": [
    "form-integration-typeform.bloomreach.works"
  ],
  "img-src": [],
  "script-src": [],
  "style-src": [],
  "font-src": [],
  "media-src": []
}

Be aware that you will need to generate a Typeform token. When created add this to the configuration of the UI extension (config element above)

Get a personal token: https://admin.typeform.com/user/tokens

Once the UI extension is registered, make sure to add the UI extension to a content type and component

See the following demo of how this can work in the Experience Manager:

Integrate Content SaaS with Form.io

To integrate with Form.io you will need to add the following UI extension to a Custom Integration:

{
  "id": "formio",
  "displayName": "Form.io",
  "url": "https://form-integration-formio.bloomreach.works",
  "config": "{\"endpoint\":\"https://yourstuff.form.io\"}",
  "extensionPoint": "document.field",
  "height": 80,
  "description": "Form.io Integration",
  "logo": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAC3FBMVEUAAAAQdbwPdbwPdbwPdbxUsUdUskdUskdUskdVskgQdrwPdbwPdbwPdbwPdbwQdbxUskdUskdUskdUskdVskhVskgUdroQdbwPdbwPdbwPdbwPdbxUskdUskdUskcQdrwPdbwPdbwPdbxUskdUskdUskdUskdUskdWs0kQdrwQdbwPdbwPdbwPdbwQdbxWs0lUskdUskdUskdUskdVskgVeL0RdrwPdbwPdbwPdbwPdbwPdbwQdbxUskdUskdUskdUskdUskdVskkRdrwPdbwPdbwPdbwPdbwPdbwQdbxYskxUskdUskdUskdUskdUskdXs0oSdrwPdbwPdbwPdbwPdbwPdbwQdbwbe75VsklUskdUskdUskdUskdVskgRdrwPdbwPdbwPdbwPdbwQdbxUskdUskdUskdVskhWskkRdrwPdbwPdbwPdbwPdbwQdbxWsklUskdUskdUskdUskdUskcPdbwPdbwPdbwPdbwUd71VskhUskdUskdUskdVskgPdbwPdbwPdbwUeL1VskhUskdUskdUskdUskcPdbwPdbwPdbwQdbxVsklUskdUskdUskdUskdUskdVskgPdbwPdbwPdbwPdbwPdbxUskdUskdUskdUskdUskdUskdUskgTd7wQdbwPdbwPdbwPdbwUeL1VskhUskdUskdVskgPdbwPdbwPdbwPdbwQdbxVs0hUskdUskdUskdUskdUskcQdbwPdbwPdbwPdbwRdrxUskhUskdUskdUskdVskgWeb4QdbwPdbwPdbwPdbwPdbxVskhUskdUskdUskdVskgRdrwPdbwPdbwPdbxUskdUskdUskdUskdWskkPdbwPdbwPdbwPdbxUskdUskdUskdUskcSdr0PdbwPdbwPdbwQdbxUskdUskcQdbwPdbwPdbwPdbwPdbwXeL5UskdUskdUskdVskkQdbwPdbwRdrxUskdUskcPdbxUskf///9ORprqAAAA8XRSTlMAGmZpGwE4d0kKCErK/KkQOt3znicBATin8Oou/n8ZE3Lisz7l/b9HBQZBuvalIgFMz++NIgEflO/+wVAMHXjk2WEMEHDV/eF9GwE5pvW2RAQFQbX6+LA1AQlg1uuKIR2M7M9cDiKI01wKA2DS6YQhBUCv+rAwL+S2QwIPbdipCE/jTgIOifvRFBq+kx4CQ7v4+X0CIefOaxUBL5Lo/M0LBDq9uDcDDGLeGhPY5oEXAjT3sj8HKY7JYgsii8xnEAM8t/ekOA1dy+wcEW9hAhOdwUIEMpnz22PbbxgHVsPZH17xFoLe3GUBoMpRBgYdBCEWUIfmiQAAAAFiS0dE86yxvu4AAAAHdElNRQfmCRcHIghgMYf/AAAB60lEQVRIx2NgGAWjgFaAkYmZBcxgZWPn4CSonIubh/cjHz+IKSD4SUhYRBSvcjFxCcmPHz9KSYM47J8+fZIRlJXDo15eQfEjCCiBbVBWAer4pKqmroFDuaaWNi9IuY6uHpivb2CoCtJiZGyCzV2mZuYWIOWWVtY2MDFbO3uQDhkHRycM9c4urm4g9e4enkiiXt4+viAtvn7+ASjKA4OCQ0DKQ8PCI1ANioyKlgFpiYmNQxKNT0gEuyYpOQXTralpMWB3pWdkQkWysnPArsnNy8caGAWFRcVgd5WUQgTKysGuqaiswhXc1TW1YHfV1YO5DWDnNzY1446gltY2kIb2DjCvswscW1LdPTiU9/b1TwCpnzhpMkRgSsJUkA63adNnYFE+c9bsOSDlc+c5zoeJLVi4COws3sVLlqKrX7Z8xSdIfK9EFl7FtBrsrjVr16EoX7+haCNIefGmzVvQTNq6Dewu3u07diIEd+2GpI09e/dhunX/gYNgdx06fAQaXkePHQe75kTsSeyhcep0OcRdZ86CuOfOg8Nm7oWLl3AF99nLV66CdFwDp+/r4LC/cfMWAx5w+85dYJ64dx/EfjD306eH50sZCIBHj588ffYc7KQX9i9fvSaknoHhzdu376Cefv9BlLD6UTAK6AUAHXsSvNupchsAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjItMDktMjNUMDc6MzQ6MDgrMDA6MDDf7pjeAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIyLTA5LTIzVDA3OjM0OjA4KzAwOjAwrrMgYgAAACh0RVh0ZGF0ZTp0aW1lc3RhbXAAMjAyMi0wOS0yM1QwNzozNDowOCswMDowMPmmAb0AAAAASUVORK5CYII=",
  "package": null,
  "connect-src": [],
  "frame-ancestors": [],
  "frame-src": [
    "form-integration-formio.bloomreach.works"
  ],
  "img-src": [],
  "script-src": [],
  "style-src": [],
  "font-src": [],
  "media-src": []
}

Remember that you will need to copy the form.io endpoint. When acquired add this to the configuration of the UI extension (config element above).

Once the UI extension is registered, make sure to add the UI extension to a content type and component

See the following demo of how this can work in the Experience Manager:

How to get your frontend to render the Form

The above integrations will store 2 attributes to the API: the form object itself and the code required to embed it on your page/component.

You can use the following react frontend component example to render the forms with the above integration (one size fits all):

export function GenericEmbeddedForm({component, page}: BrProps<ContainerItem>): JSX.Element | null {

   const content: any = component.getContent(page);

   let forms: Array<any>;
   try {
       forms = JSON.parse(content.form);
   } catch (e) {
       forms = []
   }

   return (
       <div>
           {forms.map((form, index) => {
               return  <div key={index} dangerouslySetInnerHTML={{__html: decodeURIComponent(escape(atob(form.embed)))}}/>
           })}
       </div>
   );
}

Custom Frontend Forms

If you are looking for forms that you can control in the frontend, but want to provide editors the ability to create and edit the form structure for example: have editors add/remove or rearrange fields you could also look at Bloomreach native form builder which stores the form model in Bloomreach Content SaaS.

For more information, check out this blog post!

Content SaaS | JSON Schema Form Builder

ksalic — Mon, 17 Oct 2022 09:23:57 +0000

Develop a JSON Form Builder custom integration for Bloomreach Content.

Recently Bloomreach Content SaaS released the feature: “Integrations Library”, in which innovative content type fields can be built using a built-in App framework. With the release of Custom integrations, you will be able to integrate, for example: 3rd party DAM system, add a markdown editor field or in this specific case: a form builder. Look at our Documentation pages dedicated to the Integrations Library to learn more.

JSON schema forms are a well known concept for quick form model building for the frontend. With the JSON Schema Form Builder integration, content editors can seamlessly create form models and add these to a website managed by the Bloomreach Experience Manager. This will save you time and demonstrate the flexibility of Bloomreach Content’s out-of-the-box integrations with more integrations to come.

A demo:

The form builder Application URL is located at:

https://content-forms.bloomreach.works/

We usually work with the following libraries to display the forms in the frontend application:

https://react-jsonschema-form.readthedocs.io/en/latest/

https://jsonforms.io/docs/getting-started

Example of a React Form Component:

import React from "react";

import { ContainerItem } from "@bloomreach/spa-sdk";

import { BrProps } from "@bloomreach/react-sdk";

import { withTheme } from "@rjsf/core";

import { Theme as Bootstrap4Theme } from "@rjsf/bootstrap-4";

const Form = withTheme(Bootstrap4Theme);

export function FormComponent({
  component,
  page,
}: BrProps<ContainerItem>): JSX.Element | null {
  const content: any = component.getContent(page);

  let form;

  try {
    form = JSON.parse(content.form);
  } catch (e) {
    form = { jsonSchema: {}, uischema: {} };
  }

  const schema = form.jsonSchema ?? {};

  const uischema = form.uiSchema ?? {};

  return (
    <div
      className={`jumbotron mb-3 ${page.isPreview() ? "has-edit-button" : ""}`}
    >
      <Form
        schema={schema}
        uiSchema={uischema}
        onSubmit={(submissionData) => {
          console.log(submissionData);
        }}
      />
    </div>
  );
}

Do note that JSON Schema Form Builder does not take any form handling into account. The library packages listed above provide a hook (see above #onSubmit whenever the form is submitted by the site visitor).

This integration is based on the UI provided by:

https://ginkgobioworks.github.io/react-json-schema-form-builder/

Install JSON Schema Form Builder with the Custom Integrations dashboard:

Or use the installer:

Install!

Content SaaS | Integrations Library - Markdown Editor as a UI Extension

ksalic — Mon, 17 Oct 2022 09:23:05 +0000

Develop a Markdown editor UI extension and add it as a custom integration to your Bloomreach Content environment.

Here is how it works:

A UI Extension (Custom Integration) application is loaded as an iframe inside of a field of a content type in the Experience manager.
The UI Extension application uses the UI Extension Client Library to communicate between the application and the Experience manager - primarily to save and read field values in the CMS.
The UI Extension application can be built in any well-known frontend framework e.g., React, Angular, Vue, or Plain JS, as long as it includes the Client Library.
Additional configuration and context (such as CMS user or locale) can be passed along the UI Extension application.

For this blog, I’m going to create a new UI extension that will allow editors to edit in Markdown for markup. Markdown markup is nowadays used frequently with mobile native applications. I recently created an integration with Bloomreach Content and Flutter with the Flutter SDK.

This markdown editor is complementary to the Flutter SDK. The markdown editor itself is an integration with https://stackedit.io/, which is, in my opinion, a very well-constructed and easy-to-use markdown editor.

Frontend Project

Firstly, create the UI Extension Application as a new frontend project. I’m very familiar with React, so I’ll create a simple React project:

yarn create react-app markdown-ui-extension

Install the UI Extension Client Library:

yarn add @bloomreach/ui-extension

Code the Plugin

const ui = await UiExtension.register();

Get the current field value:

const brDocument = await ui.document.get();
const value = await ui.document.field.getValue();

Set a field value:

ui.document.field.setValue(‘new value’);

The source code of the markdown editor can be found at:

https://github.com/ksalic/markdown-field/

Deploy the Plugin

The Markdown editor plugin is deployed on:

https://markdown-field.bloomreach.works/

Use the Integrations UI to Register the Extension

As a developer, log in to Bloomreach Content and navigate to Setup > Integrations:

Add a new “Custom Integration”:

Make sure all of the fields are marked as the following:

Once you save, the custom integration is now listed and available for use on content types.

Add the UI Extension to a Content Type

As a developer make sure you create a new developer project and make sure content type changes are checked!

Create or edit a new content type.

Add a new Open UI String field to the content type:

Select the UI Extension from the dropdown:

Congratulations. You have now successfully added a markdown field to a content type!

The source code of the markdown editor can be found at:

https://github.com/ksalic/markdown-field/

Content SaaS | Flutter SDK for Mobile Native Development

ksalic — Mon, 17 Oct 2022 09:21:34 +0000

Get started with the Bloomreach Content Flutter SDK for native mobile support. Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

Bloomreach Content SaaS is now available on all native mobile platforms.

In the Bloomreach Content Experience Manager you can visually edit content and experiences and have the ability to preview and seamlessly integrate with our Cross-Channel Campaign Management tool: Bloomreach Engagement.

A bit on our SDKs: the current supported platforms of our Bloomreach Content official SDKs are:

Recently, we’ve released a Flutter SDK for native mobile support. Flutter is an open source framework for building beautiful, natively compiled, multi-platform applications from a single codebase.

“This is an open source community driven project that is not supported and maintained by Bloomreach engineering.”

Flutter supports the following platforms (as of July 2022):

Android	API 16 (Android 4.1) & above
iOS	iOS 9 & above
Linux	Debian, 64-bit
macOS	El Capitan (10.11) & above
Web	Chrome 84 & above
Web	Firefox 72.0 & above
Web	Safari on El Capitan & above
Web	Edge 1.2.0 & above
Windows	Windows 7 & above, 64-bit

1. Get Started with Flutter

To get started with Flutter follow this trail:

https://docs.flutter.dev/get-started/install

2. Install the Bloomreach Content Flutter SDK

Once a flutter project is created, install the Bloomreach Content Flutter SDK as a dependency:

flutter pub add brcontent
Going forward you can integrate using the API Client (3a) or the Rendering SDK (3b).

3a. Get Started with the API Client

Please follow the installation procedure and then run the following:

import 'package:brcontent/api.dart';

final instance =
PageApi(ApiClient(basePath: 'https://sandbox-sales02.bloomreach.io'));

final path = path_example; // String | 
final channelId = channelId_example; // String | 

try {
    final Page page = await instance.getPage(channelId, path);
    print(page);

    Container container = page.getComponentByPath('container') ;

    var components = container.getComponents(page);

    components.forEach((containerItem) {
      print(containerItem!.name);
      if (containerItem.hasContent()) {
        print(containerItem.getContent(page)?.data);
        print('-----------');
      }
    });
} catch (Exception e) {
    print('Exception when calling PageApi->getPage: $e\n');
}

For more examples on the API client: https://github.com/bloomreach/content-flutter-sdk/blob/master/test/page_api_test.dart

3b. Get Started with the Rendering SDK

Examples

https://github.com/bloomreach/content-flutter-demo/blob/master/lib/main.dart

Edit the main.dart

import 'package:brcontent/api.dart' as br;

void main() {
  runApp(DemoApplication("https://sandbox-sales02.bloomreach.io", 'mobile-native-demo', getComponentMapping()));
}

class DemoApplication extends br.Application {

  DemoApplication(String baseUrl, String channelId,Map<String, Function(br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage])> componentMapping)
      : super(baseUrl, channelId, componentMapping);

  @override
  br.ApplicationState<br.Application> createState() {
    return DemoApplicationState();
  }
}

class DemoApplicationState extends br.ApplicationState {

  @override
  Widget buildPage(BuildContext context, br.Page page) {
    br.Component menuComponent = page.getComponentByPath('menu'); //get the menu
    br.Menu menu = menuComponent.getMenu(page) as br.Menu;

    br.Container container = page.getComponentByPath('container'); //get a container component by path

    return MaterialApp(
      title: page.getDocument()?.getData('title'),
      home: Scaffold(
        drawer: ..,
        appBar: ..),
        body: br.ContainerItemComponentsListView(componentMapping, container, page, setPage), //this will render eacht container item component in a listview
      ),
    );
  }
}

//mapping components to widgets by the container item's ctype
getComponentMapping() {
  Map<String, dynamic Function(br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage])>
  components = HashMap();
  components.putIfAbsent(
      "IntroSlider",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          CarouselWidget(item: item, page: page));
  components.putIfAbsent(
      "BannerCollection",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          BannerCollection(item: item, page: page));
  components.putIfAbsent(
      "TitleAndText",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          TitleAndTextWidget(item: item, page: page));
  components.putIfAbsent(
      "List",
          () => (br.Page page, br.ContainerItem item, [void Function(String newPath)? setPage]) =>
          ListWidget(item: item, page: page, setPage: setPage));
  return components;
}

Resources

All source code is located in our github repository:

SDK: https://github.com/bloomreach/content-flutter-sdk
Demo: https://github.com/bloomreach/content-flutter-demo

An online web demo is located at:

https://flutter-demo.bloomreach.works/

An online simulated demo (android) is located at:

https://appetize.io/app/pivlphpv5zp4qdelef3u4judmq?device=pixel4&osVersion=11.0&scale=75

Android users can download the demo APK here directly:

https://github.com/bloomreach/content-flutter-demo/blob/master/build/app/outputs/flutter-apk/app-release.apk