Content Fragment Grid Columns

The content fragment grid is located below the header menu and action bar, and it displays a list of all the content fragments.

By utilizing the extension point, you can add custom grid columns, make them sortable, and apply custom rendering.

Copy
const guestConnection = await register({
  id: "aem-headless-ui-ext-examples-progress-circle",
  methods: {
      contentFragmentGrid: {
          getColumns() {
              return [
                  {
                      id: "extended",
                      label: "Extended",
                      allowsResizing: true, // optional, by default "false"
                      minWidth: 350, // optional, no default value
                      showDivider: true, // optional, by default "false"
                      render: async function (fragments) {
                          return fragments.reduce((accumulator, fragment) => {
                              accumulator[fragment.id] = fragment.title + ' - extended';
                              return accumulator;
                          }, {})
                      },
                  },
              ];
          }
      }
  }
});
Copied to your clipboard
const guestConnection = await register({
  id: "aem-headless-ui-ext-examples-progress-circle",
  methods: {
      contentFragmentGrid: {
          getColumns() {
              return [
                  {
                      id: "extended",
                      label: "Extended",
                      allowsResizing: true, // optional, by default "false"
                      minWidth: 350, // optional, no default value
                      showDivider: true, // optional, by default "false"
                      render: async function (fragments) {
                          return fragments.reduce((accumulator, fragment) => {
                              accumulator[fragment.id] = fragment.title + ' - extended';
                              return accumulator;
                          }, {})
                      },
                  },
              ];
          }
      }
  }
});

API Reference

Render Function

The render function will receive the list of fragment currently in the state of the application and will need to return an object with keys the id of the fragment (frament.id) and with property being of type string. If the value would be casted to string.

Copy
async function (fragments) {
    return fragments.reduce((accumulator, fragment) => {
        accumulator[fragment.id] = fragment.name + '-extension-one';
        return accumulator;
    })
}
Copied to your clipboard
async function (fragments) {
    return fragments.reduce((accumulator, fragment) => {
        accumulator[fragment.id] = fragment.name + '-extension-one';
        return accumulator;
    })
}

Last updated 6/22/2023

Was this helpful?

Yes

No