avatar
REST APIs in component AEM AEM

> Structure of AEM Project

+> ui.frontend/src/core/components/content/component-letter
+> ui.frontend/src/core/components/globals/cognito
+> ui.frontend/src/core/components/globals/constants.ts
export const JWT_TOKEN_NAME = 'JwtToken';
+> ui.frontend/src/core/components/utils/components.ts
export default abstract class Component {
  private elementName: string;
  private elementDashName: string;
  $cmp: HTMLElement;
  $elements: { [k: string]: HTMLElement } = {};


  protected constructor(cmp: HTMLElement) {
    this.$cmp = cmp;
    this.elementName = this.$cmp.dataset.cmpIs ? this.$cmp?.dataset?.cmpIs : '';
    this.elementDashName = this.elementName?.split(/(?=[A-Z])/).join('-').toLowerCase();
    this.protect();
    if (this.$elements) {
      this.cacheElements();
    }
  }
}
+> ui.frontend/src/core/components/utils/logger.ts
declare global {
  let CURRENT_ENVIRONMENT: 'DEVELOPMENT' | 'PRODUCTION';
}
const shouldLog = CURRENT_ENVIRONMENT === 'DEVELOPMENT';
const logger = {
  log(M.Agrs.: any[]): void {
    if (shouldLog) {
      console.log(M.Agrs.); // eslint-disable-line
    }
  },
  error(M.Agrs.: any[]): void {
    // TODO Check production scenario
    if (shouldLog) {
      console.error(M.Agrs.); // eslint-disable-line
    }
  },
  debug(M.Agrs.: any[]): void {
    if (shouldLog) {
      console.debug(M.Agrs.); // eslint-disable-line
    }
  },
};
export default logger;
+> ui.frontend/src/core/components/utils/cookie-utils.ts
const cookieUtils = {
  setCookie(name: string, val: string, duration?: number): void {
    if (duration) {
      const date = new Date();
      date.setTime(date.getTime() + duration);
      document.cookie = `${name}=${val}; expires=${date.toUTCString()}; path=/`;
    } else {
      document.cookie = `${name}=${val}; path=/`;
    }
  },
  getCookie(name: string): string {
    const value = `; ${document.cookie}`;
    const parts = value.split(`; ${name}=`);
    if (parts && parts.length === 2) {
      return parts.pop()?.split(';').shift() || '';
    }
    return '';
  },
  deleteCookie(name: string): void {
    const date = new Date();
    date.setTime(date.getTime() + (-1 * 24 * 60 * 60 * 1000));
    document.cookie = `${name}=; expires=${date.toUTCString()}; path=/`;
  },
};
export default cookieUtils;

> JS function for calling APIs

import Component from '@utils/Component';
import $ from 'jQuery';
import logger from '@utils/logger';
import { USER_COOKIE_NAME, TOKEN_COOKIE_NAME } from '@globals/constants';
import cookieUtils from '@utils/cookie-utils';

declare interface LetterResponse {
  fullName: string;
}

export default class ComponentLetter extends Component {
  private selector = 'letter';

  constructor(cmp: HTMLElement) {
    super(cmp);
    this.getLetter();
  }

  private getLetter = () => {
    const letter = this.$cmp;
    const editMode = letter.dataset.editmode as string;
    const resource = letter.dataset.resource as string;
    const userID = cookieUtils.getCookie(USER_COOKIE_NAME);


    if (!editMode) {
      const endpoint = `${resource}.${this.selector}.json`;
      $.get(endpoint)
        .done((data: LetterResponse): void => {
          console.log(data);
        })
        .catch((err): void => {
          logger.error(err);
        });
      }
  };
}

> URL REST API using Serverless

/content/flagtick/us/en/page-letter/jcr:content/root/container/component-letter.letter.json

> DEFINE Serverless Application

+> core/src/main/java/com/flagtick/core/servlets/LetterServlet.java

How can we implement it inside source code AEM?

package com.flagtick.core.servlets;

import com.flagtick.core.utils.Constants;
import org.apache.sling.api.SlingHttpServletRequest;
import org.apache.sling.api.SlingHttpServletResponse;
import org.apache.sling.api.servlets.HttpConstants;
import org.apache.sling.api.servlets.SlingSafeMethodsServlet;
import org.osgi.service.component.annotations.Component;
import org.osgi.service.component.annotations.Reference;

import javax.servlet.Servlet;
import java.io.IOException;

import static org.apache.sling.api.servlets.ServletResolverConstants.*;
import static org.osgi.framework.Constants.SERVICE_DESCRIPTION;

@Component(immediate = true, service = Servlet.class,
        property = {
                SERVICE_DESCRIPTION + LetterServlet.SERVLET_SERVICE_DESCRIPTION,
                SLING_SERVLET_RESOURCE_TYPES + LetterServlet.RESOURCE_TYPE,
                SLING_SERVLET_METHODS + "=" + HttpConstants.METHOD_GET,
                SLING_SERVLET_SELECTORS + LetterServlet.SELECTOR,
                SLING_SERVLET_EXTENSIONS + "=" + Constants.EXTENSION_JSON
        })
public class LetterServlet extends SlingSafeMethodsServlet {

    public static final String SERVLET_SERVICE_DESCRIPTION = "= FLAGTICK- Fetching Information For Letter";
    public static final String RESOURCE_TYPE = "=flagtick/components/content/letter/component-letter";
    public static final String SELECTOR = "=letter";

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
        /* Generate PDF online */
    }
}

Now, you can try to process feature based on Java Serverless implementation with specific features. Reference link to generate PDF.

You need to login to do this manipulation!