Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

AEM Prefetch Client library while loading page

Avatar

Level 2

I have created the Following Component 

<?xml version="1.0" encoding="UTF-8"?>
    jcr:primaryType="nt:unstructured"
    jcr:title="Prefetch Config"
    sling:resourceType="cq/gui/components/authoring/dialog"
    mode="edit">
    <content
        granite:class="cq-dialog-content-page"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                granite:class="cq-siteadmin-admin-properties-tabs"
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                size="L">
                <items jcr:primaryType="nt:unstructured">
                    <pageclientlibs
                        cq:showOnCreate="{Boolean}false"
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Prefetch Configuration"
                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                        <items jcr:primaryType="nt:unstructured">
                            <column
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                <items jcr:primaryType="nt:unstructured">
                                    <csslibraries
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="CSS Client Libraries"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <clientlibs
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                composite="{Boolean}false">
                                                <field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                                    name="./cssLibraries">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <category
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"
                                                            emptyText="Client library category"
                                                            multiple="{Boolean}false"
                                                            name="./cssLibraries"
                                                            required="{Boolean}false">
                                                            <datasource
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="core/wcm/components/commons/datasources/clientlibrarycategories/v1"/>
                                                            <options
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>
                                                        </category>
                                                    </items>
                                                </field>
                                            </clientlibs>
                                        </items>
                                    </csslibraries>
                                    <jslibraries
                                        jcr:primaryType="nt:unstructured"
                                        jcr:title="JS Client Libraries "
                                        sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                        <items jcr:primaryType="nt:unstructured">
                                            <clientlibsJsHead
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                composite="{Boolean}false">
                                                <field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                                    name="./jsLibraries">
                                                    <items jcr:primaryType="nt:unstructured">
                                                        <category
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete"
                                                            emptyText="Client library category"
                                                            multiple="{Boolean}false"
                                                            name="./jsLibraries"
                                                            required="{Boolean}false">
                                                            <datasource
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="core/wcm/components/commons/datasources/clientlibrarycategories/v1"
                                                                type="js"/>
                                                            <options
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/form/autocomplete/list"/>
                                                        </category>
                                                    </items>
                                                </field>
                                            </clientlibsJsHead>
                                        </items>
                                    </jslibraries>
                                </items>
                            </column>
                        </items>
                    </pageclientlibs>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>
 
 
In above two multifield I will authored client Library value I want to write model to retrive in
 <div class="prefetch" data-css-1="" data-js-1 =""  
how can I write sling model to fetch the client library using category from project and then wretrive using multifield 
1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Teju_8 Please check the below simple post on how to read the multifield values in sling models and print it in sightly html

 

https://bimmisoi.blogspot.com/2020/07/aem-fetching-multifield-values-using.html

 

 

View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

@Teju_8 Please check the below simple post on how to read the multifield values in sling models and print it in sightly html

 

https://bimmisoi.blogspot.com/2020/07/aem-fetching-multifield-values-using.html

 

 

Avatar

Level 2
package com.etihad.eagcommons.core.models;


import java.util.ArrayList;
import java.util.List;

import javax.annotation.PostConstruct;

import org.apache.sling.models.annotations.Model;
import org.apache.sling.models.annotations.injectorspecific.SlingObject;
import org.osgi.resource.Resource;
import com.adobe.granite.ui.clientlibs.ClientLibrary;
import com.adobe.granite.ui.clientlibs.HtmlLibraryManager;
import com.adobe.granite.ui.clientlibs.LibraryType;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.apache.sling.api.scripting.SlingScriptHelper;
import org.apache.sling.models.annotations.DefaultInjectionStrategy;


@Model(adaptables = Resource.class, resourceType = "/apps/eag/eag-commons/components/content/prefetchconfig",
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL)

public class PrefetchConfigModel {
    private static final Logger log = LoggerFactory.getLogger(PrefetchConfigModel.class);

    public List<String> jsLibraries = new ArrayList<String>();
    public List<String> cssLibraries = new ArrayList<String>();

    @SlingObject
    private SlingScriptHelper slingScriptHelper;

    @PostConstruct
    protected void init() {
        HtmlLibraryManager clientlibmanager = slingScriptHelper.getService(HtmlLibraryManager.class);
        if (clientlibmanager != null) {
            String[] categoryArray = { "Client Library categories" };
            java.util.Collection<ClientLibrary> libs = clientlibmanager.getLibraries(categoryArray, LibraryType.JS,
                    false, false);
            for (ClientLibrary lib : libs) {
                String libPath = getClientLibPath(lib,LibraryType.JS);
                jsLibraries.add(libPath);
            }
            log.error("Getting Js Libraries");
           
            libs = clientlibmanager.getLibraries(categoryArray, LibraryType.CSS,
                    false, false);
            for (ClientLibrary lib : libs) {
                String libPath = getClientLibPath(lib,LibraryType.CSS);
                cssLibraries.add(libPath);
            }
            log.error("Getting css Libraries");
        }
    }

    private String getClientLibPath(ClientLibrary lib, LibraryType type) {
        String libPath = lib.getIncludePath(type);
        if(lib.allowProxy()) {
            libPath = libPath.replaceFirst("^/apps/", "/etc.clientlibs/");
        }
        return libPath;
    }
   
    public List<String> getJsLibraries() {
        return jsLibraries;
    }
   
    public List<String> getCssLibraries() {
        return cssLibraries;
    }

}
  I have written  sling model but I am not able to fetch all client library according to category 
      String[] categoryArray = { "Client Library categories" };
can you suggest logic I should write ?  
   
     


Avatar

Administrator

@Teju_8 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.



Kautuk Sahni

Avatar

Level 2

I understand how to retrieve multifield but I want to write logic that , in our project there are multiple client library I want to fetch according to category ? 

If we have given path in multifield then that client library should load