Sélecteur de destinations micro front-end Overview

Le sélecteur de destination Micro-Frontend fournit une interface utilisateur dans votre application qui s’intègre facilement au référentiel Experience Manager Assets as a Cloud Service. Vous pouvez rechercher ou parcourir le dossier approprié dans le référentiel Experience Manager Assets as a Cloud Service et charger des ressources à partir de votre application.

L’interface utilisateur Micro-Frontend est mise à disposition dans votre expérience de l’application à l’aide du package Sélecteur de destination. Toutes les mises à jour du package sont automatiquement importées et le dernier sélecteur de destination déployé est automatiquement chargé dans votre application.

Le sélecteur de destination offre de nombreux avantages, notamment :

Le but de cet article est de montrer comment utiliser le sélecteur de destination avec une application Adobe sous Unified Shell ou lorsque vous avez déjà généré un imsToken pour l’authentification. Dans cet article, ces workflows sont appelés flux non-SUSI.

Effectuez les tâches suivantes pour intégrer et utiliser le sélecteur de destination avec votre référentiel Experience Manager Assets as a Cloud Service :

Intégration du sélecteur de destination à l’aide de Vanilla JS integration-with-vanilla-js

Vous pouvez intégrer n’importe quelle application Adobe ou autre qu’Adobe avec un référentiel Experience Manager Assets as a Cloud Service et sélectionner des ressources dans l’application.

L’intégration est effectuée en important le package Sélecteur de destination et en se connectant à Assets as a Cloud Service à l’aide de la bibliothèque JavaScript Vanilla. Vous devez modifier un index.html ou tout fichier approprié dans votre application vers -

Vous pouvez effectuer une authentification sans définir certaines des propriétés IMS, si :

Prérequis prerequisites

Définissez les conditions préalables dans le fichier index.html ou un fichier similaire dans l’implémentation de votre application pour définir les détails d’authentification permettant d’accéder au référentiel Experience Manager Assets as a Cloud Service. Les prérequis sont les suivants :

Installation installation

Les sélecteurs de destination sont disponibles via le réseau CDN ESM (par exemple, esm.sh/skypack) et la version UMD.

Dans les navigateurs utilisant la version UMD (recommandé) :

Dans les navigateurs utilisant la version UMD (recommandé) :

<script src="https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/assets-selectors.js"></script>

<script>
  const { renderAssetSelector } = PureJSSelectors;
</script>

Dans les navigateurs avec la prise en charge import maps à l’aide de la version du réseau CDN ESM  :

<script type="module">
  import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'
</script>

Dans la fédération de modules Deno/Webpack à l’aide de la version du réseau CDN ESM  :

import { AssetSelector } from 'https://experience.adobe.com/solutions/CQ-assets-selectors/static-assets/resources/@assets/selectors/index.js'

Destination sélectionnée selected-destination

Le sélecteur de destination reçoit un rappel de onItemSelect, onTreeToggleItem ou onTreeSelectionChange avec le répertoire sélectionné contenant l’objet (répertoire, image, etc.).

Syntaxe du schéma

interface SelectedDestination {
  id: string;
  children: SelectedDestination[];
  'repo:repositoryId': string;
  'dc:format': string;
  'repo:assetClass': string;
  'storage:directoryType': string;
  'storage:region': string;
  'repo:name': string;
  'repo:path': string;
  'repo:ancestors': string[];
  'repo:createDate': string;
  'storage:assignee':

  { type: string; id: string; }
  ;
  'repo:assetId': string;
  'aem:published': boolean;
  'repo:createdBy': string;
  'repo:state': string;
  'repo:id': string;
  'repo:modifyDate': string;
  _page:

  { orderBy: string; count: number; };
}

Le tableau suivant décrit certaines des propriétés importantes de la destination sélectionnée.

Pour obtenir la liste complète des propriétés ainsi qu’un exemple détaillé, consultez la page Exemple de code de sélecteur de destination.

Exemple pour le flux non-SUSI non-ims-vanilla

Cet exemple montre comment utiliser le sélecteur de destination avec un flux non-SUSI lors de l’exécution d’une application Adobe sous Unified Shell ou lorsque vous avez déjà généré des imsToken pour l’authentification.

Insérez le package Sélecteur de destination dans votre code à l’aide de la balise script, comme illustré dans les lignes 6 à 15 de l’exemple ci-dessous. Une fois le script chargé, vous pouvez utiliser la variable globale PureJSSelectors. Définissez les propriétés du sélecteur de destination comme illustré aux lignes 16 à 23. Les propriétés imsOrg et imsToken sont toutes deux requises pour l’authentification dans un flux non-SUSI. La propriété handleSelection sert à gérer les ressources sélectionnées. Pour effectuer le rendu du sélecteur de destinations, appelez la fonction renderDestinationSelector comme indiqué dans la ligne 17. Le sélecteur de destination s’affiche dans l’élément de conteneur <div>, comme indiqué dans les lignes 21 et 22.

En suivant ces étapes, vous pouvez utiliser le sélecteur de destination avec un flux non-SUSI dans votre application Adobe.

<!DOCTYPE html>
<html>
<head>
    <title>Destination Selector</title>
    <script src="https://experience.adobe.com/solutions/CQ-assets-selectors/assets/resources/assets-selectors.js"></script>
    <script>
        // get the container element in which we want to render the DestinationSelector component
        const container = document.getElementById('destination-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const destinationSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderDestinationSelector` available in PureJSSelectors globals to render DestinationSelector
        PureJSSelectors.renderDestinationSelector(container, destinationselectorprops);
    </script>
</head>

<body>
    <div id="destination-selector-container" style="height: calc(100vh - 80px); width: calc(100vw - 60px); margin: -20px;">
    </div>
</body>

</html>

Pour obtenir un exemple détaillé, consultez Exemple de code de sélecteur de destination.

Utilisation des propriétés du sélecteur de destination destination-selector-properties

Vous pouvez utiliser les propriétés du sélecteur de destination pour personnaliser son rendu. Le tableau suivant répertorie les propriétés que vous pouvez utiliser pour personnaliser et utiliser le sélecteur de destination :

Exemples d’utilisation des propriétés du sélecteur de destination usage-examples

Vous pouvez définir les propriétés du sélecteur de destination dans le fichier index.html pour personnaliser son affichage dans votre application.

Exemple 1 : créer un dossier dans le sélecteur de destination

Le sélecteur de destination vous permet de créer un dossier dans lequel charger, déplacer ou copier des ressources à cet emplacement.

Exemple 2 : définir le type de vue du sélecteur de destination

Le sélecteur de destination affiche un large éventail de ressources dans les quatre vues Liste, Grille, Galerie et Cascade. Pour spécifier le type de vue par défaut, vous pouvez utiliser la propriété viewType. La propriété viewTypeOptions est utilisée avec la propriété viewType pour indiquer d’autres types de vues afin que d’autres options de type de vue puissent être affichées dans une liste déroulante. Un seul argument peut être utilisé si vous ne souhaitez afficher qu’une seule option.

Exemple 3 : initialiser le chemin d’accès au dossier de ressources

Utilisez la propriété path pour définir le nom du dossier qui s’affiche automatiquement lors du rendu du sélecteur de destination.

Utiliser le sélecteur de destination using-destination-selector

Une fois que le sélecteur de destination est configuré et que vous êtes authentifié(e) pour l’utiliser avec votre application Adobe Experience Manager as a Cloud Service, vous pouvez sélectionner des ressources ou effectuer d’autres opérations pour rechercher vos ressources dans le référentiel.

Barre de recherche search-bar

Le sélecteur de destination vous permet d’effectuer une recherche de texte intégral des ressources dans le référentiel sélectionné. Par exemple, si vous saisissez le mot-clé wave dans la barre de recherche, toutes les ressources qui contiennent le mot-clé wave dans l’une des propriétés de métadonnées s’affichent.

Tri sorting

Vous pouvez trier les ressources dans le sélecteur de destination selon le nom, la dimension ou la taille. Vous pouvez également trier les ressources par ordre croissant ou décroissant.

Référentiel de ressources assets-repo

Le sélecteur de destination vous permet également d’afficher les données du référentiel de votre choix disponibles dans l’application AEM. Vous pouvez utiliser la propriété repositoryID pour initialiser le chemin du dossier de destination que vous souhaitez afficher à la première instance du sélecteur de destination.

Ajouter un suffixe ou un préfixe add-suffix-or-prefix

Il s’agit d’un exemple de la propriété optionsFormSetup. Vous pouvez l’utiliser pour confirmer la sélection. Elle est transmise sur l’événement onConfirm.

Créer un dossier create-new-folder

Il vous permet de créer un dossier dans le dossier de destination de votre Adobe Experience Manager en tant que Cloud Service.

Types de vues types-of-view

Le sélecteur de destination vous permet d’afficher la ressource dans quatre vues différentes :

Infos info

L’icône d’informations ou d’informations vous permet d’afficher les métadonnées de la ressource sélectionnée. Il comprend divers détails tels que les dimensions, la taille, la description, le chemin, la date de modification et la date de création. Les informations de métadonnées sont fournies lors du chargement ou de la copie ou de la création d’une ressource.

Sélectionner un dossier select-folder

Le bouton Sélectionner un dossier permet de sélectionner des ressources pour effectuer diverses opérations associées à properties sur le sélecteur de destination.