{"id":566,"date":"2021-06-29T09:05:40","date_gmt":"2021-06-29T16:05:40","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=566"},"modified":"2021-08-10T11:46:33","modified_gmt":"2021-08-10T18:46:33","slug":"map-spa-components-to-aem-components","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/map-spa-components-to-aem-components\/","title":{"rendered":"Map SPA components to AEM components"},"content":{"rendered":"\n

*This article was modeled from the current Adobe React SPA documentation<\/a>.<\/em><\/p>\n\n\n\n

Learn how to map Vue components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring.<\/p>\n\n\n\n

This chapter takes a deeper-dive into the AEM JSON model API and how the JSON content exposed by an AEM component can be automatically injected into a Vue component as props.<\/p>\n\n\n\n

Objective<\/h2>\n\n\n\n
  1. Learn how to map AEM components to SPA Components.<\/li>
  2. Inspect how a Vue component uses dynamic properties passed from AEM.<\/li>
  3. Learn how to use out of the box AEM Core Components<\/a><\/li><\/ol>\n\n\n\n

    What you will build<\/h2>\n\n\n\n

    This chapter will inspect how the provided Text<\/code> SPA component is mapped to the AEM Text<\/code>component. AEM Core Components like the Image<\/code> component will be used in the SPA and authored in AEM. Out of the box features of the Layout Container<\/strong> and Template Editor<\/strong> policies will also be used to create a view that is a little more varied in appearance.<\/p>\n\n\n\n

    Prerequisites<\/h2>\n\n\n\n

    Review the required tooling and instructions for setting up a local development environment<\/a>. This chapter is a continuation of the Integrate the SPA<\/a> chapter, however to follow along all you need is a SPA-enabled AEM project.<\/p>\n\n\n\n

    Mapping Approach<\/h2>\n\n\n\n

    The basic concept is to map a SPA Component to an AEM Component. AEM components, run server-side, export content as part of the JSON model API. The JSON content is consumed by the SPA, running client-side in the browser. A 1:1 mapping between SPA components and an AEM component is created.
    <\/p>\n\n\n\n

    \"\"
    High-level overview of mapping an AEM Component to a Vue Component<\/em>
    <\/figcaption><\/figure><\/div>\n\n\n\n

    Inspect the Text Component<\/h2>\n\n\n\n

    The AEM Project Archetype<\/a> provides a Text<\/code> component that is mapped to the AEM Text component<\/a>. This is an example of a content<\/strong> component, in that it renders content<\/em> from AEM.<\/p>\n\n\n\n

    Let\u2019s see how the component works.<\/p>\n\n\n\n

    Inspect the JSON model<\/h3>\n\n\n\n
    1. Before jumping into the SPA code, it is important to understand the JSON model that AEM provides. Navigate to the Core Component Library<\/a> and view the page for the Text component. The Core Component Library provides examples of all the AEM Core Components.<\/li>
    2. Select the JSON<\/strong> tab for one of the examples:\"TextYou should see three properties: text<\/code>, richText<\/code>, and :type<\/code>.:type<\/code> is a reserved property that lists the sling:resourceType<\/code> (or path) of the AEM Component. The value of :type<\/code> is what is used to map the AEM component to the SPA component.text<\/code> and richText<\/code> are additional properties that will be exposed to the SPA component.
      <\/li>
    3. View the JSON output at http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en.model.json<\/a>. You should be able to find an entry similar to:<\/li><\/ol>\n\n\n\n
      \"text\": {    <\/code>\n \"id\": \"text-a647cec03a\",    <\/code>\n \"text\": \"<p>Hello World! Updated content!<\/p>\\r\\n\",     <\/code>\n \"richText\": true,   <\/code>\n \":type\": \"wknd-spa-vue\/components\/text\",  <\/code>\n \"dataLayer\": {}  <\/code>\n}<\/code><\/code><\/pre>\n\n\n\n

      Inspect the Text SPA component<\/h3>\n\n\n\n
      1. In the IDE of your choice open up the AEM Project for the SPA. Expand the ui.frontend<\/code> module and open the file Text.vue<\/code> under ui.frontend\/src\/components\/Text\/Text.<\/code>vue.<\/li><\/ol>\n\n\n\n
        <template>\n  <div>\n    <div\n      v-if<\/em>=\"richText\"\n      :id<\/em>=\"modelId\"\n      data-rte-editelement\n      v-html<\/em>=\"getRichTextContent()\"\n    ><\/div>\n    <div v-else\n         :id<\/em>=\"modelId\"\n         data-rte-editelement\n         v-html<\/em>=\"text\">\n    <\/div>\n  <\/div>\n<\/template>\n\n<script>\nimport <\/em>DOMPurify from <\/em>'dompurify'\nimport <\/em>extractModelId from <\/em>'..\/..\/utils\/extract-model-id'\n\nexport default <\/em>{\n  name: 'Text',\n  props: {\n    cqPath: {\n      type: String\n    },\n    richText: {\n      type: Boolean\n    },\n    text: {\n      type: String\n    }\n  },\n  computed: {\n    modelId () {\n      return <\/em>extractModelId(this<\/em>.cqPath)\n    }\n  },\n  methods: {\n    getRichTextContent () {\n      return <\/em>DOMPurify.sanitize(this<\/em>.text)\n    }\n  }\n}\n\n<\/script>\n<style scoped lang<\/em>=\"scss\">\n<\/style><\/code><\/pre>\n\n\n\n

        2. Text<\/code> is a standard Vue component. The component uses this.richText<\/code> to determine whether the content to render is going to be rich text or plain text. The actual \u201ccontent\u201d used comes from this.text<\/code>.To avoid a potential XSS attack, the rich text is escaped via DOMPurify<\/code> before using         dangerouslySetInnerHTML<\/a> to render the content. Recall the richText<\/code> and text<\/code> properties from the JSON model earlier in the exercise.

        <\/p>\n\n\n\n
        1. Next take a look at the MapTo<\/code> within map-components.js.
          <\/li><\/ol>\n\n\n\n
          \/\/ Text Component Mapping\n<\/em>MapTo('wknd-spa-vue\/components\/text')(\n  Text,\n  {\n    emptyLabel: 'Text',\n    isEmpty: function <\/em>(props) {\n      return <\/em>!props || !props.text || props.text.trim().length < 1\n    },\n    resourceType: 'wknd-spa-vue\/components\/text'\n  }\n)<\/code><\/pre>\n\n\n\n

          The above code is responsible for mapping the SPA Text component to the AEM Compoennt and determining when to render the placeholder in the AEM author environment. If the isEmpty<\/code> method returns true<\/strong> then the placeholder will be rendered.<\/p>\n\n\n\n
          MapTo<\/code> is provided by the AEM SPA Editor JS SDK (@mavice\/aem-vue-editable-components<\/code>). The path wknd-spa-vue\/components\/text<\/code> represents the sling:resourceType<\/code> of the AEM component. This path gets matched with the :type<\/code> exposed by the JSON model observed earlier. MapTo<\/code> takes care of parsing the JSON model response and passing the correct values as props<\/code> to the SPA component.

          You can find the AEM Text<\/code> component definition at ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd-spa-vue\/components\/text<\/code>.<\/p>\n\n\n\n
          Use Vue Core Components<\/h2>\n\n\n\n
          1. In the project code open the file map-components.js<\/code> at ui.frontend\/src<\/code>.
            This file imports all of the SPA components that map to AEM components. Given the dynamic nature of the SPA Editor implementation, we must explicitly reference any SPA components that are tied to AEM author-able components. This allows an AEM author to choose to use a component wherever they want in the application.<\/li><\/ol>\n\n\n\n
            1. The following import statements include SPA components written in the project:
              <\/li><\/ol>\n\n\n\n
              import <\/em>Text from <\/em>'.\/components\/Text\/Text'
              import <\/em>Image from <\/em>'.\/component\/Image\/Image'<\/pre>\n\n\n\n
              Update AEM Policies<\/h3>\n\n\n\n
              Policies are a feature of AEM templates gives developers and power-users granular control over which components are available to be used. The AEM Core Components are included in the SPA Code but need to be enabled via a policy before they can be used in the application.<\/p>\n\n\n\n
              1. From the AEM Start screen navigate to Tools<\/strong> > Templates<\/strong> > WKND SPA Vue<\/a><\/strong>.<\/li>
              2. Select and open the SPA Page<\/strong> template for editing.<\/li>
              3. Select the Layout Container<\/strong> and click it\u2019s policy<\/strong> icon to edit the policy:\"layout<\/li>
              4. Under Allowed Components<\/strong> > WKND SPA Vue – Content<\/strong> > check Image<\/strong>.\"UpdatedUnder Default Components<\/strong> > Add mapping<\/strong> and choose the Image – WKND SPA Vue – Content<\/strong> component:\"SetEnter a mime type<\/strong> of image\/*<\/code>.Click Done<\/strong> to save the policy updates.<\/li><\/ol>\n\n\n\n
                1. In the Layout Container<\/strong> click the policy<\/strong> icon for the Text<\/strong> component. Create a new policy named WKND SPA Text<\/strong>. Under Plugins<\/strong> > Formatting<\/strong> > check all the boxes to enable additional formatting options:\"EnableUnder Plugins<\/strong> > Paragraph Styles<\/strong> > check the box to Enable paragraph styles<\/strong>:\"EnableClick Done<\/strong> to save the policy update.
                  <\/li>
                2. Create an Image component in the components folder and map it to the AEM component within map-components.js
                  <\/li><\/ol>\n\n\n\n
                  <template>
                  <img :src<\/em>=\"src\"\/>
                  <\/template>

                  <script>
                  export <\/em>default <\/em>{
                    name: 'Image',
                    props: {
                      src: {
                        type: String
                      }
                    }
                  }
                  <\/script>

                  <style scoped<\/em>>

                  <\/style><\/pre>\n\n\n\n
                  \/\/ Image Component Mapping
                  <\/em>MapTo('wknd-spa-vue\/components\/image')(
                    Image,
                    {
                      emptyLabel: 'Image',
                      isEmpty: function <\/em>(props) {
                        return <\/em>!props || !props.src || props.src.trim().length < 1
                      },
                      resourceType: 'wknd-spa-vue\/components\/image'
                    }
                  )<\/pre>\n\n\n\n

                  Author Content<\/h3>\n\n\n\n
                  1. Navigate to the Homepage<\/strong> http:\/\/localhost:4502\/editor.html\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>.<\/li>
                  2. You should now be able to use the additional components Image<\/strong> on the page.<\/li><\/ol>\n\n\n\n
                    \"This<\/figure>\n\n\n\n
                    1. You should also be able to edit the Text<\/code> component and add additional paragraph styles in full-screen<\/strong> mode.\"Full<\/li>
                    2. You should also be able to drag+drop an image from the Asset finder<\/strong>:\"Drag<\/li><\/ol>\n\n\n\n
                      Inspect the Layout Container<\/h2>\n\n\n\n
                      Support for the Layout Container<\/strong> is automatically provided by the AEM SPA Editor SDK. The Layout Container<\/strong>, as indicated by the name, is a container<\/strong> component. Container components are components that accept JSON structures which represent other<\/em> components and dynamically instantiate them.<\/p>\n\n\n\n
                      Let\u2019s inspect the Layout Container further.<\/p>\n\n\n\n
                      1. In a browser navigate to http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en.model.json<\/a>\"JSONThe Layout Container<\/strong> component has a sling:resourceType<\/code> of wcm\/foundation\/components\/responsivegrid<\/code> and is recognized by the SPA Editor using the :type<\/code> property, just like the Text<\/code> and Image<\/code> components.The same capabilities of re-sizing a component using Layout Mode<\/a> are available with the SPA Editor.<\/li>
                      2. Return to http:\/\/localhost:4502\/editor.html\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>. Add additional Image<\/strong> components and try re-sizing them using the Layout<\/strong> option:\"Re-size<\/li>
                      3. Re-open the JSON model http:\/\/localhost:4502\/content\/wknd-spa-vue\/us\/en.model.json<\/a> and observe the columnClassNames<\/code> as part of the JSON:\"CloumnThe class name aem-GridColumn--default--4<\/code> indicates the component should be 4 columns wide based on a 12 column grid. More details about the responsive grid can be found here<\/a>.<\/li>
                      4. Return to the IDE and in the ui.apps<\/code> module there is a client-side library defined at ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd-spa-vue\/clientlibs\/clientlib-grid<\/code>. Open the file less\/grid.less<\/code>.This file determines the breakpoints (default<\/code>, tablet<\/code>, and phone<\/code>) used by the Layout Container<\/strong>. This file is intended to be customized per project specifications. Currently the breakpoints are set to 1200px<\/code> and 768px<\/code>.<\/li><\/ol>\n\n\n\n

                        Congratulations!<\/h2>\n\n\n\n
                        Congratulations, you learned how to map SPA components to AEM Components and you used the AEM Core Components. You also got a chance to explore the responsive capabilities of the Layout Container<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"
                        *This article was modeled from the current Adobe React SPA documentation. Learn how to map Vue components to Adobe Experience Manager (AEM) components with the AEM SPA Editor JS SDK. Component mapping enables users to make dynamic updates to SPA components within the AEM SPA Editor, similar to traditional AEM authoring….<\/p>\n","protected":false},"author":2,"featured_media":618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,36],"tags":[21,41],"_links":{"self":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/566"}],"collection":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/comments?post=566"}],"version-history":[{"count":3,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/566\/revisions"}],"predecessor-version":[{"id":619,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/566\/revisions\/619"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/618"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}