Extensión de la barra de acciones

Extensión de la barra de acciones

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:

  • Invocación de un proceso empresarial o flujo de trabajo en los fragmentos de contenido seleccionados.
  • Actualizar o cambiar los datos de los fragmentos de contenido seleccionados.

Registro de extensiones

ExtensionRegistration.js es el punto de entrada de la extensión de AEM y define:

  1. El tipo de extensión; en el caso de un botón de barra de acciones.
  2. La definición del botón de extensión, en getButton() función.
  3. El controlador de clic del botón, en la secció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)

Modal

AEM las extensiones de la barra de acciones de la consola de fragmentos de contenido pueden requerir:

  • Entrada adicional del usuario para realizar la acción deseada.
  • La capacidad de proporcionar al usuario información detallada sobre el resultado de la acción.

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.

Sin modal

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:

  • Invocación de un proceso back-end que no requiera la entrada del usuario, como importar o exportar.

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

En esta página