How to load a clientlib during page creation using editable templates in AEM 6.5?

[Rajumuddana]

Hi All,

I have a  simple requirement, during page creation using an editable template, I need to show/hide fields based dropdown values, I tried

1. Using extraClientlibs at page component dialog level- not working, as the clientlibs would road on page render but not during page creation.
2. Overlayed /apps/wcm/core/content/sites/createpagewizard/jcr:content added extraClientlibs to that node, still failed,                                  
3. Used global clientlib category (cq.authoring.dialog) to my custom clientlib and expected to load on page creation, but still no luck.

Is there any way to achieve this?

Thanks,

Raju.

[lukasz-m]

Hi @Rajumuddana,

Please overlay following path:

/apps/wcm/core/content/sites/createpagewizard/jcr:content/head/clientlibs

and in clientlibs node in categories prop add your custom clientlib.

I was able to include my custom clientlib using above approach, without any issues.

Here are some screen shots

[Vishal_Anand]

Hi @Rajumuddana , You can always leverage below approach. This will work even when you try to keep custom control on how to load clientlibs. e.g. If you want to lazy load, preload, etc.

- Override head.html from the base template

- Modify the logic to load clientlibs at the page level with required business logic

This is flexible solution without overriding any OOTB functionality. Your other logic of loading Global clientlibs and page policy driven clientlibs will remain intact.

There is another interesting workaround if you want to avoid code dependency and drive it via Template editor page policy. You can add text field in page policy for adding custom html snippet. The code from text field can be injected directly to your body.html of the base template. In this way, whenever you need to add custom snippet (CSS/JS), you can add it via Template editor itself avoiding code dependency.

Hope this answers your query.

[Rajumuddana · Accepted solution]

Hi @Vishal_Anand , @lukasz-m ,

Thanks for you replies.

It seems there is a simple way to include custom clientlibs in page component dialog

<custom-clientlibs
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/includeclientlibs"
        categories="custom.show.hide.page.properties"/>

I did add this node in my dialog/tab, then i see my clientlib file is loading on create also.

Please take a look.

Thanks,

Raju.