Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Adding components into footer experience fragment

Avatar

Level 4

Hi All,

 

We have implemented a footer component which internally adds other components like image(logo), text, navigation, copyright etc using data-sly-resource in footer.html file. This footer.html file also have wrapper divs for each of this component and we have applied css to wrapper divs to create a proper structure of the footer component. 
We have added this footer component into Footer experience fragment. But client wants an ability to add any text or embed component into footer inside this Footer experience fragment. I can add component into footer on top of existing image or text component using + symbol(add component)  but when I refresh this footer XF I cant see this these component. I think this is becoz footer.html is overwriting footer XF. 

I tried removing footer component from XF and added individual components but I dont know how to achieve that html structure for footer like wrapper divs and applying css to them.

Does anyone have idea on how to implement this? 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@supriya-hande 

 

You mentioned that "footer.html" is affecting the display of the inserted components.

To confirm the same, I had requested you to cross-check via CRXDE, if the text component that was added, is visible in CRXDE as a node.

 

footer.html should only affect UI, not the persistence. Thus, please check following

- Did the dropped text component persist in repository via CRXDE?

- Any errors in logs when you drop the component or when you refresh the page?


Aanchal Sikka

View solution in original post

10 Replies

Avatar

Community Advisor

I don't know if I fully understood your question, but it sounds like you may need to add a container component within your footer component, that way, the author can add additional components as needed.

 

Take a look at the wknd site, and how the footer component is built for reference, in this Experience Fragment you have a component embedded as well as an empty responsive grid(container component) for extra components, which seems to me is what you are looking for.

 

I hope this helps.

Esteban666_0-1689785494883.png

 



Esteban Bustamante

Avatar

Community Advisor

Hello @supriya-hande 

 

If you need the ability to add image/text etc next to Footer component , then:

  1. create footer component image(logo), text, navigation, copyright etc using data-sly-resource.
  2. Update policy of the OOTB container component found in XF component.
    1. Allow Footer component
    2. Image component
    3. text component

This way the authors would be able to add an Image/text component next to footer.

 

 

If you need the ability to add image/text etc inside Footer component itself, then:

  • add a container inside Footer
  • Allow authors to add image/text to the container.

Aanchal Sikka

Avatar

Level 4

Hi @aanchal-sikka 

Thanks for your reply. I tried the second way. I want to add components inside footer component. I added container and tried adding text component but when I refresh XF, text component is getting removed from footer. I think footer.html code is overwriting component inside footer. Is there any other way..?

Thanks,

Supriya 

Avatar

Community Advisor

@supriya-hande 

 

When you say that the text component is removed. Is it removed from CRXDE as well? Or does it exist, but not visible in HTML?


Aanchal Sikka

Avatar

Level 4

@aanchal-sikka 

When I add text component in footer component which is added in XF and refresh that XF, its not visible. I can only see component those are added in footer.html by using data-sly-resource.

Avatar

Correct answer by
Community Advisor

@supriya-hande 

 

You mentioned that "footer.html" is affecting the display of the inserted components.

To confirm the same, I had requested you to cross-check via CRXDE, if the text component that was added, is visible in CRXDE as a node.

 

footer.html should only affect UI, not the persistence. Thus, please check following

- Did the dropped text component persist in repository via CRXDE?

- Any errors in logs when you drop the component or when you refresh the page?


Aanchal Sikka

Avatar

Level 4

@aanchal-sikka 

1. I can see the dropped text component is present in repository via CRXDE. See below. I added multiple components and I can see those

supriyahande_0-1689848579570.png

 

2. I checked logs and there is error below.

0.07.2023 15:41:58.325 *ERROR* [[0:0:0:0:0:0:0:1] [1689847918230] GET /content/experience-fragments/my-program/footer/footer-members.html HTTP/1.1] org.apache.sling.scripting.javascript.wrapper.ScriptableResource Unable to adapt object.

java.lang.ClassNotFoundException: [JavaPackage org.apache.sling.api.resource.ValueMap]

at org.apache.sling.commons.classloader.impl.ClassLoaderFacade.loadClass(ClassLoaderFacade.java:158) [org.apache.sling.commons.classloader:1.4.4]

at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)

at org.apache.sling.scripting.javascript.wrapper.ScriptableResource.jsFunction_adaptTo(ScriptableResource.java:298) [org.apache.sling.scripting.javascript:3.1.4]

at jdk.internal.reflect.GeneratedMethodAccessor204.invoke(Unknown Source)

at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

at java.base/java.lang.reflect.Method.invoke(Method.java:566)

at org.mozilla.javascript.MemberBox.invoke(MemberBox.java:126)

at org.mozilla.javascript.FunctionObject.call(FunctionObject.java:387)

at org.mozilla.javascript.optimizer.OptRuntime.call1(OptRuntime.java:32) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_getProperties_3(/libs/sling/sightly/js/internal/resource.js:31)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:63) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_Resource_4(/libs/sling/sightly/js/internal/resource.js:56)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.BaseFunction.construct(BaseFunction.java:359)

at org.mozilla.javascript.ScriptRuntime.newObject(ScriptRuntime.java:2505)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3._c_anonymous_2(/libs/sling/sightly/js/internal/sly.js:27)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3.call(/libs/sling/sightly/js/internal/sly.js)

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.addBinding(SlyBindingsValuesProvider.java:177) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.processBindings(SlyBindingsValuesProvider.java:134) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.ProxyAsyncScriptableFactory$ShadowScriptableObject.get(ProxyAsyncScriptableFactory.java:78) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.mozilla.javascript.ScriptableObject.getProperty(ScriptableObject.java:2269)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1514)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1507)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513._c_anonymous_1(/libs/wcm/foundation/components/page/headlibs.js:26)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513.call(/libs/wcm/foundation/components/page/headlibs.js)

at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:393)


I googled it "
Unable to adapt object" but this error was coming for older version when we use WCM components. I am not using WCM component.

 

Avatar

Level 4

hi @aanchal-sikka 

 

1. I can see those dropped text component and other components s persist in repository via CRXDE:

supriyahande_0-1689926362809.png

2. But I am getting exception in error log as below:
ERROR* [[0:0:0:0:0:0:0:1] [1689853598966] GET /content/experience-fragments/my-program/footer/footer-advisers.html HTTP/1.1] org.apache.sling.scripting.javascript.wrapper.ScriptableResource Unable to adapt object.
java.lang.ClassNotFoundException: [JavaPackage org.apache.sling.api.resource.ValueMap]
at org.apache.sling.commons.classloader.impl.ClassLoaderFacade.loadClass(ClassLoaderFacade.java:158) [org.apache.sling.commons.classloader:1.4.4]
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)
at org.apache.sling.scripting.javascript.wrapper.ScriptableResource.jsFunction_adaptTo(ScriptableResource.java:298) [org.apache.sling.scripting.javascript:3.1.4]
at jdk.internal.reflect.GeneratedMethodAccessor204.invoke(Unknown Source)
at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.base/java.lang.reflect.Method.invoke(Method.java:566)
at org.mozilla.javascript.MemberBox.invoke(MemberBox.java:126)
at org.mozilla.javascript.FunctionObject.call(FunctionObject.java:387)
at org.mozilla.javascript.optimizer.OptRuntime.call1(OptRuntime.java:32) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_getProperties_3(/libs/sling/sightly/js/internal/resource.js:31)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)
at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:63) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_Resource_4(/libs/sling/sightly/js/internal/resource.js:56)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)
at org.mozilla.javascript.BaseFunction.construct(BaseFunction.java:359)
at org.mozilla.javascript.ScriptRuntime.newObject(ScriptRuntime.java:2505)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3._c_anonymous_2(/libs/sling/sightly/js/internal/sly.js:27)
at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3.call(/libs/sling/sightly/js/internal/sly.js)
at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.addBinding(SlyBindingsValuesProvider.java:177) [org.apache.sling.scripting.sightly.js.provider:1.2.6]
at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.processBindings(SlyBindingsValuesProvider.java:134) [org.apache.sling.scripting.sightly.js.provider:1.2.6]
at org.apache.sling.scripting.sightly.js.impl.jsapi.ProxyAsyncScriptableFactory$ShadowScriptableObject.get(ProxyAsyncScriptableFactory.java:78) [org.apache.sling.scripting.sightly.js.provider:1.2.6]
at org.mozilla.javascript.ScriptableObject.getProperty(ScriptableObject.java:2269)
at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1514)

 

I googled this error: Unable to adapt object but this issue comes when we use wcm component and am not using any wcm component in footer
Any idea why this error is coming?

 

Avatar

Level 4

@aanchal-sikka 
1. I can see those dropped text component persist in repository via CRXDE?

supriyahande_0-1689926703769.png

 

but I am getting one exception in error logs once I refresh page:

0.07.2023 15:41:58.325 *ERROR* [[0:0:0:0:0:0:0:1] [1689847918230] GET /content/experience-fragments/my-program/footer/footer-members.html HTTP/1.1] org.apache.sling.scripting.javascript.wrapper.ScriptableResource Unable to adapt object.

java.lang.ClassNotFoundException: [JavaPackage org.apache.sling.api.resource.ValueMap]

at org.apache.sling.commons.classloader.impl.ClassLoaderFacade.loadClass(ClassLoaderFacade.java:158) [org.apache.sling.commons.classloader:1.4.4]

at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)

at org.apache.sling.scripting.javascript.wrapper.ScriptableResource.jsFunction_adaptTo(ScriptableResource.java:298) [org.apache.sling.scripting.javascript:3.1.4]

at jdk.internal.reflect.GeneratedMethodAccessor204.invoke(Unknown Source)

at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

at java.base/java.lang.reflect.Method.invoke(Method.java:566)

at org.mozilla.javascript.MemberBox.invoke(MemberBox.java:126)

at org.mozilla.javascript.FunctionObject.call(FunctionObject.java:387)

at org.mozilla.javascript.optimizer.OptRuntime.call1(OptRuntime.java:32) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_getProperties_3(/libs/sling/sightly/js/internal/resource.js:31)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:63) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_Resource_4(/libs/sling/sightly/js/internal/resource.js:56)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.BaseFunction.construct(BaseFunction.java:359)

at org.mozilla.javascript.ScriptRuntime.newObject(ScriptRuntime.java:2505)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3._c_anonymous_2(/libs/sling/sightly/js/internal/sly.js:27)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3.call(/libs/sling/sightly/js/internal/sly.js)

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.addBinding(SlyBindingsValuesProvider.java:177) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.processBindings(SlyBindingsValuesProvider.java:134) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.ProxyAsyncScriptableFactory$ShadowScriptableObject.get(ProxyAsyncScriptableFactory.java:78) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.mozilla.javascript.ScriptableObject.getProperty(ScriptableObject.java:2269)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1514)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1507)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513._c_anonymous_1(/libs/wcm/foundation/components/page/headlibs.js:26)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513.call(/libs/wcm/foundation/components/page/headlibs.js)

at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:393)


Such exception comes when we use wcm components but I am not using WCM component. Any idea which this error is coming?

 

Avatar

Level 4

 @aanchal-sikka 
1. I can see those dropped text component persist in repository via CRXDE?

supriyahande_0-1689926905764.png

 

but I am getting one exception in error logs once I refresh page:

0.07.2023 15:41:58.325 *ERROR* [[0:0:0:0:0:0:0:1] [1689847918230] GET /content/experience-fragments/my-program/footer/footer-members.html HTTP/1.1] org.apache.sling.scripting.javascript.wrapper.ScriptableResource Unable to adapt object.

java.lang.ClassNotFoundException: [JavaPackage org.apache.sling.api.resource.ValueMap]

at org.apache.sling.commons.classloader.impl.ClassLoaderFacade.loadClass(ClassLoaderFacade.java:158) [org.apache.sling.commons.classloader:1.4.4]

at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:521)

at org.apache.sling.scripting.javascript.wrapper.ScriptableResource.jsFunction_adaptTo(ScriptableResource.java:298) [org.apache.sling.scripting.javascript:3.1.4]

at jdk.internal.reflect.GeneratedMethodAccessor204.invoke(Unknown Source)

at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)

at java.base/java.lang.reflect.Method.invoke(Method.java:566)

at org.mozilla.javascript.MemberBox.invoke(MemberBox.java:126)

at org.mozilla.javascript.FunctionObject.call(FunctionObject.java:387)

at org.mozilla.javascript.optimizer.OptRuntime.call1(OptRuntime.java:32) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_getProperties_3(/libs/sling/sightly/js/internal/resource.js:31)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.optimizer.OptRuntime.callName(OptRuntime.java:63) [org.apache.servicemix.bundles.rhino:1.7.7.1_1]

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4._c_Resource_4(/libs/sling/sightly/js/internal/resource.js:56)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_resource_js_4.call(/libs/sling/sightly/js/internal/resource.js)

at org.mozilla.javascript.BaseFunction.construct(BaseFunction.java:359)

at org.mozilla.javascript.ScriptRuntime.newObject(ScriptRuntime.java:2505)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3._c_anonymous_2(/libs/sling/sightly/js/internal/sly.js:27)

at org.mozilla.javascript.gen._libs_sling_sightly_js_internal_sly_js_3.call(/libs/sling/sightly/js/internal/sly.js)

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.addBinding(SlyBindingsValuesProvider.java:177) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.SlyBindingsValuesProvider.processBindings(SlyBindingsValuesProvider.java:134) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.apache.sling.scripting.sightly.js.impl.jsapi.ProxyAsyncScriptableFactory$ShadowScriptableObject.get(ProxyAsyncScriptableFactory.java:78) [org.apache.sling.scripting.sightly.js.provider:1.2.6]

at org.mozilla.javascript.ScriptableObject.getProperty(ScriptableObject.java:2269)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1514)

at org.mozilla.javascript.ScriptRuntime.getObjectProp(ScriptRuntime.java:1507)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513._c_anonymous_1(/libs/wcm/foundation/components/page/headlibs.js:26)

at org.mozilla.javascript.gen._libs_wcm_foundation_components_page_headlibs_js_513.call(/libs/wcm/foundation/components/page/headlibs.js)

at org.mozilla.javascript.ContextFactory.doTopCall(ContextFactory.java:393)

Such exception comes when we use wcm components but I am not using WCM component. Any idea which this error is coming?