Adobe Experience Manager 6.2

Question

Does anyone have a best practice example of how to create a dynamic component with two dimensions. For example the js data to a table, where you can have x amount of columns and y amount of rows - with dynamic input types e.g. text, number, dropdown.

var comparisonTableCarouselJSON = {
  tableColumns: [
    {
      columnData: [
        {
           cellType: "label", 
           text: "Test 3",
           richText: "",
           tickBox: "",
        },
      ]
    },
    {
      columnData: [
        {
          cellType: "label", 
          text: "Test 3",
          richText: "",
          tickBox: "",
        },
      ]
    },
    {
      columnData: [
        {
          cellType: "label", 
          text: "Test 3",
          richText: "",
          tickBox: "",
        },
      ]
    }
  ]
}

did you check the OTB table component. Does it not cater your requirement? — Saravana Prakash
Thanks, I believe I have looked at the table component you are referring too. The problem I'm facing is that I'm writing my components with React JS, using modern features on the client side. Where I need to generate the json to drive the table, rather than a table with its own styles. — Nick Taras
Oh. So you are building a react component. What is role of AEM? just to host and serve the react component ? I dont see connection to java, xml, jsp, aem6.2 you tagged above. You can check npmjs.com/package/react-table which is again OTB. — Saravana Prakash
The requirement I have is to use AEM to dynamically create a JSON structure via a dialog. This to be rendered in the JSP file as a js var and consumed by the react component. The use cases include; tables, carousels, cards, but feel the table may illustrate the use case the in the clearest way. — Nick Taras
Thanks Saravana, I've added an example of the JSON structure to the main question. Where an Author can dynamically choose how many cols / rows they have - and this would be generated by AEM. This example would be 1 row and 3 columns. — Nick Taras

Saravana Prakash Saravana Prakash · Accepted Answer · 2020-03-07T16:00:31

From comments I understand you want to use AEM as headless CMS and a React head.

Approach 1: Recommended way of making AEM into a headless CMS is to use content fragments. You ll need to enable RTE Plugins in the fragment. Then create a fragment and author the table content. Then using the ComponentExporter the model.json can be exported and consumed by React head.

Approach 2: Create a table component that extends aem core text component. The aemcore text has all needed plugins so your custom component will essentially be blank. The aemcore uses Text Model which extends ComponentExporter. So you can consume the table content by hitting */_jcr_content/*/table.model.json. This is again easy since very less coding involved.

Difficult part of the development: Both above approaches uses ComponentExporter that blindly exports jcr content with help of jackson. The table plugin for RTE saves content as html. This means, the produced *.model.json will be a html string. For example like this:

{"text": "<table><tbody><tr><th>Hello</th><th>World</th></tr></tbody></table>"}

And at react end, you ll need to either render as innerHtml or use a HTML Parser at React end, parse the content in your needed format. To avoid innerHtml/parsing at FE, you need to build a custom Sling model similar to core Text that extends ComponentExporter. Use an HTMLParser like Jsoup to parse the HTML String into DOM object. Have a TableDTO with needed fields as per your required json format. And last map the DOMElement from jsoup parser into the TableDTO. The ComponentExporter should export the custom TableDTO. This way you ll get a neat json exported from *.model.json

Adobe Experience Manager 6.2

1 Answers