헤더 메뉴 확장

헤더 메뉴를 포함하는 확장은 다음 경우에 표시되는 AEM 컨텐츠 조각 콘솔의 헤더에 단추를 도입합니다. 아니요 컨텐츠 조각이 선택됩니다. 헤더 메뉴 확장 단추는 컨텐츠 조각을 선택하지 않은 경우에만 표시되므로 일반적으로 기존 컨텐츠 조각에 영향을 주지 않습니다. 대신, 헤더 메뉴 확장은 일반적으로 다음과 같습니다.

• 컨텐츠 참조를 통해 연결된 컨텐츠 조각 세트를 만드는 것과 같은 사용자 지정 로직을 사용하여 새 컨텐츠 조각을 만듭니다.
• 지난 주에 만들어진 모든 컨텐츠 조각 내보내기와 같이 프로그래밍 방식으로 선택한 컨텐츠 조각 세트에 따라 작동합니다.

확장 등록

ExtensionRegistration.js 는 AEM 확장의 시작 지점이며 다음을 정의합니다.

1. 확장 유형; 이 경우 머리글 메뉴 버튼을 클릭합니다.
2. 확장 버튼의 정의(에서) getButton() 함수 위에 있어야 합니다.
3. 단추의 클릭 처리기입니다. onClick() 함수 위에 있어야 합니다.

• ./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js

function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId, // Must be unique
      methods: {
        // Configure your Header Menu button here
        headerMenu: {
          getButton() {
            return {
              'id': 'example.my-header-menu-button',    // Unique ID for the button
              'label': 'My header menu button',         // Button label
              'icon': 'Bookmark'                        // Button icon; get name from: https://spectrum.adobe.com/page/icons/ (Remove spaces, keep uppercase)
            }
          },

          // Click handler for the Header Menu extension button
          onClick() {
            // Header Menu buttons are not associated with selected Content Fragment, and thus are not provided a selection parameter.
            // Do work like importing data from a well known location, or exporting a welll known set of data
            doWork();
          },
        }
      }
    }
  }
  init().catch(console.error);
}

양식

AEM 컨텐츠 조각 콘솔 헤더 메뉴 확장에는 다음이 필요할 수 있습니다.

• 원하는 작업을 수행할 사용자의 추가 입력.
• 작업 결과에 대한 세부 정보를 사용자에게 제공하는 기능.

이러한 요구 사항을 지원하기 위해 AEM 컨텐츠 조각 콘솔 확장을 사용하면 React 애플리케이션으로 렌더링되는 사용자 지정 모달을 사용할 수 있습니다.

• ./src/aem-cf-console-admin-1/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#/content-fragment/my-extension";

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

모달 없음

간혹 AEM 컨텐츠 조각 콘솔 헤더 메뉴 확장 기능을 사용할 때 사용자와의 추가적인 상호 작용이 필요하지 않습니다. 예:

• 가져오기 또는 내보내기와 같이 사용자 입력이 필요하지 않은 백엔드 프로세스를 호출하는 중입니다.
• 컨텐츠 지침에 대한 내부 설명서와 같은 새 웹 페이지 열기

이러한 경우 AEM 컨텐츠 조각 콘솔 확장에는 모달및 은 헤더 메뉴 단추의 onClick 핸들러.

AEM 컨텐츠 조각 콘솔 확장을 사용하면 진행 표시기가 작업이 수행되는 동안 AEM 컨텐츠 조각 콘솔을 오버레이하여 사용자가 추가 작업을 수행하지 못하도록 할 수 있습니다. 진행률 표시기의 사용은 선택 사항이지만, 동기 작업의 진행 상황을 사용자에게 전달하는 데 유용합니다.

• ./src/aem-cf-console-admin-1/web-src/src/components/ExtensionRegistration.js

function ExtensionRegistration() {
  guestConnection: { ...
    methods: { ...
      headerMenu: { ...
        onClick() {
          // Optionally, show the progress indicator overlay on the AEM Content Fragment console
          guestConnection.host.progressCircle.start();
          // Perform work on the selected Content Fragments
          doWork();
          // Hide the progress indicator overlay on the AEM Content Fragment console when the work is done
          guestConnection.host.progressCircle.stop();
        }
      }
    }
  }
}

Business.Adobe.com 리소스