Finestra modale di estensione

Ultimo aggiornamento: 2023-11-30
  • Argomenti:
  • Developer Tools
    Visualizza ulteriori informazioni su questo argomento
  • Creato per:
  • Beginner
    Developer
Estensione modale dell’interfaccia utente AEM

L'estensione modale dell'interfaccia utente AEM consente di collegare un'interfaccia utente personalizzata alle estensioni dell'interfaccia utente AEM.

I moduli sono applicazioni React basate su Spettro di reazionee possono creare qualsiasi interfaccia utente personalizzata richiesta dall’estensione, tra cui:

Route modali

L'esperienza modale è definita dall'estensione App Builder React app definita in web-src cartella. Come per qualsiasi app React, l’esperienza completa è orchestrata utilizzando Percorsi React che rendono Componenti React.

Per generare la vista modale iniziale è necessaria almeno una route. Questa route iniziale viene richiamata in registrazione dell'estensionedi onClick(..) come mostrato di seguito.

  • ./src/aem-ui-extension/web-src/src/components/App.js
import MyModal from './MyModal';
import MyModalResults from './MyModalResults';
...
function App(props) {
  return (
    <Router>
      <ErrorBoundary onError={onError} FallbackComponent={fallbackComponent}>
        <Routes>
          ...
          {/*
            Define the entry route to the modal.

            For modals opened from Action Bar extensions.
            Depending on the extension point, different parameters are passed to the modal.
            This example illustrates a modal for the AEM Content Fragment Console (list view), where typically a :selection parameter is used to pass in the list of selected Content Fragments.
            Where as Header Menu extensions do not use a selection parameter.
           */}
          <Route
            exact path="aem-ui-extension/:selection/my-modal"
            element={<MyModal />}
          />

          {/* Define any other routes the modal may need */}
          <Route
            exact path="aem-ui-extension/my-modal"
            element={<MyOtherModalView />}
          />

        </Routes>
      </ErrorBoundary>
    </Router>
  )
  ...
}

Registrazione dell’estensione

Per aprire un modale, chiama guestConnection.host.modal.showUrl(..) è creato dal di onClick(..) funzione. showUrl(..) viene passato un oggetto JavaScript con chiave/valori:

  • title fornisce all’utente il nome del titolo del modale visualizzato
  • url è l’URL che richiama Percorso di reazione responsabile della visualizzazione iniziale del modale.

È imperativo che url passato a guestConnection.host.modal.showUrl(..) viene risolto per instradare nell'estensione, altrimenti non viene visualizzato nulla nel modale.

  • ./src/aem-ui-extension/web-src/src/components/ExtensionRegistration.js
function ExtensionRegistration() {
  ...
  onClick() {
    // Create a URL that maps to the React route to be rendered in the modal
    const modalURL = "/index.html#/aem-ui-extension/my-modal";

    // Open the modal and display the React route created above
    guestConnection.host.modal.showUrl({
      title: "My modal title",
      url: modalURL
    })
  }
  ...
}...

Componente modale

ciascuna rotta dell'estensione, non è il index percorso, viene mappato su un componente React che può essere rappresentato nella finestra modale dell’estensione.

Un modale può essere composto da un numero qualsiasi di route React, da una semplice modale a una complessa modale a più route.

Di seguito viene illustrata una semplice finestra modale a una route, tuttavia questa visualizzazione modale potrebbe contenere collegamenti React che richiamano altre route o comportamenti.

  • ./src/aem-ui-extension/web-src/src/components/MyModal.js
import React, { useState, useEffect } from 'react'
import { attach } from "@adobe/uix-guest"
import {
  Flex,
  Provider,
  Content,
  defaultTheme,
  Text,
  ButtonGroup,
  Button
} from '@adobe/react-spectrum'
import Spinner from "./Spinner"
import { useParams } from "react-router-dom"
import { extensionId } from "./Constants"

export default function MyModal() {
  // Initial modal views for Action Bar extensions typically pass in the list of selected Content Fragment Paths from ExtensionRegistration.js
  // Get the paths from useParams() and split on delimiter used
  let { selection } = useParams();
  let contentFragmentPaths = selection?.split('|') || [];

  // Asynchronously attach the extension to AEM.
  // Wait or the guestConnection to be set before doing anything in the modal.
  const [guestConnection, setGuestConnection] = useState()

  useEffect(() => {
    (async () => {
      const guestConnection = await attach({ id: extensionId })
      setGuestConnection(guestConnection);
    })()
  }, [])

  if (!guestConnection) {
    // If the guestConnection is not initialized, display a loading spinner
    return <Spinner />
  } else {
    // Else the modal is ready to render!
    return (
        <Provider theme={defaultTheme} colorScheme='light'>
        {/*
            Use the React Spectrum components to render the modal UI.
            Using React Spectrum ensures a consistent, accessible, future-proof look-and-feel and speeds up development.
        */}
            <Content width="100%">
                <Flex width="100%">
                    <Text>
                        This is the contents in the modal!
                        Anything can be created in this return statement!

                        The selected Content Fragments are: { contentFragmentPaths.join(', ') }
                    </Text>
                    {/*
                        Modals must provide their own Close button, by calling: guestConnection.host.modal.close()
                    */}
                    <ButtonGroup align="end">
                        <Button variant="primary" onPress={() => guestConnection.host.modal.close()}>Close</Button>
                    </ButtonGroup>
                </Flex>
            </Content>
        </Provider>
    )
  }
}

Chiudi il modale

Pulsante di chiusura modale dell’estensione dell’interfaccia utente AEM

I moduli devono fornire il proprio stretto controllo. A tale scopo, richiama guestConnection.host.modal.close().

<ButtonGroup align="end">
    <Button variant="primary" onPress={() => guestConnection.host.modal.close()}>Close</Button>
</ButtonGroup>

In questa pagina