操作栏扩展

操作栏扩展

包含操作栏的扩展,在AEM内容片段控制台的操作中引入一个按钮,该按钮在 1个或更多 已选择内容片段。 由于操作栏扩展按钮仅在至少选择了一个内容片段时才显示,因此它们通常会对选定的内容片段进行操作。 示例包括:

  • 对所选内容片段调用业务流程或工作流。
  • 更新或更改所选内容片段的数据。

扩展注册

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,
      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内容片段控制台操作栏扩展可能需要:

  • 用户执行所需操作的其他输入。
  • 能够提供用户有关操作结果的详细信息。

为了支持这些要求,AEM内容片段控制台扩展允许自定义模式以作为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
    })
  } ...
} ...

跳到创建模式窗口

了解如何创建在单击操作栏扩展按钮时显示的模式。

无模式

有时,AEM内容片段控制台操作栏扩展不需要与用户进行进一步的交互,例如:

  • 调用不需要用户输入的后端进程,如导入或导出。

在这些情况下,AEM内容片段控制台扩展不需要 模态,并直接在操作栏按钮的 onClick 处理程序。

AEM内容片段控制台扩展允许使用进度指示器在执行工作时覆盖AEM内容片段控制台,从而阻止用户执行其他操作。 使用进度指示器是可选的,但对于将同步工作的进度告知用户非常有用。

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

在此页面上