Mikrofrontsväljare för mediefiler Overview

Micro-Frontend Asset Selector har ett användargränssnitt som enkelt kan integreras med Experience Manager Assets as a Cloud Service -databas så att du kan bläddra bland eller söka efter digitala resurser som är tillgängliga i databasen och använda dem när du redigerar program.

Användargränssnittet Micro-FrontEnd är tillgängligt i ditt program med hjälp av paketet Resursväljare. Alla uppdateringar av paketet importeras automatiskt och den senaste distribuerade resursväljaren läses in automatiskt i programmet.

Resursväljaren har många fördelar, till exempel:

Artikelns omfattning är att visa hur du använder resursväljaren med en Adobe program under Unified Shell eller när du redan har en imsToken genererad för autentisering. Dessa arbetsflöden kallas icke-SUSI-flöde i den här artikeln.

Utför följande uppgifter för att integrera och använda resursväljaren med Experience Manager Assets as a Cloud Service databas:

Integrera resursväljare med Vanilla JS integration-with-vanilla-js

Du kan integrera alla Adobe eller program som inte är Adobe med Experience Manager Assets som Cloud Service arkivera och välja resurser inifrån programmet.

Integreringen görs genom att importera resursväljarpaketet och ansluta till Assets-as a Cloud Service med hjälp av Vanilla JavaScript-biblioteket. Du måste redigera en index.html eller en lämplig fil i programmet till -

Du kan utföra autentisering utan att definiera några IMS-egenskaper om:

Förutsättningar prerequisites

Definiera förutsättningarna i index.html -filen eller en liknande fil i programimplementeringen för att definiera autentiseringsinformationen för att komma åt Experience Manager Assets som Cloud Service databas. Förutsättningarna är följande:

Installation installation

Resursväljare är tillgängliga via både ESM CDN (till exempel esm.sh/skypning) och UMD version.

I webbläsare som använder UMD-version (rekommenderas):

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

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

I webbläsare med import maps support med ESM CDN-version:

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

I Deno/Webpack Module Federation med ESM CDN-version:

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

Markerad resurstyp selected-asset-type

Den valda resurstypen är en array med objekt som innehåller resursinformationen när resursen används handleSelection, handleAssetSelectionoch onDrop funktioner.

Schemasyntax

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;
        }>;
    };
}

I följande tabell beskrivs några av de viktiga egenskaperna för det valda resursobjektet.

En fullständig lista över egenskaper och detaljerade exempel finns på Exempel på resursväljarkod.

Exempel på icke-SUSI-flöde non-susi-vanilla

I det här exemplet visas hur du använder resursväljaren med ett icke-SUSI-flöde när du kör ett Adobe program under Unified Shell eller när du redan har imsToken genereras för autentisering.

Inkludera paketet Resursväljare i koden med script -tagg, som i raderna 6-15 i exemplet nedan. När skriptet har lästs in visas PureJSSelectors global variabel är tillgänglig för användning. Definiera resursväljaren egenskaper som visas i raderna 16-23. The imsOrg och imsToken båda egenskaperna krävs för autentisering i icke-SUSI-flöden. The handleSelection -egenskapen används för att hantera de valda resurserna. Om du vill återge resursväljaren anropar du renderAssetSelector funktionen enligt rad 17. Resursväljaren visas i <div> behållarelement, som visas i raderna 21 och 22.

Följ de här stegen för att använda resursväljaren med ett icke-SUSI-flöde i Adobe program.

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

Detaljerade exempel finns på Exempel på resursväljarkod.

Använd egenskaper för resursväljare asset-selector-properties

Du kan använda egenskaperna för resursväljaren för att anpassa hur resursväljaren återges. I följande tabell visas de egenskaper som du kan använda för att anpassa och använda resursväljaren.

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

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

Exempel på hur du använder egenskaper för resursväljare usage-examples

Du kan definiera resursväljaren egenskaper i index.html om du vill anpassa visningen av resursväljaren i programmet.

Exempel 1: Resursväljaren i vyn Räler

Om värdet för AssetSelector rail är inställd på false eller inte omnämns i egenskaperna visas resursväljaren som standard i den modulala vyn.

Exempel 2: Metadatapuposer

Använd olika egenskaper för att definiera metadata för en resurs som du vill visa med hjälp av en informationsikon. Info pover innehåller information om resursen eller mappen, inklusive namn, dimensioner, ändringsdatum, plats och beskrivning av en resurs. I exemplet nedan används olika egenskaper för att visa metadata för en resurs, till exempel repo:path -egenskapen anger platsen för en resurs.

Exempel 3: Egen filteregenskap i skenvy

Förutom den facetterade sökningen kan du med Resursväljaren anpassa olika attribut för att begränsa sökningen från Adobe Experience Manager som Cloud Service program. Du måste lägga till följande kod för att lägga till anpassade sökfilter i programmet. I exemplet nedan är Type Filter sökning som filtrerar resurstypen bland bilder, dokument eller videoklipp eller den filtertyp som du har lagt till för sökningen.

Hantera urval av resurser med objektschema handling-selection

The handleSelection -egenskapen används för att hantera ett eller flera urval av resurser i Resursväljaren. I exemplet nedan anges syntaxen för användning av handleSelection.

Använda resursväljare using-asset-selector

När resursväljaren har konfigurerats och du autentiserats för att använda resursväljaren med Adobe Experience Manager som Cloud Service kan du välja resurser eller utföra olika åtgärder för att söka efter dina resurser i databasen.

Visa/dölj panelen hide-show-panel

Om du vill dölja mappar i den vänstra navigeringen klickar du på Hide folders -ikon. Om du vill ångra ändringarna klickar du på Hide folders ikonen igen.

Databasväxlare repository-switcher

Med Resursväljaren kan du också växla databaser för val av resurser. Du kan välja vilken databas du vill använda i listrutan som finns i den vänstra panelen. De databasalternativ som är tillgängliga i listrutan baseras på repositoryId egenskap som definieras i index.html -fil. Den baseras på miljöer från den valda IMS-organisationen som den inloggade användaren har åtkomst till. Konsumenterna kan välja repositoryID och i så fall slutar resursväljaren återge repomkopplaren och återger resurser endast från den angivna databasen.

Resurskatalog

Det är en samling resursmappar som du kan använda för att utföra åtgärder.

Färdiga filter filters

Resursväljaren innehåller även färdiga filteralternativ som kan förfina sökresultaten. Följande filter är tillgängliga:

Anpassad sökning

Förutom textsökningen kan du med Resursväljaren söka efter resurser i filer med hjälp av anpassad sökning. Du kan använda anpassade sökfilter både i den modulala vyn och i vyn Rail.

Du kan också skapa standardsökfilter för att spara de fält som du ofta söker efter och använda dem senare. Om du vill skapa en anpassad sökning efter dina resurser kan du använda filterSchema -egenskap.

Sökfältet search-bar

Med Resursväljaren kan du utföra fullständig textsökning av resurser i den valda databasen. Om du till exempel skriver nyckelordet wave i sökfältet, alla resurser som har wave nyckelord som nämns i någon av metadataegenskaperna visas.

Sortering sorting

Du kan sortera resurser i Resursväljaren efter namn, dimensioner eller storlek för en resurs. Du kan också sortera resurserna i stigande eller fallande ordning.

Typer av vy types-of-view

Med Resursväljaren kan du visa resursen i fyra olika vyer: