{"id":571,"date":"2021-06-29T10:12:57","date_gmt":"2021-06-29T17:12:57","guid":{"rendered":"https:\/\/www.mavice.com\/blog\/?p=571"},"modified":"2021-08-10T11:45:52","modified_gmt":"2021-08-10T18:45:52","slug":"create-a-custom-aem-vue-component","status":"publish","type":"post","link":"https:\/\/www.mavice.com\/blog\/create-a-custom-aem-vue-component\/","title":{"rendered":"Create a Custom AEM Vue Component"},"content":{"rendered":"\n

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

Create a Custom WeatherComponent<\/h1>\n\n\n\n

Learn how to create a custom weather component to be used with the AEM SPA Editor. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. The Open Weather API<\/a> and Vue Open Weather Widget<\/a> are used.<\/p>\n\n\n\n

Objective<\/h2>\n\n\n\n
  1. Understand the role of Sling Models in manipulating the JSON model API provided by AEM.<\/li>
  2. Understand how to create new AEM component dialogs.<\/li>
  3. Learn to create a custom<\/strong> AEM Component that will be compatible with the SPA editor framework.<\/li><\/ol>\n\n\n\n

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

    A simple weather component will be built. This component will be able to be added to the SPA by content authors. Using an AEM dialog, authors can set the location for the weather to be displayed. The implementation of this component illustrates the steps needed to create a net-new AEM component that is compatible with the AEM SPA Editor framework.<\/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 Navigation and Routing<\/a> chapter, however to follow along all you need is a SPA-enabled AEM project deployed to a local AEM instance.<\/p>\n\n\n\n

    Open Weather API Key<\/h3>\n\n\n\n

    An API key from Open Weather<\/a> is needed to follow along with the tutorial. Sign up is free<\/a> for a limited amount of API calls.<\/p>\n\n\n\n

    Define the AEM Component<\/h2>\n\n\n\n

    An AEM component is defined as a node and properties. In the project these nodes and properties are represented as XML files in the ui.apps<\/code> module. Next, create the AEM component in the ui.apps<\/code> module.NOTE<\/p>\n\n\n\n

    A quick refresher on the basics of AEM components may be helpful<\/a>.<\/p>\n\n\n\n

    1. In the IDE of your choice open the ui.apps<\/code> folder.
      <\/li>
    2. Navigate to ui.apps\/src\/main\/content\/jcr_root\/apps\/wknd-spa-vue\/components<\/code> and create a new folder named open-weather<\/code>.
      <\/li>
    3. Create a new file named .content.xml<\/code> beneath the open-weather<\/code> folder. Populate the open-weather\/.content.xml<\/code> with the following:
      <\/li><\/ol>\n\n\n\n
      <?xml version<\/em>=\"1.0\" encoding<\/em>=\"UTF-8\"?>\n<jcr:root xmlns:sling<\/em>=\"http:\/\/sling.apache.org\/jcr\/sling\/1.0\" xmlns:cq<\/em>=\"http:\/\/www.day.com\/jcr\/cq\/1.0\" xmlns:jcr<\/em>=\"http:\/\/www.jcp.org\/jcr\/1.0\"\n          jcr:primaryType<\/em>=\"cq:Component\"\n          jcr:title<\/em>=\"Open Weather\"\n          componentGroup<\/em>=\"WKND SPA Vue - Content\"\/><\/code><\/pre>\n\n\n\n
      <\/p>\n\n\n\n
      jcr:primaryType=\"cq:Component\"<\/code> – identifies that this node will be an AEM component.<\/p>\n\n\n\n
      jcr:title<\/code> is the value that will be displayed to Content Authors and the componentGroup<\/code> determines the grouping of components in the authoring UI.<\/p>\n\n\n\n
      1. Beneath the custom-component<\/code> folder, create another folder named _cq_dialog<\/code>.
        <\/li>
      2. Beneath the _cq_dialog<\/code> folder create a new file named .content.xml<\/code> and populate it with the following:
        <\/li><\/ol>\n\n\n\n
        <?xml version<\/em>=\"1.0\" encoding<\/em>=\"UTF-8\"?>
        <jcr:root xmlns:<\/em>sling<\/em>=\"http:\/\/sling.apache.org\/jcr\/sling\/1.0\" xmlns:<\/em>granite<\/em>=\"http:\/\/www.adobe.com\/jcr\/granite\/1.0\" xmlns:<\/em>cq<\/em>=\"http:\/\/www.day.com\/jcr\/cq\/1.0\" xmlns:<\/em>jcr<\/em>=\"http:\/\/www.jcp.org\/jcr\/1.0\" xmlns:<\/em>nt<\/em>=\"http:\/\/www.jcp.org\/jcr\/nt\/1.0\"
                  jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                  jcr<\/em>:title<\/em>=\"Open Weather\"
                  sling<\/em>:resourceType<\/em>=\"cq\/gui\/components\/authoring\/dialog\">
            <content
                    jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                    sling<\/em>:resourceType<\/em>=\"granite\/ui\/components\/coral\/foundation\/container\">
                <items jcr<\/em>:primaryType<\/em>=\"nt:unstructured\">
                    <tabs
                            jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                            sling<\/em>:resourceType<\/em>=\"granite\/ui\/components\/coral\/foundation\/tabs\"
                            maximized<\/em>=\"{Boolean}true\">
                        <items jcr<\/em>:primaryType<\/em>=\"nt:unstructured\">
                            <properties
                                    jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                                    jcr<\/em>:title<\/em>=\"Properties\"
                                    sling<\/em>:resourceType<\/em>=\"granite\/ui\/components\/coral\/foundation\/container\"
                                    margin<\/em>=\"{Boolean}true\">
                                <items jcr<\/em>:primaryType<\/em>=\"nt:unstructured\">
                                    <columns
                                            jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                                            sling<\/em>:resourceType<\/em>=\"granite\/ui\/components\/coral\/foundation\/fixedcolumns\"
                                            margin<\/em>=\"{Boolean}true\">
                                        <items jcr<\/em>:primaryType<\/em>=\"nt:unstructured\">
                                            <column
                                                    jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                                                    sling<\/em>:resourceType<\/em>=\"granite\/ui\/components\/coral\/foundation\/container\">
                                                <items jcr<\/em>:primaryType<\/em>=\"nt:unstructured\">
                                                    <label
                                                            jcr<\/em>:primaryType<\/em>=\"nt:unstructured\"
                                                            sling<\/em>:resourceType<\/em>=\"granite\/ui\/components\/coral\/foundation\/form\/textfield\"
                                                            fieldDescription<\/em>=\"The label to display for the component\"
                                                            fieldLabel<\/em>=\"Label\"
                                                            name<\/em>=\".\/label\"\/>
                                                <\/items>
                                            <\/column>
                                        <\/items>
                                    <\/columns>
                                <\/items>
                            <\/properties>
                        <\/items>
                    <\/tabs>
                <\/items>
            <\/content>
        <\/jcr:root><\/pre>\n\n\n\n
        The above XML file generates a very simple dialog for the Weather Component<\/code>. The critical part of the file is the inner <label><\/code>. This dialog will contain a textfield<\/code> that will allow a user to configure the weather to be displayed.<\/p>\n\n\n\n
        A Sling Model will be created next to expose the value of the label<\/code> properties via the JSON model.<\/p>\n\n\n\n
        You can view a lot more examples of dialogs by viewing the Core Component definitions<\/a>. You can also view additional form fields, like select<\/code>, textarea<\/code>, pathfield<\/code>, available beneath \/libs\/granite\/ui\/components\/coral\/foundation\/form<\/code> in CRXDE-Lite<\/a>.<\/p>\n\n\n\n
        With a traditional AEM component, an HTL<\/a> script is typically required. Since the SPA will render the component, no HTL script is needed.

        <\/p>\n\n\n\n
        Create the Sling Model<\/h2>\n\n\n\n
        Sling Models are annotation driven Java \u201cPOJO\u2019s\u201d (Plain Old Java Objects) that facilitate the mapping of data from the JCR to Java variables. Sling Models<\/a> typically function to encapsulate complex server-side business logic for AEM Components.<\/p>\n\n\n\n
        In the context of the SPA Editor, Sling Models expose a component\u2019s content through the JSON model through a feature using the Sling Model Exporter<\/a>.<\/p>\n\n\n\n
        1. In the IDE of your choice open the core<\/code> module at aem-guides-wknd-spa-vue\/core<\/code>.<\/li>
        2. Create a file named at OpenWeatherModel.java<\/code> at core\/src\/main\/java\/com\/adobe\/aem\/guides\/wknd\/spa\/vue\/core\/models<\/code>.<\/li>
        3. Populate OpenWeatherModel.java<\/code> with the following:<\/li><\/ol>\n\n\n\n
          package <\/em>com.adobe.aem.guides.wknd.spa.vue.core.models;\n\nimport <\/em>com.adobe.cq.export.json.ComponentExporter;\n\n\/\/ Sling Models intended to be used with SPA Editor must extend ComponentExporter interface\npublic interface OpenWeatherModel extends <\/em>ComponentExporter {\n\n    public <\/em>String getLabel();\n\n}<\/pre>\n\n\n\n
          1. This is the Java interface for our component. In order for our Sling Model to be compatible with the SPA Editor framework it must extend the ComponentExporter<\/code> class.<\/li>
          2. Create a folder named impl<\/code> beneath core\/src\/main\/java\/com\/adobe\/aem\/guides\/wknd\/spa\/vue\/core\/models<\/code>.<\/li>
          3. Create a file named OpenWeatherModelImpl.java<\/code> beneath impl<\/code> and populate with the following:
            <\/li><\/ol>\n\n\n\n
            package <\/em>com.adobe.aem.guides.wknd.spa.vue.core.models.impl;\n\nimport <\/em>org.apache.sling.models.annotations.*;\nimport <\/em>org.apache.sling.models.annotations.injectorspecific.ValueMapValue;\nimport <\/em>com.adobe.cq.export.json.ComponentExporter;\nimport <\/em>com.adobe.cq.export.json.ExporterConstants;\nimport <\/em>org.apache.commons.lang3.StringUtils;\nimport <\/em>org.apache.sling.api.SlingHttpServletRequest;\nimport <\/em>com.adobe.aem.guides.wknd.spa.vue.core.models.OpenWeatherModel<\/em>;\n\n\/\/ Sling Model annotation\n<\/em>@Model(\n        adaptables = SlingHttpServletRequest.class<\/em>,\n        adapters = { OpenWeatherModel<\/em>.class<\/em>, ComponentExporter.class <\/em>},\n        resourceType = OpenWeatherModelImpl.RESOURCE_TYPE<\/em>,\n        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL\n)\n@Exporter( \/\/Exporter annotation that serializes the modoel as JSON\n        <\/em>name = ExporterConstants.SLING_MODEL_EXPORTER_NAME,\n        extensions = ExporterConstants.SLING_MODEL_EXTENSION\n)\npublic class <\/em>OpenWeatherModelImpl implements OpenWeatherModel <\/em>{\n\n    @ValueMapValue\n    private <\/em>String label; \/\/maps variable to jcr property named \"label\" persisted by Dialog\n\n    \/\/ points to AEM component definition in ui.apps\n    static final <\/em>String RESOURCE_TYPE <\/em>= \"wknd-spa-vue\/components\/open-weather\";\n\n    \/\/ public getter method to expose value of private variable `label`\n    \/\/ adds additional logic to default the label to \"(Default)\" if not set.\n    <\/em>@Override\n    public <\/em>String getLabel() {\n        return <\/em>StringUtils.isNotBlank(label) ? label : \"(Default)\";\n    }\n\n    \/\/ method required by `ComponentExporter` interface\n    \/\/ exposes a JSON property named `:type` with a value of `wknd-spa-vue\/components\/open-weather`\n    \/\/ required to map the JSON export to the SPA component props via the `MapTo`\n    <\/em>@Override\n    public <\/em>String getExportedType() {\n        return <\/em>OpenWeatherModelImpl.RESOURCE_TYPE<\/em>;\n    }\n}<\/pre>\n\n\n\n
            The the static variable RESOURCE_TYPE<\/code> must point to the path in ui.apps<\/code> of the component. The getExportedType()<\/code> is used to map the JSON properties to the SPA component via MapTo<\/code>. @ValueMapValue<\/code> is an annotation that reads the jcr property saved by the dialog.<\/p>\n\n\n\n
            Update the SPA<\/h2>\n\n\n\n
            Next, update the Vue code to include the\u00a0Vue Open Weather Widget<\/a><\/a>\u00a0and have it map to the AEM component created in the previous steps.<\/p>\n\n\n\n
            1. Install the Vue Open Weather Widget<\/a> as an npm<\/strong> dependency:<\/li><\/ol>\n\n\n\n
              $ cd aem-guides-wknd-spa-vue\/ui.frontend<\/code><\/pre>\n\n\n\n
              npm install vue-open-weather-widget<\/code><\/pre>\n\n\n\n
              <\/p>\n\n\n\n
              Create a new folder named OpenWeather<\/code> at ui.frontend\/src\/components\/OpenWeather<\/code>.<\/p>\n\n\n\n
              Add a file named OpenWeather.<\/code>vue and populate it with the following:<\/p>\n\n\n\n
              <template>\n  <div class<\/em>=\"weather-widget-container\">\n    <open-weather-widget :api-key<\/em>=\"API_KEY\"\/>\n  <\/div>\n<\/template>\n<script>\n\/\/ For simplicity it is hard coded in the file, ideally this is extracted in to an environment variable<\/em>\n\nimport <\/em>OpenWeatherWidget from <\/em>'vueOpenWeatherWidget'\nimport <\/em>'vue-open-weather-widget\/dist\/vue-open-weather-widget.css'\n\nexport default <\/em>{\n  name: 'OpenWeather',\n  components: {\n    OpenWeatherWidget\n  }\n}\n<\/script>\n\n<style scoped<\/em>>\n\n<\/style><\/pre>\n\n\n\n

              Update map-components.js<\/code> at ui.frontend\/src\/components\/map-components.js<\/code> to include the OpenWeather<\/code> component:<\/p>\n\n\n\n
              \/\/ Open Weather Component Mapping
              <\/em>MapTo('wknd-spa-vue\/components\/open-weather')(
                OpenWeather,
                {
                  emptyLabel: 'Open Weather',
                  isEmpty: function <\/em>(props) {
                    return <\/em>!props || !props.label || props.labek.trim().length < 1
                  },
                  resourceType: 'wknd-spa-vue\/components\/open-weather'
                }
              )<\/pre>\n\n\n\n
              1. Deploy all of the updates to a local AEM environment from the root of the project directory
                $ cd aem-guides-wknd-spa-vue <\/code>
                $ mvn clean install -PautoInstallSinglePackage<\/code><\/li><\/ol>\n\n\n\n
                Update the Template Policy<\/h2>\n\n\n\n
                Next, navigate to AEM to verify the updates and allow the OpenWeather<\/code> component to be added to the SPA.<\/p>\n\n\n\n
                1. Verify the registration of the new Sling Model by navigating to http:\/\/localhost:4502\/system\/console\/status-slingmodels<\/a>.

                  You should see the above two lines that indicate the OpenWeatherModelImpl<\/code> is associated with the wknd-spa-vue\/components\/open-weather<\/code> component and that it is registered via the Sling Model Exporter.
                  <\/li>
                2. Navigate to the SPA Page Template at http:\/\/localhost:4502\/editor.html\/conf\/wknd-spa-vue\/settings\/wcm\/templates\/spa-page-template\/structure.html<\/a>.
                  <\/li>
                3. Update the Layout Container\u2019s policy to add the new Open Weather<\/code> as an allowed component:<\/li><\/ol>\n\n\n\n
                  \"\"<\/figure>\n\n\n\n
                  Save the changes to the policy.<\/p>\n\n\n\n
                  Author the Open Weather Component<\/h2>\n\n\n\n
                  Next, author the Open Weather<\/code> component using the AEM SPA Editor.<\/p>\n\n\n\n
                  1. Navigate to http:\/\/localhost:4502\/editor.html\/content\/wknd-spa-vue\/us\/en\/home.html<\/a>.<\/li>
                  2. In Edit<\/code> mode, add the Open Weather<\/code> to the Layout Container<\/code>:
                    <\/li><\/ol>\n\n\n\n
                    \"\"<\/figure><\/div>\n\n\n\n
                    Open the component\u2019s dialog and enter a Label<\/strong>.<\/p>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n
                    This is the dialog that was created based on the XML file earlier in the chapter.<\/p>\n\n\n\n
                    Save the changes and allow the browser to have access to your location. Observe that the weather for your location<\/strong> is now displayed:<\/p>\n\n\n\n
                    \"\"<\/figure>\n\n\n\n
                    <\/p>\n\n\n\n
                    Congratulations!<\/h2>\n\n\n\n
                    Congratulations, you learned how to create a custom AEM component to be used with the SPA Editor. You also learned how dialogs, JCR properties, and Sling Models interact to output the JSON model.<\/p>\n","protected":false},"excerpt":{"rendered":"
                    *This article was modeled from the current Adobe React SPA documentation. Create a Custom WeatherComponent Learn how to create a custom weather component to be used with the AEM SPA Editor. Learn how to develop author dialogs and Sling Models to extend the JSON model to populate a custom component. The Open…<\/p>\n","protected":false},"author":2,"featured_media":616,"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\/571"}],"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=571"}],"version-history":[{"count":3,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/571\/revisions"}],"predecessor-version":[{"id":617,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/posts\/571\/revisions\/617"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media\/616"}],"wp:attachment":[{"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/media?parent=571"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/categories?post=571"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.mavice.com\/blog\/wp-json\/wp\/v2\/tags?post=571"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}