Sélecteur de ressources micro front-end Overview

Le sélecteur de ressources micro front-end fournit une interface utilisateur qui s’intègre facilement au référentiel Experience Manager Assets 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.

Conditions préalables prereqs

Vous devez vous assurer que les méthodes de communication suivantes sont disponibles :

  • L’application s’exécute sur HTTPS.
  • L’URL de l’application se trouve dans la liste autorisée d’URL de redirection du client IMS.
  • Le flux de connexion IMS est configuré et rendu à l’aide d’une fenêtre contextuelle sur le navigateur web. Par conséquent, les fenêtres contextuelles doivent être activées ou autorisées sur le navigateur cible.

Utilisez les conditions préalables ci-dessus si vous avez besoin du workflow d’authentification IMS du sélecteur de ressources. Si votre authentification est déjà effective avec le workflow IMS, vous pouvez également ajouter les informations IMS à la place.

Voir plus

IMPORTANT
Ce référentiel est destiné à servir de documentation supplémentaire décrivant les API disponibles et les exemples d’utilisation pour l’intégration du sélecteur de ressources. Avant d’essayer d’installer ou d’utiliser le sélecteur de ressources, assurez-vous que votre organisation a reçu l’accès au sélecteur de ressources dans le cadre du profil Experience Manager Assets as a Cloud Service. Si vous n’avez pas reçu les privilèges d’accès, vous ne pouvez pas intégrer ni utiliser ces composants. Pour demander l’approvisionnement, l’administrateur ou l’administratrice de votre programme doit envoyer à Admin Console un ticket d’assistance portant la mention P2 et inclure les informations suivantes :
  • Noms de domaine dans lesquels l’application d’intégration est hébergée.
  • Après l’approvisionnement, votre organisation reçoit imsClientId, imsScope et une redirectUrl correspondant aux environnements demandés qui sont essentiels à la configuration du sélecteur de ressources. Sans ces propriétés valides, vous ne pouvez pas exécuter les étapes d’installation.

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é) :

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

Utilisation du sélecteur de ressources using-asset-selector

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 hide-show-panel

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 repository-switcher

Le sélecteur de ressources vous permet également de passer d’un référentiel à l’autre lors de 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 dépend des environnements de l’organisation IMS sélectionnée à laquelle accède l’utilisateur ou l’utilisatrice connectés. 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 filters

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 :

  • Statut : inclut le statut actuel de la ressource parmi all, approved, rejected ou no status.

  • Type de fichier : comprend folder, file, images, documents ou video.

  • Statut d’expiration : mentionne les ressources en fonction de leur durée d’expiration. Vous pouvez cocher la case Expired pour filtrer les ressources expirées ou définir la Expiration Duration d’une ressource pour afficher les ressources en fonction de leur durée d’expiration. Lorsqu’une ressource a expiré ou est sur le point d’expirer, un badge s’affiche pour vous informer. De plus, vous pouvez contrôler si vous souhaitez autoriser l’utilisation (ou le glisser-déposer) d’une ressource expirée. Pour en savoir plus sur la personnalisation des ressources expirées. Par défaut, le badge Va bientôt expirer s’affiche pour les ressources qui expirent dans les 30 prochains jours. Cependant, vous pouvez configurer l’expiration à l’aide de la propriété expirationDate.

    note tip
    TIP
    Si vous souhaitez afficher ou filtrer les ressources en fonction de leur date d’expiration, mentionnez la période dans le champ Expiration Duration. Il affiche les ressources qui comportent le badge Va bientôt expirer.
  • Type MIME : comprend JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX.

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

    rail-view-example

Recherche personnalisée

Outre la recherche en 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 en 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 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 types-of-view

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 à faire défiler dans une seule colonne.
  • vue grille  : la vue Grille affiche les fichiers et dossiers à faire défiler dans une grille de lignes et de colonnes.
  • vue galerie  : la vue Galerie affiche les fichiers ou les dossiers dans une liste horizontale verrouillée au milieu.
  • vue cascade  : la vue Cascade affiche les fichiers ou les dossiers sous la forme d’un pont.

Graphique de vue d’ensemble

En savoir plus sur les principales fonctionnalités key-capabilities-asset-selector

Intégration du sélecteur de ressources – Graphique {width="70px"}
Intégration du sélecteur de ressources

Découvrez les différentes fonctionnalités permettant d’intégrer le sélecteur de ressources à plusieurs applications.

Intégration du sélecteur de ressources à des applications d’Adobe – Graphique {width="70px"}
Intégration du sélecteur de ressources à des applications Adobe

Découvrez comment intégrer le sélecteur de ressources à diverses applications Adobe.

Intégration du sélecteur de ressources – Graphique {width="70px"}
Intégration du sélecteur de ressources à des applications tierces

Augmentez les possibilités permettant d’intégrer le sélecteur de ressources à des applications autres qu’Adobe.

Intégration du sélecteur de ressources – Graphique {width="70px"}
Intégration du sélecteur de ressources aux API Dynamic Media OpenAPI

Découvrez comment intégrer le sélecteur de ressources aux API Dynamic Media OpenAPI.

Propriétés du sélecteur de ressources – Graphique {width="70px"}
Propriétés du sélecteur de ressources

Découvrez les principes de base de la personnalisation de composants du sélecteur de ressources, tels que les filtres, la sélection de ressources, les ressources expirées, etc.

Exemples du sélecteur de ressources – Graphique {width="70px"}
Exemples du sélecteur de ressources

Utilisez les propriétés de manière pratique.

Personnalisation du sélecteur de ressources – Graphique {width="70px"}
Personnalisation du sélecteur de ressources

Configurez et personnalisez des composants du sélecteur de ressources en fonction de votre usage.

Chargement dans le sélecteur de ressources – Graphique {width="70px"}
Chargement dans le sélecteur de ressources

Découvrez comment charger des fichiers ou des dossiers dans le sélecteur de ressources à partir de votre système de fichiers local ou tiers.

Collections du sélecteur de ressources – Graphique {width="70px"}
Collections du sélecteur de ressources

Découvrez comment utiliser des collections dans le sélecteur de ressources à l’aide du référentiel Experience Manager.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab