Anpassningar av resursväljare asset-selector-customization
Med Resursväljaren kan du anpassa olika komponenter efter inställningar, krav eller funktionella behov. Du kan anpassa följande komponenter: Micro-Frontend Asset Selector:
Du måste definiera förutsättningarna i filen index.html eller en liknande fil i programimplementeringen för att definiera autentiseringsinformationen för att få åtkomst till databasen Experience Manager Assets. När du är klar kan du lägga till kodfragment efter dina behov.
Anpassa filterpanelen customize-filter-panel
Du kan lägga till följande kodfragment i objektet assetSelectorProps för att anpassa filterpanelen:
filterSchema: [
{
header: 'File Type',
groupKey: 'TopGroup',
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{
label: 'Images',
value: '<comma separated mimetypes, without space, that denote all images, for e.g., image/>',
},
{
label: 'Videos',
value: '<comma separated mimetypes, without space, that denote all videos for e.g., video/,model/vnd.mts,application/mxf>'
}
]
}
]
},
{
fields: [
{
element: 'checkbox',
name: 'type',
options: [
{ label: 'JPG', value: 'image/jpeg' },
{ label: 'PNG', value: 'image/png' },
{ label: 'TIFF', value: 'image/tiff' },
{ label: 'GIF', value: 'image/gif' },
{ label: 'MP4', value: 'video/mp4' }
],
columns: 3,
},
],
header: 'Mime Types',
groupKey: 'MimeTypeGroup',
},
{
fields: [
{
element: 'checkbox',
name: 'property=metadata.application.xcm:keywords.value',
options: [
{ label: 'Fruits', value: 'fruits' },
{ label: 'Vegetables', value: 'vegetables'}
],
columns: 3,
},
],
header: 'Food Category',
groupKey: 'FoodCategoryGroup',
}
],
Anpassa information i modal vy customize-info-in-modal-view
Du kan anpassa informationsvyn för en resurs genom att klicka på ikonen
// Create an object infoPopoverMap and set the property `infoPopoverMap` with it in assetSelectorProps
const infoPopoverMap = (map) => {
// for example, to skip `path` from the info popover view
let defaultPopoverData = PureJSSelectors.getDefaultInfoPopoverData(map);
return defaultPopoverData.filter((i) => i.label !== 'Path')
};
assetSelectorProps.infoPopoverMap = infoPopoverMap;
Aktivera eller inaktivera dra och släpp-läge enable-disable-drag-and-drop
Lägg till följande egenskaper i assetSelectorProp för att aktivera dra och släpp-läget. Om du vill inaktivera dra och släpp ersätter du parametern true med false.
rail: true,
acvConfig: {
dragOptions: {
allowList: {
'*': true,
},
},
selectionType: 'multiple'
}
// the drop handler to be implemented
function drop(e) {
e.preventDefault();
// following helps you get the selected assets – an array of objects.
const data = JSON.parse(e.dataTransfer.getData('collectionviewdata'));
}
Val av Assets selection-of-assets
Vald tillgångstyp är en matris med objekt som innehåller tillgångsinformation när du använder handleSelectionfunktionerna , handleAssetSelectionoch onDrop .
Utför följande steg för att konfigurera valet av en eller flera tillgångar:
acvConfig: {
selectionType: 'multiple' // 'single' for single selection
}
// the `handleSelection` callback, always gets you the array of selected assets
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: {
'https://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 tillgångsobjektet.
Array<string>Record<string, any>Record<string, any>_links.<https://ns.adobe.com/adobecloud/rel/rendition>Array<Object>_links.<https://ns.adobe.com/adobecloud/rel/rendition[].href>_links.<https://ns.adobe.com/adobecloud/rel/rendition[].type>_links.<https://ns.adobe.com/adobecloud/rel/rendition[].repo:size>_links.<https://ns.adobe.com/adobecloud/rel/rendition[].width>_links.<https://ns.adobe.com/adobecloud/rel/rendition[].height>Hantera urval av Assets med objektschema handling-selection
Egenskapen handleSelection används för att hantera enstaka eller flera markeringar av Assets i Assets Selector. I exemplet nedan anges syntaxen för användning av handleSelection.
Inaktivera val av Assets disable-selection
Inaktivera markering används för att dölja eller inaktivera att resurser eller mappar kan markeras. Den döljer kryssrutan välj från kortet eller resursen som inte gör att den markeras. Om du vill använda den här funktionen kan du deklarera positionen för en resurs eller mapp som du vill inaktivera i en array. Om du till exempel vill inaktivera valet av en mapp som visas vid den första positionen kan du lägga till följande kod:disableSelection: [0]:folder
Du kan förse arrayen med en lista med MIME-typer (till exempel bild, mapp, fil eller andra MIME-typer, till exempel image/jpeg) som du vill inaktivera. Mime-typerna som du deklarerar mappas till attributen data-card-type och data-card-mimetype för en resurs.
Dessutom kan Assets med inaktiverad markering dras. Om du vill inaktivera dra och släpp av en viss resurstyp kan du använda egenskapen dragOptions.allowList.
Syntaxen för inaktiverad markering är följande:
(args)=> {
return(
<ASDialogWrapper
{...args}
disableSelection={args.disableSelection}
handleAssetSelection={action('handleAssetSelection')}
handleSelection={action('handleSelection')}
selectionType={args.selectionType}
/>
);
}
Anpassa utgångna resurser customize-expired-assets
Med resursväljaren kan du styra användningen av en resurs som har upphört att gälla. Du kan anpassa den utgångna tillgången med ett märke som upphör att gälla snart som kan hjälpa dig att veta i förväg om de tillgångar som kommer att upphöra att gälla inom 30 dagar från det aktuella datumet. Dessutom kan detta anpassas enligt kravet. Du kan också tillåta att en resurs som har upphört att gälla på arbetsytan eller tvärtom. Anpassningen av en utgången tillgång kan göras med hjälp av vissa kodfragment på olika sätt:
expiryOptions: {
getExpiryStatus: getExpiryStatus;
}
Val av utgången tillgång selection-of-expired-asset
Du kan anpassa användningen av en resurs som har gått ut så att den antingen kan markeras eller inte kan markeras. Du kan anpassa om du vill tillåta att en resurs dras och släpps på arbetsytan Resursväljaren eller inte. Det gör du genom att använda följande parametrar för att göra en resurs ovalbar på arbetsytan:
expiryOptions:{
allowSelectionAndDrop: false;
}
Ange varaktighet för en resurs som har upphört att gälla set-duration-of-expired-asset
Följande kodfragment hjälper dig att ange märket Upphör snart att gälla för de tillgångar som upphör att gälla inom de närmaste fem dagarna:
/**
const getExpiryStatus = async (asset) => {
if (!asset.expirationDate) {
return null;
}
const currentDate = new Date();
const millisecondsInDay = 1000 * 60 * 60 * 24;
const fiveDaysFromNow = new Date(value: currentDate.getTime() + 5 * millisecondsInDay);
const expirationDate = new Date(asset.expirationDate);
if (expirationDate.getTime() < currentDate.getTime()) {
return 'EXPIRED';
} else if (expirationDate.getTime() < fiveDaysFromNow.getTime()) {
return 'EXPIRING_SOON';
} else {
return 'NOT_EXPIRED';
}
};
Se följande exempel för att förstå hur egenskapen fungerar för att hämta aktuellt datum och tid:
const currentData = new Date();
currentData.getTime(),
returnerar 1718779013959 enligt datumformatet 2024-06-19T06:36:53.959Z.
Anpassa popup-meddelande för en utgången resurs customize-toast-message
Egenskapen showToast används för att anpassa popup-meddelandet som du vill visa för en resurs som har gått ut.
Syntax:
{
type: 'ERROR', 'NEUTRAL', 'INFO', 'SUCCESS',
message: '<message to be shown>',
timeout: optional,
}
Standardtidsgränsen är 500 millisekunder. Du kan ändra den efter behov. Om du skickar värdet timeout: 0 hålls dessutom rostat bröd öppet tills du klickar på kryssknappen.
Nedan visas ett exempel på hur du visar ett popup-meddelande när det krävs att du inte väljer en mapp och visar ett motsvarande meddelande:
const showToast = {
type: 'ERROR',
message: 'Folder cannot be selected',
timeout: 5000,
}
Använd följande kodfragment för att visa popup-meddelande för användningen av en utgången tillgång:
(args) => {
const [selectedAssets, setSelectedAssets] = useState([]);
const [showToast, setShowToast] = React.useState(false);
const handleAssetSelection = (assets) => {
let directorySelectedFlag = false;
const temp = assets.filter((asset) => {
if (asset['repo:assetClass'] === 'directory') {
directorySelectedFlag = true;
setShowToast(true);
}
return !(asset['repo:assetClass'] === 'directory');
});
if (!directorySelectedFlag) {
setShowToast(false);
}
setSelectedAssets(temp);
};
return (
<ASDialogWrapper
{...args}
showToast={showToast ? args.showToast : null}
selectedAssets={selectedAssets}
handleAssetSelection={handleAssetSelection}
/>
);
}
Kontextuellt anropsfilter contextual-invocation-filter
Med resursväljaren kan du lägga till ett taggväljarfilter. Den har stöd för en tagggrupp som kombinerar alla relevanta taggar till en viss tagggrupp. Dessutom kan du välja ytterligare taggar som motsvarar den resurs du söker efter. Dessutom kan du ange standardtagggrupper under det kontextuella anropsfiltret som du använder mest så att de är tillgängliga oavsett var du är.
- Du måste lägga till sammanhangsberoende kodfragment för att kunna aktivera taggningsfilter i sökningen.
- Det är obligatoriskt att använda namnegenskapen som motsvarar tagggruppstypen
(property=xcm:keywords.id=).
Syntax:
const filterSchema=useMemo(() => {
return: [
{
element: 'taggroup',
name: 'property=xcm:keywords.id='
},
];
}, []);
Om du vill lägga till tagggrupper på filterpanelen måste du lägga till minst en tagggrupp som standard. Använd dessutom kodfragmentet nedan för att lägga till de standardtaggar som är förmarkerade från tagggruppen.
export const WithAssetTags = (props) = {
const [selectedTags, setSelectedTags] = useState (
new Set(['orientation', 'color', 'facebook', 'experience-fragments:', 'dam', 'monochrome'])
const handleSelectTags = (selected) => {
setSelectedTags (new Set (selected)) ;
};
const filterSchema = useMemo ((); => {
return {
schema: [
｛
fields: [
{
element: 'checkbox',
name: 'property=xcm:keywords=',
defaultValue: Array. from(selectedTags),
options: assetTags,
orientation: 'vertical',
},
],
header: 'Asset Tags',
groupkey: 'AssetTagsGroup',
],
},
｝；
}, [selectedTags]);
Överför i resursväljaren upload-in-asset-selector
Du kan överföra filer eller mappar till resursväljaren från det lokala filsystemet. Om du vill överföra filer med det lokala filsystemet behöver du i allmänhet använda en överföringsfunktion från ett front-end-program för resursväljare. Olika kodfragment som krävs för att anropa överföring i resursväljaren är:
Grundläggande överföringsformulär basic-upload
import { AllInOneUpload } from '@assets/upload';
import { TextField, ContextualHelp } from '@adobe/react-spectrum';
const repoId = 'author-p52554-e145207-cmstg.adobeaemcloud.com'
const apiToken = 'eyJhbG....';
const targetUploadPath = '/content/dam/hydrated-assets/cq/as/cq-assets-upload-storybook-testing';
export const UploadExample = () => {
return (
<>
<TextField
marginStart="size-200"
width="size-6000"
isDisabled={true}
label="Target Upload Path"
value={targetUploadPath}
contextualHelp={
<ContextualHelp>
<Content>Use Storybook Controls panel to change the default upload location</Content>
</ContextualHelp>
}
/>
<AllInOneUpload
repositoryId={repoId}
apiToken={apiToken}
targetUploadPath={targetUploadPath}
/>
<>
)
}
Överför med metadata upload-with-metadata
import { AllInOneUpload } from '@assets/upload';
const repoId = 'author-p52554-e145207-cmstg.adobeaemcloud.com'
const apiToken = 'eyJhbG....';
const targetUploadPath = '/content/dam/hydrated-assets/cq/as/cq-assets-upload-storybook-testing';
/**
* see https://git.corp.adobe.com/CQ/assets-upload/blob/main/packages/@assets/upload/stories/data/SampleMetadataSchemas.ts
* for full schema shape used in rendered example below
*/
const metadataSchema = [
{
mapToProperty: 'gmo:lineofBusiness',
label: 'Line of Business',
placeholder: 'Select one',
required: true,
element: 'dropdown',
dropdownOptions: [
{
id: 'corporate',
name: 'Corporate',
},
{
id: 'digital-media-dme',
name: 'Digital Media (DMe)',
},
{
id: 'digital-experience-dx',
name: 'Digital Experience (DX)',
},
{
id: 'business-solutions',
name: 'Business Solutions',
},
],
},
// ... see link above for full schema
{
mapToProperty: 'dam:assetStatus',
value: 'approved',
// hidden metadata element, this metadata will be applied to the asset without rendering UI for user input
element: 'hidden',
},
];
const handleMetadataFormChange = (event: MetadataChangeEvent) => {
const { property, value } = event;
console.log({ property, value });
}
const UploadExampleWithMetadataForm = () => {
return (
<AllInOneUpload
repositoryId={repoId}
apiToken={apiToken}
targetUploadPath={targetUploadPath}
metadataSchema={sampleMetadataSchema}
onMetadataFormChange={handleMetadataFormChange}
/>
)
}
Anpassad överföring customized-upload
const MultipleAllInOneUploadExample = () => {
const mfeRef = React.useRef<{ iframeRef: { current: HTMLIFrameElement } }>(null);
return (
<>
<Button
onPress={() => UploadCoordinator.initiateUpload(mfeRef.current?.iframeRef?.current)}
>
External Initiate Upload
</Button>
<AllInOneUpload
{...otherProps}
ref={mfeRef}
/>
<>
);
}
Överför med tredjepartskällor upload-using-third-party-source
import { useState, useRef } from 'react';
import { AllInOneUpload, UploadCoordinator } from '@assets/upload';
import { Button, Flex, Divider } from '@adobe/react-spectrum';
import { sampleMetadataSchema } from './SampleMetadataSchemas';
const repoId = 'author-p52554-e145207-cmstg.adobeaemcloud.com'
const apiToken = 'eyJhbG....';
const targetUploadPath = '/content/dam/hydrated-assets/cq/as/cq-assets-upload-storybook-testing';
const defaultFiles = [
new File(['file-content'], 'Controlled File 1'),
new File(['file-content-with-more'], 'Controlled File 2')
];
const ControlledUploadExample = () => {
const [controlledFiles, setControlledFiles] = useState<File[]>(defaultFiles)
const inputRef = React.useRef<HTMLInputElement>(null);
const handleFileInputChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
if (e.target.files) {
setMyFiles([...e.target.files]);
}
}, []);
return (
<Flex height="100%" alignItems="center" direction="column">
<Flex direction="row" alignItems="center" justifyContent="center">
<Button
variant="accent"
onPress={() => UploadCoordinator.initiateUpload()}
isDisabled={files.length < 1}
>
External Initiate Upload
</Button>
<Button
variant="secondary"
onPress={() => {
inputRef.current?.click();
}}
>
External Browse files
</Button>
</Flex>
<Divider size="M" marginTop="size-200" />
<AllInOneUpload
repositoryId={repoId}
apiToken={apiToken}
targetUploadPath={targetUploadPath}
files={controlledFiles}
onFilesChange={setControlledFiles}
hideUploadButton={true}
metadataSchema={sampleMetadataSchema}
/>
<input
ref={inputRef}
type="file"
style={{ display: 'none' }}
onChange={handleFileInputChange}
multiple={true}
/>
</Flex>
)
}
dragOptions, egenskap drag-options-property
dragOptions: {
allowList: {
'*': true, // allow all types to be dragged
'folder': false, // except those explicitly set to disallow
'image/jpeg': false // or those with specific mimeTypes
},
}