Sélecteur de ressources micro front-end

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.

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
• Définition des propriétés d’affichage du sélecteur de ressources
• Utilisation du sélecteur de ressources

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.

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 variable script , comme illustré dans lignes 6 à 15 de l’exemple ci-dessous. Une fois le script chargé, vous pouvez utiliser la variable globale PureJSSelectors. Définition du sélecteur de ressources properties comme illustré dans 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.

handleSelection=(assets: Asset[])=> {…}

handleSelection=(assets: Asset[])=> {…}

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

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.

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.

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.

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.

• A : masquer/afficher le panneau
• B : sélecteur de référentiels
• C : ressources
• D : filtres
• E : barre de recherche
• F : tri
• G : tri par ordre croissant ou décroissant
• H : vue

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.

  

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.

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.

Barre de recherche

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 : la vue Liste affiche les fichiers et dossiers défilables dans une seule colonne.
• Vue grille : la vue Grille affiche les fichiers et dossiers défilables dans une grille de lignes et de colonnes.
• Vue Galerie : la vue Galerie affiche les fichiers ou les dossiers dans une liste horizontale centrée et verrouillée.
• Vue Cascade : la vue Cascade affiche les fichiers ou les dossiers sous la forme d’un pont.

Ressources Business.Adobe.com