Die folgende Komponente ist für die Suche nach Assets und die Auswahl verantwortlich.
<acdc-asset-search
locale="de"
bearer=""
event-version="v1"
pre-selected-assets="db04442b-6df1-4d28-9bce-1ab057330f4e,939cfaee-7606-494d-b1fc-e20aa7d251f2"
linked-assets-ids="d59b37c6-2f76-467a-8e21-3b3ac496d499,d59b37c6-2f76-467a-8e21-3b3ac496d199[/SP6o0j2Gbq7YGjqNCvlQkKiV6uj-BCEzToG+ZKiB32Qzo=/fp0.18-0.39]"
detailed-information="true">
</acdc-asset-search>Verknüpfte Bilder sind Bilder die mit dem einbindenden System verknüpft sind. Hierzu wird in der Suche die Auswahl bestätigt. Erst danach werden die Events für die Verknüpfung gesendet. Verknüpfte Bilder können an der Suchkomponente oder hier als über das Attribut "linked-assets-ids" vorbelegt werden.
<acdc-display-linked-assets
linked-assets-ids="001801e5-866b-42f5-8832-89180d31309f[/SP6o0j2Gbq7YGjqNCvlQkKiV6uj-BCEzToG+ZKiB32Qzo=/fp0.18-0.39],0f2e5f66-6e05-4983-a40b-2d7aea1f4bf3">
namespace="test"
event-version="v1"
</acdc-display-linked-assets>
<acdc-asset-search
locale="de"
event-version="v1"
namespace="filter-demo"
init-filter-param='{ "assetTypes":
{
"DIY_PROJECT_IMAGE": { "selected": true },
"DATA_SHEET": { "selected": false },
"MISC_IMAGE": { "selected": false },
"COMPILATION_IMAGE": { "selected": false },
"PRODUCT_IMAGE": { "selected": false },
"LOGO_IMAGE": { "selected": false },
"THREE_D_LAYER_IMAGE": { "selected": false },
"CONTENT_IMAGE": { "selected": false },
"PRODUCT_3DMODEL": { "selected": false}
},
"sourceSystems": {
"BILD_DATEN_POOL": { "selected": true },
"CENSHARE": { "selected": true },
"BAZAARVOICE_MAILING": { "selected": true },
"ACDC": { "selected": true },
"CGI_LEGACY": { "selected": true },
"CGI": { "selected": true }
},
"zIndex": 1001,
"maxSelected":5
}'>
</acdc-asset-search>Alle Komponenten können mit einem Namespace versehen werden. Komponenten mit einem Namespace teilen sich selektierte und verknüpfte Bilder und sind von anderen Namespaces separiert. Wenn kein Namespace angegeben wird, ist er auf "default" vorbelegt.
<acdc-asset-search
locale="de"
event-version="v1"
namespace="test"
bearer=""
pre-selected-assets="db04442b-6df1-4d28-9bce-1ab057330f4e,939cfaee-7606-494d-b1fc-e20aa7d251f2"
linked-assets-ids="d59b37c6-2f76-467a-8e21-3b3ac496d499,d59b37c6-2f76-467a-8e21-3b3ac496d199[/SP6o0j2Gbq7YGjqNCvlQkKiV6uj-BCEzToG+ZKiB32Qzo=/fp0.18-0.39]">
</acdc-asset-search>
<acdc-display-linked-assets
namespace="test">
</acdc-display-linked-assets>Zur Einbindung der Komponenten müssen diese in der Webseite registriert werden. Dazu wird ein JS-File von unserem Backend-Server am Ende der Webseite eingebunden. Die Einbindung auf diese Art lässt uns die Freiheit, die Komponente flexibel weiterzuentwickeln. Die Kommunikation nach außen über Events werden wir in einer versionierten Form anbieten, so dass ein Update auf eine neuere Schnittstelle problemlos eingeplant werden kann. Die eigentliche Funktionalität wird auf einem html/css-Overlay ausgeführt, so dass dort keine Probleme zu erwarten sein werden. Der Inhalt, der in der einbindenen Seite sichtbar ist, wird sich in der Größe nicht grundlegend verändern.
<script type="text/javascript" src=""></script>Hinweis: Die Einbindung der Komponenten über die folgenden URLs funktioniert nur richtig wenn die URL, auf der diese eingebunden werden, als erlaubte Origin im ACDC Backend konfiguriert ist. Wenn beispielsweise beim öffnen der Asset Suche in der Dev-Konsole des Browsers CORS Fehler angezeigt werden, dann teilt uns bitte die URL von eurem System, auf dem ihr die Komponenten einbindet, mit.
| Umgebung | URL | CORS Allowed Origins |
| dev/qa | https://backend.dbsacdc-qa.obi.solutions/scs/js/acdc-web-components.js |
|
| stage/fqa | https://backend.dbsacdc-fqa.obi.solutions/scs/js/acdc-web-components.js |
|
| prod | https://backend.dbsacdc-prod.obi.solutions/scs/js/acdc-web-components.js |
Bei mindestens einem Tag muss das Tag bearer mit einem JWT-Token aus dem content-Realm im OBI-Keycloak (für alle Stages = PROD) befüllt werden (base64-kodiert).
import Keycloak from "keycloak-js";
const {
VITE_SCS_KEYCLOAK_CLIENT_ID,
VITE_KEYCLOAK_BASE_URL
} = meta.import.env
const initOptions = {
url: VITE_KEYCLOAK_BASE_URL,
clientId: VITE_SCS_KEYCLOAK_CLIENT_ID,
realm: 'obi-content',
onLoad: 'login-required'
}
const keycloak = Keycloak(initOptions);
keycloak.init({onLoad: initOptions.onLoad}).then((auth) => {
if (!auth) {
window.location.reload();
}
if (keycloak.token && keycloak.idToken && keycloak.token !== '' && keycloak.idToken !== '') {
const elementsToPutTokenTo = document.getElementsByClassName('acdc-token');
for (let i = 0; i ĺ elementsToPutTokenTo.length; i++) {
const element = document.getElementsByClassName('acdc-token').item(i);
element.setAttribute('bearer', keycloak.token)
}
}
setInterval(() => {
if (keycloak) {
keycloak.updateToken(70).then((refreshed) => {
if (refreshed) {
const elementsToPutTokenTo = document.getElementsByClassName('acdc-token');
for (let i = 0; i ĺ elementsToPutTokenTo.length; i++) {
const element = document.getElementsByClassName('acdc-token').item(i);
element.setAttribute('bearer', keycloak.token)
}
}
}).catch(err => {
console.error(`Failed to refresh token ${err}`);
});
}
}, 20000)
})Der 'Token löschen' Button entfernt zur Demonstration den aktuellen Keycloak Token aus allen Komponenten (indem das bearer Attribute geleert wird). Ohne gesetztem Token funktionieren diese nun nicht mehr und ein entsprechender Hinweis wird beim klick auf diese angezeigt.
Der 'Token setzen' Button füllt das bearer Attribute mit dem Wert im 'Bearer Token' Textfeld, oder wieder mit dem aktuellen Keycloak Token.
| Attributname | Gültige Werte | Beschreibung | Tags |
| locale | de,en | Sprache für die Oberfläche. Bei mehrfacher Angabe, wird nur der letzte Wert übernommen. | acdc-asset-search, acdc-display-linked-assets |
| event-version | v1 | Version der Events die erzeugt werden. Wenn der Wert nicht angegeben wird, werden keine Events erzeugt. | acdc-asset-search, acdc-display-linked-assets |
| namespace | [a-zA-Z0-9_-]*, vorbelegt mit default | Über die Angabe des Namespaces lassen sich Unterschiedliche Gruppen von Bildern auswählen. Z.B. Für Titelbild, Detailbilder und Szenen. Alle Elemente mit einem Namespace zeigen die selben Bilder. In den Events ist der Namespace auch ein Bestandteil, daher auch die Einschränkung des Strings. | acdc-asset-search, acdc-display-linked-assets |
| bearer | base64 kodiertes JWT, welches im obi-content realm gültig ist. | acdc-asset-search, acdc-display-linked-assets | |
| pre-selected-ids | UUIDs von Assets... | Liste von IDs der Assets, die als ausgewählte gezeigen werden sollen. Die jeweils letzte Angabe für einen Namespace wird übernommen. | acdc-asset-search, acdc-display-linked-assets |
| linked-assets-ids | UUIDs von Assets, ggf. erweitert um zusätzliche Pfad-Angaben für Focal-Point, ... | Liste von IDs der Assets, die schon in der umgebenen Anwendung verknüpft sind. Die jeweils letzte Angabe für einen Namespace wird übernommen. Weitere Daten werden in [] hinter die UUID geschrieben. | acdc-asset-search, acdc-display-linked-assets |
| init-filter-param | JSON Format: JSON Schema | Liste von vordefinierten Filtern für AssetTypes und Quellsysteme in der Asset Suche. Die mit 'selected: true' angegebenen AssetTypes und Quellsystemen werden in der Asset Suche vor ausgewählt. | acdc-asset-search |
| width | 70-100 | (Optional) Größe der Sidebar in %. 70% ist der minimale Wert, der immer gesetzt ist und dieser kann bis auf 90% hochgesetzt werden. Alles über 90% wird automatisch als Fullscreen angezeigt. | acdc-asset-search |
| auto-load | true,false | (Optional) Wenn true gesetzt ist, wird das Asset-Search automatisch geöffnet, sobald ein valider Bearer Token gesetzt ist. | acdc-asset-search |
| hide-close | true,false | (Optional) Wenn true gesetzt ist, wird der schließen Button von der Sidebar ausgeblendet. | acdc-asset-search |
| copy-button | true,false | (Optional) Wenn true gesetzt ist, wird der Copy Button zum kopieren der Asset URL eingeblendet. | acdc-asset-search |
| default-focal-point | 2 Nummer getrennt mit einem - und in dieser RAnge: von 0.0 bis 1.0. Beispiel: 0.4-0.5 | (Optional) Wenn gesetzt ist, wird der Focal Point automatisch benutzt. | acdc-asset-search |
| detailed-information | true,false | (Optional) Wenn true gesetzt ist, werden mehr Information über das Asset angezeigt. Default Wert ist false | acdc-asset-search |
| Eventname | Beschreibung | Type |
| obi:acdc:<version>:<namespace>:asset-linked | Die Auswahl der Asset wird in der Suche bestätigt. Es wird für jedes Asset, welches zu der Auswahl hinzugefügt wurde ein Event erzeugt. Eine Anwahl auf de Detailseite der verknüpften Assets führt auch zu dem Event. | SingleAssetEventDetailsV1 |
| obi:acdc:<version>:<namespace>:asset-unlinked | Die Auswahl der Asset wird in der Suche bestätigt. Es wird für jedes Asset, welches aus der Auswahl entfernt wurde ein Event erzeugt. Eine Abwahl auf de Detailseite der verknüpften Assets führt auch zu dem Event. | SingleAssetEventDetailsV1 |
| obi:acdc:<version>:<namespace>:confirm-asset-selection | Die Auswahl der Bilder wird in der Suche bestätigt. Das Event enthält die Liste aller selektierten Assets zu dem Zeitpunkt der Bestätigung. Eine An-/Abwahl auf de Detailseite der verknüpften Assets führt auch zu dem Event. | MultiAssetEventDetailsV1 |
Daten können zum Beispiel aus den Events extrahiert werden und dann in (versteckte) Eingabefelder geschrieben werden. Diese werden dann beim Speichern in der einbindenden Anwendung mit persistiert.
<select name="assets" id="demoSelectedAssets" multiple="multiple">
</select>
<select name="assets" id="demoLinkedAssets" multiple="multiple">
</select>
<script language="JavaScript">
const assetSelected = (event) => {
const assetDemoSelect = document.querySelector('#demoSelectedAssets')
const newOption = document.createElement('option');
newOption.text = event.detail.asset.name
newOption.value = event.detail.asset.id
assetDemoSelect.append(newOption)
}
const assetDeselected = (event) => {
const option = document.querySelector(`#demoSelectedAssets option[value="${event.detail.asset.id}"]`)
if (option) {
const assetDemoSelect = document.querySelector('#demoSelectedAssets')
assetDemoSelect.removeChild(option);
}
}
window.addEventListener('obi:acdc:v1:default:asset-selected', assetSelected)
window.addEventListener('obi:acdc:v1:default:asset-deselected', assetDeselected)
</script>