Extensiones que incluyen una barra de acciones, introduzca un botón en la acción de la Consola de fragmentos de contenido de AEM que se muestra al 1 o más Los fragmentos de contenido están seleccionados. Debido a que los botones de extensión de la barra de acciones solo se muestran cuando se selecciona al menos un fragmento de contenido, normalmente actúan sobre los fragmentos de contenido seleccionados. Algunos ejemplos son:
ExtensionRegistration.js
es el punto de entrada de la extensión de AEM y define:
getButton()
función.onClick()
función../src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js
function ExtensionRegistration() {
const init = async () => {
const guestConnection = await register({
id: extensionId,
methods: {
// Configure your Action Bar button here
actionBar: {
getButton() {
return {
'id': 'example.my-action-bar-button', // Unique ID for the button
'label': 'My action bar button', // Button label
'icon': 'Edit' // Button icon; get name from: https://spectrum.adobe.com/page/icons/ (Remove spaces, keep uppercase)
}
},
// Click handler for the Action Bar extension button
onClick(selections) {
// Action Bar buttons require the selection of at least 1 Content Fragment,
// so we can assume the extension will do something with these selections
// Collect the selected content fragment paths from the selections parameter
const selectionIds = selections.map(selection => selection.id);
// Do some work with the selected content fragments
doWork(selectionIds);
}
}
})
}
init().catch(console.error)
AEM las extensiones de la barra de acciones de la consola de fragmentos de contenido pueden requerir:
Para satisfacer estos requisitos, la extensión de la consola de fragmentos de contenido de AEM permite un modal personalizado que se procesa como una aplicación React.
./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js
function ExtensionRegistration() {
...
onClick(selections) {
// Collect the selected content fragment paths
const contentFragmentPaths = selections.map(selection => selection.id);
// Create a URL that maps to the React route to be rendered in the modal
const modalURL = "/index.html#" + generatePath(
"/content-fragment/:selection/my-extension",
{
// Set the :selection React route parameter to an encoded, delimited list of paths of the selected content fragments
selection: encodeURIComponent(contentFragmentPaths.join('|'))
}
);
// Open the modal and display the React route created above
guestConnection.host.modal.showUrl({
title: "My modal title",
url: modalURL
})
} ...
} ...
Pasar a la creación de un modal
Aprenda a crear un modal que se muestre al hacer clic en el botón de extensión de la barra de acciones.
En ocasiones, AEM extensiones de la barra de acciones de la consola de fragmentos de contenido no requieren más interacción con el usuario, por ejemplo:
En estos casos, la extensión de la consola Fragmento de contenido de AEM no requiere una modaly realice el trabajo directamente en el botón de barra de acciones onClick
controlador.
La extensión de la consola Fragmento de contenido de AEM permite que un indicador de progreso superponga la consola Fragmento de contenido de AEM mientras se realiza el trabajo, lo que impide que el usuario realice más acciones. El uso del indicador de progreso es opcional, pero útil para comunicar al usuario el progreso del trabajo sincrónico.
./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js
function ExtensionRegistration() {
guestConnection: { ...
methods: { ...
actionBar: { ...
onClick(selections) {
// Collect the selected content fragment paths
const contentFragmentPaths = selections.map(selection => selection.id);
// Optionally, show the progress indicator overlay on the AEM Content Fragment console
guestConnection.host.progressCircle.start();
// Perform work on the selected Content Fragments
doWork(contentFragmentPaths);
// Hide the progress indicator overlay on the AEM Content Fragment console when the work is done
guestConnection.host.progressCircle.stop();
}
}
}
}
}