How to include clientlibs in experience fragment in AEM?

Avatar

Avatar
Validate 1
Level 3
Anderson_Hamer
Level 3

Likes

13 likes

Total Posts

56 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile

Avatar
Validate 1
Level 3
Anderson_Hamer
Level 3

Likes

13 likes

Total Posts

56 posts

Correct reply

0 solutions
Top badges earned
Validate 1
Ignite 5
Ignite 3
Ignite 1
Give Back 5
View profile
Anderson_Hamer
Level 3

21-06-2021

I would need load set of clientlibs in experience fragment in order to make tth component work, for example, I want to load bootstrap 3.2 version and some custom clientlibs in experience fragment. If it is page, we go to page properties and  add whatever clientlibs that is needed and if it is editable template, we will add the clientlibs in page policy of the template. But in experience fragment I could not see any place to add clientlibs. Can you guys tell me how to add clientlibs in experience fragment

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile

Avatar
Establish
MVP
BrianKasingli
MVP

Likes

644 likes

Total Posts

606 posts

Correct reply

239 solutions
Top badges earned
Establish
Ignite 1
Give Back 5
Give Back 3
Give Back 10
View profile
BrianKasingli
MVP

21-06-2021

@Anderson_Hamer,

An experience fragment, XF, can be created with the same editable template structure. This means that when you are on your target XF page, clicking on the drop-down menu from the top left author header nav, you should see the "edit the template" button. From the template editor, you can edit the policies, and include your client libraries, like you should for a page.

BrianKasingli_0-1624328766010.png

 

Answers (3)

Answers (3)

Avatar

Avatar
Boost 3
Level 1
soibimmi
Level 1

Likes

4 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile

Avatar
Boost 3
Level 1
soibimmi
Level 1

Likes

4 likes

Total Posts

3 posts

Correct reply

0 solutions
Top badges earned
Boost 3
Boost 1
View profile
soibimmi
Level 1

22-06-2021

Either add it using edit template(policies) or by adding it in the customheaderlibs.html of your template

Avatar

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

44 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile

Avatar
Boost 5
Level 7
Ritesh_M
Level 7

Likes

179 likes

Total Posts

142 posts

Correct reply

44 solutions
Top badges earned
Boost 5
Boost 3
Boost 1
Applaud 5
Affirm 1
View profile
Ritesh_M
Level 7

21-06-2021

Hi @Anderson_Hamer ,

 

Below is what you need to achieve it-

 

1. In your project editable template structure just change sling:resourceType to project specific xfpage component.

 

sling:resourceType = myproject/components/structure/page/xfpage

 

editable-template.png

 

 

2. Now this xfpage component can inherit the OOTB xfpage, 'cq/experience-fragments/components/xfpage'

 

 

editable-template-structure.png

 

 

3. Add your clientlib in customheaderlibs.html

 

Cheers!

Avatar

Avatar
Boost 25
Level 3
ibishika
Level 3

Likes

30 likes

Total Posts

29 posts

Correct reply

3 solutions
Top badges earned
Boost 25
Affirm 3
Boost 10
Boost 5
Give Back
View profile

Avatar
Boost 25
Level 3
ibishika
Level 3

Likes

30 likes

Total Posts

29 posts

Correct reply

3 solutions
Top badges earned
Boost 25
Affirm 3
Boost 10
Boost 5
Give Back
View profile
ibishika
Level 3

21-06-2021

The template using which you are creating the experience fragment should be pointing to some template type which in turn is extended from some component. Find the template type and from that find the component to which it's pointed to. In that component you can add the clientlib.