Micro-Frontend element selecteren Overview

Micro-Frontend Asset Selector biedt een gebruikersinterface die eenvoudig kan worden geïntegreerd met de Experience Manager Assets -opslagplaats, zodat u door de beschikbare digitale middelen in de opslagplaats kunt bladeren of deze kunt zoeken en deze kunt gebruiken in uw ontwerpervaring.

De gebruikersinterface van Micro-Frontend wordt beschikbaar gesteld in uw toepassingservaring gebruikend het pakket van de Selecteur van Activa. Alle updates van het pakket worden automatisch geïmporteerd en de nieuwste versie van Asset Selector wordt automatisch in de toepassing geladen.

Overzicht

Asset Selector biedt vele voordelen, zoals:

  • Versnelling van integratie met om het even welke Adobeof niet-Adobetoepassingen die de bibliotheek van JavaScript Vanilla gebruiken.
  • Eenvoudig te onderhouden, aangezien updates van het Assets Selector-pakket automatisch worden geïmplementeerd op de Asset Selector die beschikbaar is voor uw toepassing. Uw toepassing hoeft geen updates uit te voeren om de laatste wijzigingen te laden.
  • Gemakkelijk aanpassen aangezien er eigenschappen beschikbaar zijn die de vertoning van de Selecteur van Activa binnen uw toepassing controleren.
  • In de volledige tekst doorzoeken, uit-van-de-doos, en aangepaste filters om snel aan activa voor gebruik binnen de auteurservaring te navigeren.
  • Mogelijkheid om binnen een IMS-organisatie te schakelen tussen opslagruimten voor het selecteren van bedrijfsmiddelen.
  • De mogelijkheid om elementen te sorteren op naam, afmetingen en grootte en ze weer te geven in de weergave Lijst, Raster, Galerie of Waterval.

Vereisten prereqs

U moet de volgende communicatiemethoden gebruiken:

  • De toepassing wordt uitgevoerd op HTTPS.
  • De URL van de toepassing bevindt zich in de lijst van gewenste personen van de IMS-client voor het doorsturen van URL's.
  • De IMS-aanmeldstroom wordt geconfigureerd en weergegeven met een pop-up in de webbrowser. Daarom moeten pop-ups worden ingeschakeld of toegestaan in de doelbrowser.

Gebruik de bovenstaande voorwaarden als u de IMS-verificatieworkflow van de Asset Selector nodig hebt. Als u al bent geverifieerd met de IMS-workflow, kunt u in plaats daarvan de IMS-informatie toevoegen.

zie meer

IMPORTANT
Deze opslagplaats is bedoeld als aanvullende documentatie waarin de beschikbare API's en gebruiksvoorbeelden voor de integratie van Asset Selector worden beschreven. Voordat u de functie Asset Selector gaat installeren of gebruiken, moet u controleren of uw organisatie beschikt over de toegang tot Asset Selector als onderdeel van het Experience Manager Assets as a Cloud Service-profiel. Als u niet provisioned bent, kunt u deze componenten niet integreren of gebruiken. Om levering te verzoeken, zou uw programma admin een steunkaartje moeten opheffen dat als P2 van de Admin Console wordt gemerkt en de volgende informatie omvatten:
  • Domeinnamen waarbij de integrerende toepassing wordt gehost.
  • Na provisioning ontvangt uw organisatie imsClientId , imsScope en een redirectUrl die overeenkomen met de gevraagde omgevingen die essentieel zijn voor de configuratie van Asset Selector. Zonder deze geldige eigenschappen kunt u de installatiestappen niet uitvoeren.

Installatie installation

De Selecteur van activa is beschikbaar via zowel ESM CDN (bijvoorbeeld, esm.sh/ kabel) als UMDversie.

In browsers die {versie 0} gebruiken UMD (geadviseerd):

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

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

In browsers met import maps steun gebruikend versie van ESM CDN:

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

In Deno/de Federatie van de Module van het Pakket gebruikend versie van ESM CDN:

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

Elementkiezer gebruiken using-asset-selector

Nadat de Asset Selector is ingesteld en u bent gemachtigd om Asset Selector te gebruiken in uw Adobe Experience Manager -toepassing als Cloud Service -toepassing, kunt u elementen selecteren of verschillende andere bewerkingen uitvoeren om te zoeken naar uw elementen in de opslagplaats.

gebruiken-activa-selecteur

Deelvenster verbergen/tonen hide-show-panel

Als u mappen in de linkernavigatie wilt verbergen, klikt u op het pictogram Hide folders . Als u de wijzigingen ongedaan wilt maken, klikt u nogmaals op het pictogram Hide folders .

Repository-switch repository-switcher

Met Asset Selector kunt u ook schakelen tussen opslagruimten voor middelenselectie. U kunt de opslagplaats van uw keus van drop-down selecteren beschikbaar in het linkerpaneel. De opslagruimteopties in de vervolgkeuzelijst zijn gebaseerd op de eigenschap repositoryId die is gedefinieerd in het index.html -bestand. Het is gebaseerd op de omgeving van de geselecteerde IMS-org die wordt benaderd door de aangemelde gebruiker. Consumenten kunnen een voorkeur repositoryID doorgeven en in dat geval stopt de Asset Selector met het renderen van de repo-switch en renderen van alleen de gegeven opslagplaats.

Assets-opslagplaats

Het is een verzameling mappen met elementen die u kunt gebruiken om bewerkingen uit te voeren.

Buiten-de-box filters filters

De Kiezer van activa verstrekt ook uit-van-de-doos filteropties om uw onderzoeksresultaten te verfijnen. De volgende filters zijn beschikbaar:

  • Status: bevat de huidige status van het element tussen all , approved, rejected of no status .

  • File type: includes folder, file, images, documents of video .

  • Expiration status: verwijst naar de elementen op basis van de vervalduur. U kunt het selectievakje Expired inschakelen om verlopen elementen te filteren, of u kunt Expiration Duration van een element instellen om elementen weer te geven op basis van de vervaldatum. Wanneer een element al is verlopen of bijna is verlopen, lijkt een badge om het zelfde aan te geven. Bovendien kunt u bepalen of u het gebruik (of slepen en neerzetten) van een verlopen element wilt toestaan. Zie meer over verlopen activaaanpassen. Door gebrek, wordt het Verlopen Soon badge getoond voor activa die in de volgende 30 dagen verlopen. U kunt de vervaldatum echter configureren met de eigenschap expirationDate .

    note tip
    TIP
    Als u elementen wilt weergeven of filteren op basis van de vervaldatum in de toekomst, geeft u het datumbereik voor de toekomst op in het veld Expiration Duration . Het toont de activa met die spoedig badge op hen verlopen.
  • MIME type: includes JPG, GIF, PPTX, PNG, MP4, DOCX, TIFF, PDF, XLSX.

  • Image Size: omvat minimum/maximumbreedte, minimum/maximumhoogte van beeld.

    spoorstaaf-mening-voorbeeld

Aangepaste zoekopdracht

Met Asset Selector kunt u naast de zoekopdracht in volledige tekst ook elementen in bestanden zoeken met behulp van een aangepaste zoekopdracht. U kunt aangepaste zoekfilters gebruiken in zowel de modusweergave als de spoorweergave.

douane-onderzoek

U kunt ook een standaardzoekfilter maken om de velden op te slaan waarnaar u vaak zoekt en deze later te gebruiken. Als u een aangepaste zoekopdracht naar uw elementen wilt maken, kunt u de eigenschap filterSchema gebruiken.

Met Asset Selector kunt u een volledige tekstzoekopdracht uitvoeren naar elementen in de geselecteerde opslagplaats. Als u bijvoorbeeld het trefwoord wave in de zoekbalk typt, worden alle elementen met het trefwoord wave dat in een van de metagegevenseigenschappen wordt vermeld, weergegeven.

Sorteren sorting

U kunt elementen in de Asset Selector sorteren op naam, afmetingen of grootte van een element. U kunt de elementen ook in oplopende of aflopende volgorde sorteren.

Weergavetypen types-of-view

Met Asset Selector kunt u het element in vier verschillende weergaven weergeven:

  • lijstmening de lijstmening toont scrollable dossiers en omslagen in één enkele kolom.
  • netmening de netmening toont scrollable dossiers en omslagen in een net van rijen en kolommen.
  • galeriemening de de vertoningendossiers of omslagen van de galeriemening in een centrum-gesloten horizontale lijst.
  • watervalmening De watervalmening toont dossiers of omslagen in de vorm van een Bridge.

Grafische van het Overzicht

Meer informatie over sleutelmogelijkheden key-capabilities-asset-selector

Afbeelding voor middelenkiezer integreren {width="70px"}
integreer de Kiezer van Activa

Leer diverse mogelijkheden om de Selecteur van Activa met veelvoudige toepassingen te integreren.

Asset Selector integreren met grafische Adobe voor toepassingen {width="70px"}
integreer de Selector van Activa met de toepassingen van de Adobe

ontdekt hoe te om de Selecteur van Activa met diverse toepassingen van de Adobe te integreren.

Afbeelding voor middelenkiezer integreren {width="70px"}
integreer de Selector van Activa met derdetoepassingen

dig omhoog de mogelijkheden om de Selector van Activa met niet-Adobe toepassingen te integreren.

Afbeelding voor middelenkiezer integreren {width="70px"}
integreer de Selector van Activa met Dynamic Media Open APIs

Begrijp hoe te om de Selecteur van Activa met Dynamic Media te integreren Open APIs.

Eigenschappen van Asset Selector, afbeelding {width="70px"}
Eigenschappen van de Selecteur van Activa

Leer de grondbeginselen van het aanpassen van diverse componenten van de Selector van Activa, zoals filters, selectie van activa, verlopen activa, en veel meer.

Voorbeelden van Asset Selector {width="70px"}
Voorbeelden van de Selecteur van Activa

begrijp het gebruik van eigenschappen op een praktische manier.

Afbeelding voor middelenkiezer aanpassen {width="70px"}
Aanpassingen van de Selecteur van Activa

vormt en past diverse componenten van de Selecteur van Activa aan die op uw bruikbaarheid worden gebaseerd.

Uploadafbeelding voor middelenkiezer {width="70px"}
de Selecteur van Activa uploadt

Leer hoe u dossiers of omslagen aan de Selecteur van Activa van uw lokaal of derdedossiersysteem kunt uploaden.

Verzamelingen voor middelenkiezer, afbeelding {width="70px"}
Verzamelingen van de Selecteur van Activa

Leer hoe te om inzamelingen binnen de Selector van Activa te gebruiken gebruikend de bewaarplaats van de Experience Manager.

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