Sélecteur de ressources micro front-end

Dernière mise à jour : 2023-12-14
  • Créé pour :
  • Admin
    User
Version Lien de l’article
AEM 6.5 Cliquez ici
AEM as a Cloud Service Cet article

Le sélecteur de ressources micro front-end fournit une interface utilisateur qui s’intègre facilement au référentiel Experience Manager Assets as a Cloud Service afin que vous puissiez parcourir ou rechercher des ressources numériques disponibles dans le référentiel et les utiliser dans votre expérience de création d’applications.

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

Présentation

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

  • Facile à intégrer avec n’importe quelle application Adobe ou autre qu’Adobe utilisant la bibliothèque JavaScript Vanilla.

  • Facile à gérer, car les mises à jour du package Sélecteur de ressources sont automatiquement déployées vers le sélecteur de ressources disponible pour votre application. Aucune mise à jour n’est requise dans votre application pour télécharger les dernières modifications.

  • Facile à personnaliser, car il existe des propriétés qui contrôlent l’affichage du sélecteur de ressources dans votre application.

  • Recherche de texte intégral, filtres prêts à l’emploi et filtres personnalisés pour accéder rapidement aux ressources à utiliser dans l’expérience de création.

  • Possibilité de changer de référentiels au sein d’une organisation IMS pour la sélection de ressources.

  • Possibilité de trier les ressources par nom, dimension et taille, et de les afficher en mode Liste, Grille, Galerie ou Cascade.

Le but de cet article est de montrer comment utiliser le sélecteur de ressources 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 ressources avec votre référentiel Experience Manager Assets as a Cloud Service :

Intégration du sélecteur de ressources à l’aide de Vanilla JS

Vous pouvez intégrer n’importe quelle application Adobe ou autre qu’Adobe avec 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 ressources 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 -

  • Définition des détails d’authentification
  • Accès au référentiel Assets as a Cloud Service
  • Configuration des propriétés d’affichage du sélecteur de ressources

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

  • Vous intégrez une application Adobe sur Unified Shell.
  • Un jeton IMS est déjà généré pour l’authentification.

Prérequis

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 :

  • imsOrg
  • imsToken
  • apikey

Installation

Les sélecteurs de ressources 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é) :

<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'

Type de ressource sélectionné

Le type de ressource sélectionné est un tableau d’objets qui contient des informations sur les ressources lors de l’utilisation des fonctions handleSelection, handleAssetSelection, et onDrop.

Syntaxe du schéma

interface SelectedAsset {
    'repo:id': string;
    'repo:name': string;
    'repo:path': string;
    'repo:size': number;
    'repo:createdBy': string;
    'repo:createDate': string;
    'repo:modifiedBy': string;
    'repo:modifyDate': string;
    'dc:format': string;
    'tiff:imageWidth': number;
    'tiff:imageLength': number;
    'repo:state': string;
    computedMetadata: Record<string, any>;
    _links: {
        'http://ns.adobe.com/adobecloud/rel/rendition': Array<{
            href: string;
            type: string;
            'repo:size': number;
            width: number;
            height: number;
            [others: string]: any;
        }>;
    };
}

Le tableau suivant décrit des propriétés importantes de l’objet Ressource sélectionnée.

Propriété Type Explication
repo:repositoryId chaîne Identifiant unique du référentiel dans lequel la ressource est stockée.
repo:id chaîne Identifiant unique de la ressource.
repo:assetClass chaîne Classification de la ressource (par exemple, image ou vidéo, document).
repo:name chaîne Nom de la ressource, y compris l’extension de fichier.
repo:size nombre Taille de la ressource en octets.
repo:path chaîne Emplacement de la ressource dans le référentiel.
repo:ancestors Array<string> Tableau d’éléments ancêtres de la ressource dans le référentiel.
repo:state chaîne État actuel de la ressource dans le référentiel (par exemple, active, supprimée, etc.).
repo:createdBy chaîne L’utilisateur, l’utilisatrice ou le système qui a créé la ressource.
repo:createDate chaîne Date et heure de création de la ressource.
repo:modifiedBy chaîne L’utilisateur, l’utilisatrice ou le système qui a modifié la ressource pour la dernière fois.
repo:modifyDate chaîne Date et heure de la dernière modification de la ressource.
dc:format chaîne Format de la ressource, tel que le type de fichier (par exemple, JPEG, PNG, etc.).
tiff:imageWidth nombre Largeur d’une ressource.
tiff:imageLength nombre Hauteur d’une ressource.
computedMetadata Record<string, any> Objet qui représente un compartiment pour tous les types de métadonnées de la ressource (référentiel, application ou métadonnées incorporées).
_links Record<string, any> Liens hypermédias pour la ressource associée. Inclut des liens pour des ressources telles que des métadonnées et des rendus.
_links.http://ns.adobe.com/adobecloud/rel/rendition Array<Object> Tableau d’objets contenant des informations sur les rendus de la ressource.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].href chaîne URI du rendu.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].type chaîne Type MIME du rendu.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].'repo:size' nombre Taille du rendu en octets.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].width nombre Largeur du rendu.
_links.http://ns.adobe.com/adobecloud/rel/rendition[].height nombre Hauteur du rendu.

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 ressources.

Exemple pour le flux non-SUSI

Cet exemple montre comment utiliser le sélecteur de ressources 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 ressources 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 ressources comme illustré dans les 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 ressources, appelez la fonction renderAssetSelector comme indiqué dans la ligne 17. Le sélecteur de ressources 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 ressources avec un flux non-SUSI dans votre application Adobe.

<!DOCTYPE html>
<html>
<head>
    <title>Asset 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 AssetSelector component
        const container = document.getElementById('asset-selector-container');
        // imsOrg and imsToken are required for authentication in non-SUSI flow
        const assetSelectorProps = {
            imsOrg: 'example-ims@AdobeOrg',
            imsToken: "example-imsToken",
            apiKey: "example-apiKey-associated-with-imsOrg",
            handleSelection: (assets: SelectedAssetType[]) => {},
        };
        // Call the `renderAssetSelector` available in PureJSSelectors globals to render AssetSelector
        PureJSSelectors.renderAssetSelector(container, assetSelectorProps);
    </script>
</head>

<body>
    <div id="asset-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 ressources.

Utilisation des propriétés du sélecteur de ressources

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

Propriété Type Requis Valeur par défaut Description
rail booléen Non false S’il est marqué true, le sélecteur de ressources s’affiche dans un rail à gauche. S’il est marqué false, le sélecteur de ressources s’affiche dans le mode modal.
imsOrg chaîne Oui Identifiant Adobe Identity Management System (IMS) attribué lors de l’approvisionnement de Adobe Experience Manager en tant que Cloud Service pour votre organisation. La clé imsOrg est requise pour vous authentifier, que l’organisation à laquelle vous accédez se trouve sous Adobe IMS ou non.
imsToken chaîne Non Jeton de support IMS utilisé pour l’authentification. imsToken est obligatoire si vous utilisez le flux non-SUSI.
apiKey chaîne Non Clé d’API utilisée pour accéder au service AEM Discovery. apiKey est obligatoire si vous utilisez le flux non-SUSI.
rootPath chaîne Non /content/dam/ Chemin du dossier à partir duquel le sélecteur de ressources affiche vos ressources. rootPath peut également être utilisé sous la forme d’encapsulation. Par exemple, avec le chemin suivant, /content/dam/marketing/subfolder/, le sélecteur de ressources ne vous permet pas de parcourir les dossiers parents, mais affiche uniquement les dossiers enfants.
path chaîne Non Chemin d’accès utilisé pour accéder à un répertoire spécifique de ressources lors du rendu du sélecteur de ressources.
filterSchema tableau Non Modèle utilisé pour configurer les propriétés de filtre. Cela s’avère utile lorsque vous souhaitez limiter certaines options de filtre dans le sélecteur de ressources.
filterFormProps Objet Non Spécifiez les propriétés de filtre à utiliser pour affiner votre recherche. Par exemple, JPG de type MIME, PNG, GIF.
selectedAssets Tableau <Object> Non Spécifiez les ressources sélectionnées lors du rendu du sélecteur de ressources. Un tableau d’objets contenant une propriété d’ID des ressources est requis. Par exemple : [{id: 'urn:234}, {id: 'urn:555'}]. Une ressource doit être disponible dans le répertoire actuel. Si vous devez utiliser un autre répertoire, saisissez également une valeur pour la propriété path.
acvConfig Objet Non Propriété d’affichage de collection de ressources qui contient comportant une configuration personnalisée pour remplacer les valeurs par défaut.
i18nSymbols Object<{ id?: string, defaultMessage?: string, description?: string}> Non Si les traductions prêtes à l’emploi ne sont pas suffisantes pour répondre aux besoins de votre application, vous pouvez exposer une interface par laquelle vous pouvez transmettre vos propres valeurs localisées et personnalisées via la propriété i18nSymbols. Le transfert d’une valeur par le biais de cette interface remplace les traductions fournies par défaut par les vôtres. Pour effectuer le remplacement, vous devez transmettre un objet Descripteur de message valide à la clé de i18nSymbols que vous voulez remplacer.
intl Objet Non Le sélecteur de ressources fournit des traductions prêtes à l’emploi par défaut. Vous pouvez sélectionner la langue de traduction en fournissant une chaîne de paramètres régionaux valide via la propriété intl.locale. Par exemple : intl={{ locale: "es-es" }}

. Les chaînes de paramètres régionaux prises en charge suivent la norme ISO 639 - Codes pour la représentation des noms des normes linguistiques.

Liste des paramètres régionaux pris en charge : anglais (en-us, par défaut), espagnol (es-es), allemand (de-de), français (fr-FR), italien (it-it), japonais (ja-jp), coréen (ko-kr), portugais (pt-br), chinois (traditionnel, zh-cn), chinois (Taïwan, zh-tw).
repositoryId chaîne Non '' Référentiel à partir duquel le sélecteur de ressources charge le contenu.
additionalAemSolutions Array<string> Non [ ] Il vous permet d’ajouter une liste de référentiels d’AEM supplémentaires. Si aucune information n’est fournie dans cette propriété, seule la bibliothèque de médias ou les référentiels AEM Assets sont pris en compte.
hideTreeNav booléen Non Indique s’il faut afficher ou masquer la barre latérale de navigation de l’arborescence de ressources. Elle est utilisée uniquement en mode modal et, par conséquent, cette propriété n’a aucun impact en mode rail.
onDrop Fonction Non La propriété active la fonctionnalité de dépôt d’une ressource.
dropOptions {allowList?: Object} Non Configure les options de dépôt à l’aide de la « liste autorisée ».
colorScheme chaîne Non Configure le thème (light ou dark) du sélecteur de ressources.
handleSelection Fonction Non Appelée avec un tableau d’éléments de ressource lorsque des ressources sont sélectionnées et que vous cliquez sur le bouton Select en mode modal. Cette fonction est uniquement appelée en mode modal. En mode rail, utilisez les fonctions handleAssetSelection ou onDrop. Exemple :
handleSelection=(assets: Asset[])=> {…}
Voir Type de ressource sélectionné pour plus d’informations.
handleAssetSelection Fonction Non Appelée avec un tableau d’éléments lorsque les ressources sont sélectionnées ou désélectionnées. Cela s’avère utile si vous souhaitez écouter les ressources lorsque l’utilisateur ou l’utilisatrice les sélectionne. Exemple :
handleSelection=(assets: Asset[])=> {…}
Voir Type de ressource sélectionné pour plus d’informations.
onClose Fonction Non Appelée lorsque vous cliquez sur le bouton Close en mode modal. Cette fonction est uniquement appelée en mode modal et n’est pas prise en compte en mode rail.
onFilterSubmit Fonction Non Appelée avec des éléments de filtre lorsque l’utilisateur ou l’utilisatrice modifie des critères de filtre.
selectionType chaîne Non unique Configuration pour la sélection single ou multiple de ressources à la fois.

Exemples d’utilisation des propriétés du sélecteur de ressources

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

Exemple 1 : sélecteur de ressources en mode rail

rail-view-exemple

Si la valeur du AssetSelector rail est définie sur false ou n’est pas mentionnée dans les propriétés, le sélecteur de ressources s’affiche par défaut en mode modal.

Exemple 2 : fenêtre contextuelle de métadonnées

Utilisez différentes propriétés pour définir les métadonnées d’une ressource que vous souhaitez afficher à l’aide d’une icône d’infos. La fenêtre contextuelle d’infos fournit l’ensemble des informations sur la ressource ou le dossier, y compris le titre, les dimensions, la date de modification, l’emplacement et la description d’une ressource. Dans l’exemple ci-dessous, diverses propriétés sont utilisées pour afficher les métadonnées d’une ressource, par exemple : la propriété repo:path spécifie l’emplacement d’une ressource.

metadata-popover-example

Exemple 3 :propriété de filtre personnalisé dans la vue de rail

Outre la recherche facettée, le sélecteur de ressources vous permet de personnaliser divers attributs pour affiner votre recherche à partir de Adobe Experience Manager as a Cloud Service application. Vous devez ajouter le code suivant pour ajouter des filtres de recherche personnalisés dans votre application. Dans l’exemple ci-dessous, la recherche Type Filter qui filtre le type de ressource parmi les Images, Documents ou Vidéos ou le type de filtre que vous avez ajouté pour la recherche.

custom-filter-example-vanilla

Gestion de la sélection de ressources à l’aide du schéma d’objet

La propriété handleSelection est utilisée pour gérer des sélections uniques ou multiples de ressources dans le sélecteur de ressources. L’exemple ci-dessous indique la syntaxe de l’utilisation de handleSelection.

handle-selection

Utilisation du sélecteur de ressources

Une fois que le sélecteur de ressources 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.

using-asset-selector

Masquer/Afficher le panneau

Pour masquer les dossiers dans le volet de navigation de gauche, cliquez sur l’icône Masquer les dossiers. Pour annuler les modifications, cliquez à nouveau sur l’icône Masquer les dossiers.

Sélecteur de référentiels

Le sélecteur de ressources vous permet également de basculer entre des référentiels pour la sélection de ressources. Vous pouvez sélectionner le référentiel de votre choix dans la liste déroulante disponible dans le panneau de gauche. Les options de référentiel disponibles dans la liste déroulante reposent sur la propriété repositoryId définie dans le fichier index.html. Cela est basé sur les environnements de l’organisation IMS sélectionnée accessible par l’utilisateur ou l’utilisatrice connecté(e). Les clientes et clients peuvent transmettre une préférence repositoryID et, dans ce cas, le sélecteur de ressources arrête le rendu du sélecteur de référentiels et effectue uniquement le rendu des ressources à partir du référentiel donné.

Référentiel de ressources

Il s’agit d’une collection de dossiers de ressources que vous pouvez utiliser pour effectuer des opérations.

Filtres prêts à l’emploi

Le sélecteur de ressources fournit également des options de filtres prêts à l’emploi pour affiner vos résultats de recherche. Les filtres suivants sont disponibles :

  • File type : inclut un dossier, un fichier, des images, des documents ou une vidéo.

  • MIME type : inclut JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX.

  • Image Size : inclut la largeur minimale et maximale, et la hauteur minimale et maximale de l’image.

    rail-view-example

Recherche personnalisée

Outre la recherche de texte intégral, le sélecteur de ressources vous permet de rechercher des ressources dans des fichiers à l’aide d’une recherche personnalisée. Vous pouvez utiliser des filtres de recherche personnalisés en modes Modal et Rail.

custom-search

Vous pouvez également créer un filtre de recherche par défaut pour enregistrer les champs que vous recherchez fréquemment et les utiliser ultérieurement. Pour créer une recherche personnalisée de vos ressources, vous pouvez utiliser la propriété filterSchema.

Le sélecteur de ressources 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

Vous pouvez trier les ressources du sélecteur de ressources selon le nom, les dimensions ou la taille d’une ressource. Vous pouvez également trier les ressources par ordre croissant ou décroissant.

Types de vues

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

  • vue liste Vue Liste : la vue Liste affiche les fichiers et dossiers défilables dans une seule colonne.
  • vue grille Vue grille : la vue Grille affiche les fichiers et dossiers défilables dans une grille de lignes et de colonnes.
  • vue galerie Vue Galerie : la vue Galerie affiche les fichiers ou les dossiers dans une liste horizontale centrée et verrouillée.
  • vue cascade Vue Cascade : la vue Cascade affiche les fichiers ou les dossiers sous la forme d’un pont.

Sur cette page