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.
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
- 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 uneredirectUrl
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.
- 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 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
ouno status
. -
Type de fichier : comprend
folder
,file
,images
,documents
ouvideo
. -
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 laExpiration 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.
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.
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 search-bar
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 :
- : la vue Liste affiche les fichiers et dossiers à faire défiler dans une seule colonne.
- : la vue Grille affiche les fichiers et dossiers à faire défiler dans une grille de lignes et de colonnes.
- : la vue Galerie affiche les fichiers ou les dossiers dans une liste horizontale verrouillée au milieu.
- : la vue Cascade affiche les fichiers ou les dossiers sous la forme d’un pont.
Graphique de vue d’ensemble