avatar
pathbrowser AEM AEM

In AEM Sling HTL (HTML Template Language), you can use the pathbrowser component to allow users to select a path in the AEM DAM (Digital Asset Management) system.

•  Reference Link: https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/granite/ui/components/coral/foundation/form/pathfield/index.html

» cq:dialog

<loginPath
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
    fieldLabel="Login Page path"
    name="./loginPath"
    rootPath="/content/flagtick"/>

» Interface Model + Model Implementation

package com.flagtick.core.models;

public interface FlagtickModel {
   String getLoginPath();
}

package com.flagtick.core.models.impl;

@Model(adaptables = Resource.class,
        adapters = NavigationModel.class,
        defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)
public class FlagtickModelImpl implements FlagtickModel {

   @ValueMapValue
   private String addressPath;

   @SlingObject
   private ResourceResolver resolver;

   @Override
   public String getLoginPath() {
      return resolver.map(LinkUtils.sanitizeLink(loginPath));
   }
} 

» data-attribute AEM

<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
data-sly-use.flagtickModel="com.flagtick.core.models.FlagtickModel">
    <div class="flagtick-login"
         data-cmp-is="FlagtickLogin"
         data-login-path="${flagtickModel.loginPath}"
    </div>
</sly>

» FlagtickLogin.ts

import { 
  FLAGTICK_CLASS (.flagtick-login),
} from '@globals/constants';

export default class FlagtickLogin extends Component implements LoggedInCallback {
    
    private loginPage!: string;    

    constructor(cmpRef: HTMLElement) {
      super(cmpRef);

      this.navigation = document.querySelector(FLAGTICK_CLASS) as HTMLElement;
      this.init();
    }

    private init(): void {
      this.loginPage = this.$cmp.dataset.loginPath || '';
      this.preventUserAccessingURL();
    }
    
    private preventUserAccessingURL = (): void => {
       if (cookieUtils.getCookie(COOKIE_ROLE) === 'Admin' || cookieUtils.getCookie(COOKIE_ROLE) === 'Manager') {
           if (this.loginPage && this.loginPage !== '/') {
              window.location.href = this.loginPage;
           }
       }
    };
}      
You need to login to do this manipulation!