Aangepaste rasterkolommen

Laatst bijgewerkt: 24 maart 2025

Gemaakt voor:

  • Beginner
  • Ontwikkelaar

de kolom van het het douaneraster van de Console van het Fragment van de Inhoud

U kunt aangepaste rasterkolommen toevoegen aan de Content Fragment Console met het extensiepunt contentFragmentGrid . In dit voorbeeld ziet u hoe u een aangepaste kolom toevoegt waarmee de pagina Inhoudsfragmenten op basis van de laatste gewijzigde datum in een leesbare indeling wordt weergegeven.

Extensiepunt

In dit voorbeeld wordt het uitbreidingspunt contentFragmentGrid uitgebreid om een aangepaste kolom toe te voegen aan de Content Fragment Console.

AEM-gebruikersinterface uitgebreidExtensiepunt
de Console van het Fragment van de InhoudKolommen van het Net

Voorbeeldextensie

In het volgende voorbeeld wordt een aangepaste kolom Age gemaakt waarmee de pagina van het inhoudsfragment in een leesbare indeling wordt weergegeven. De pagina wordt berekend vanaf de laatste gewijzigde datum van het inhoudsfragment.

De code laat zien hoe de metagegevens van het inhoudsfragment kunnen worden verkregen in het registratiebestand van de extensie en hoe de JSON-inhoud van het inhoudsfragment kan worden getransformeerd.

Dit voorbeeld gebruikt de đŸ”— bibliotheek van de Luxon om de leeftijd van het Fragment van de Inhoud te berekenen, die via npm i luxon wordt geĂ¯nstalleerd.

Registratie van extensies

ExtensionRegistration.js , toegewezen aan de route index.html, is het ingangspunt voor de uitbreiding van AEM en bepaalt:

  • De locatie van de extensie injecteert zichzelf (contentFragmentGrid) in de AEM-ontwerpervaring
  • De definitie van de aangepaste kolom in de functie getColumns()
  • De waarden voor elke aangepaste kolom, op rij
import React from "react";
import { generatePath } from "react-router";
import { Text } from "@adobe/react-spectrum";
import { register } from "@adobe/uix-guest";
import { extensionId } from "./Constants";
import { Duration } from "luxon";

/**
 * Set up a in-memory cache of the custom column data.
 * This is important if the work to contain column data is expensive, such as making HTTP requests to obtain the value.
 *
 * The caching of computed value is optional, but recommended if the work to compute the column data is expensive.
 */
const COLUMN_AGE_ID = "age";
const cache = {
  [COLUMN_AGE_ID]: {},
};

function ExtensionRegistration() {
  const init = async () => {
    const guestConnection = await register({
      id: extensionId,
      methods: {
        contentFragmentGrid: {
          getColumns() {
            return [
              {
                id: COLUMN_AGE_ID,          // Give the column a unique ID.
                label: "Age",               // The label to display
                render: async function (fragments) {
                  // This function is run for each row in the grid.
                  // The fragments parameter is an array of all the fragments (aka each row) in the grid.
                  const context = await guestConnection.hostConnection.getRemoteApi().getSharedContext();

                  // Iterate over each fragment in the grid
                  for (const fragment of fragments) {
                    // Check if a previous pass has computed the value for this fragment.id. If it has, we can skip it.
                    if (!cache[COLUMN_AGE_ID][fragment.id]) {
                      // If the fragment.id has not been computed and cached, then compute the value and cache it.
                      cache[COLUMN_AGE_ID][fragment.id] = await computeAgeColumnValue(fragment, context);
                    }
                  }
                  // Return the populated cache of the custom column data.
                  return cache[COLUMN_AGE_ID];
                }
              },
              // Add other custom columns here...
            ];
          },
        },
      },
    });
  };
  init().catch(console.error);

  return <Text>IFrame for integration with Host (AEM)...</Text>;
}

async function computeAgeColumnValue(fragment, context) {
  // Various data is available in the sharedContext, such as the AEM host, the IMS token, and the fragment itself.

  // Accessing AEM APIs requires the IMS token, which is available in the sharedContext, and also supporting CORS configurations deployed to AEM Author.
  //const aemHost = context.aemHost;
  //const accessToken = context.auth.imsToken;

  // Get the user's locale to format the value of the column.
  const locale = context.locale;

  // Compute the value of the column, in this case we are computing the age of the fragment from its last modified date.
  const duration = Duration.fromMillis(Date.now() - fragment.modifiedDate).rescale();

  let largestUnit = {};

  if (duration.years > 0) {
    largestUnit = {years: duration.years};
  } else if (duration.months > 0) {
    largestUnit = {months: duration.months};
  } else if (duration.days > 0) {
    largestUnit = {days: duration.days};
  } else if (duration.hours > 0) {
    largestUnit = {hours: duration.hours};
  } else if (duration.minutes > 0) {
    largestUnit = {minutes: duration.minutes};
  } else if (duration.seconds > 0) {
    largestUnit = {seconds: duration.seconds};
  }

  // Convert the largest unit of the age to human readable format.
  const columnValue = Duration.fromObject(largestUnit, {locale: locale}).toHuman();

  // Return the value of the column.
  return columnValue;
}

export default ExtensionRegistration;