AEM Prefetch Client library while loading page

[Teju_8]

I have created the Following Component 

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    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 

[Saravanan_Dharmaraj · Accepted solution]

@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

[Teju_8]

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 ?  

[kautuk_sahni]

@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.

[Teju_8]

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