Expand my Community achievements bar.

SOLVED

Embedded Adaptive Form in external webpage doesn't load clientlibs

Avatar

Level 4

I referred to the adobe documentation https://experienceleague.adobe.com/docs/experience-manager-64/forms/adaptive-forms-basic-authoring/e... to embed an adaptive form in an external webpage hosted outside of AEM: The form is loading however, the associated clientlibs are not loading on the webpage and I can see errors like - '/etc.clientlibs/fd/af/runtime/clientlibs/toggles.lc-7eb9f7fc74e166c421a752303c78f41f-lc.min.js 404 (File not found)'.

 

Any idea/pointers on how to load the form styles would be helpful.

 

Regards,

Manpreet

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

@manpreetk908 

We may have to narrow down the issue first:

1. Is it an issue with this theme ONLY? You can check if the standalone adaptive form renders as expected with this theme? 

If this is a custom theme then you need to configure the AEM forms container component to use this theme.

2. If the standalone form renders fine, please inspect any Forms component on the external webpage to check what CSS is loaded if it's not the expected clientlib? I suspect there could be a conflict here.

 

View solution in original post

6 Replies

Avatar

Correct answer by
Employee Advisor

@manpreetk908 

We may have to narrow down the issue first:

1. Is it an issue with this theme ONLY? You can check if the standalone adaptive form renders as expected with this theme? 

If this is a custom theme then you need to configure the AEM forms container component to use this theme.

2. If the standalone form renders fine, please inspect any Forms component on the external webpage to check what CSS is loaded if it's not the expected clientlib? I suspect there could be a conflict here.

 

Avatar

Level 4

Thanks for your prompt reply @Pulkit_Jain_. We are not using any custom theme and the form is created using OOTB form components which are rendering as expected in AEM. Also, I am just trying this using a simple Python HTTP server and I don't suspect any CSS-related conflict.

 

The problem is that the embedding of form using AJAX seems to be just sending plain form content on the external web page without respecting any styles and edit rules that we have defined.

 

Regards,

Manpreet

Avatar

Employee Advisor

Manpreet

We may have to review the configs, and how you're embedding the AF in the page. Please share the embedded code and the HAR logs for the attempt. Also, what is the version of AEM Forms you're using?

For a quick turnaround, please raise a support ticket so that we can connect over a screen share session.

Avatar

Level 4

I am using AEM Forms as cloud service using the below AJAX code on the external webpage-

 

<script>
var options = {path:"http://localhost:4503/content/forms/af/si", dataRef:"", themepath:"", CSS_Selector:".customafsection"};
var loadAdaptiveForm = function(options){
if(options.path) {
var path = options.path;
path += "/jcr:content/guideContainer.html";
$.ajax({
url : path ,
type : "GET",
data : {
wcmmode : "disabled"
},
async: false,
success: function (data) {
if(window.$ && options.CSS_Selector){
$(options.CSS_Selector).html(data);
}
},
error: function (data) {
// any error handler
}
});
} else {
if (typeof(console) !== "undefined") {
console.log("Path of Adaptive Form not specified to loadAdaptiveForm");
}
}
}(options);

 

</script>

 

I have added CORS configuration to enable data share between servers.

 

Regards,

Manpreet

Avatar

Employee Advisor

@manpreetk908 

Doesn't seem to be an issue with the AJAX code as that's what we use OOTB.

If you're seeing this issue specifically for a Forms as a cloud service instance then could you raise a support ticket for further investigation?

Don't see any cloud-specific document for this implementation so this needs to be checked further.

 

Avatar

Level 2

@manpreetk908 Did you configured reverse proxy (as explained in below link) in your Python HTTP server. This resolves your CSS/Theme loading issue when you embed AF in external website

https://experienceleague.adobe.com/docs/experience-manager-64/forms/adaptive-forms-basic-authoring/e... 

 

ProxyPass /content https://<AEM_Instance>/content
ProxyPass /etc https://<AEM_Instance>/etc
ProxyPass /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# CSRF Filter
ProxyPass /libs/granite/csrf/token.json https://<AEM_Instance>/libs/granite/csrf/token.json

ProxyPassReverse /etc https://<AEM_Instance>/etc
ProxyPassReverse /etc.clientlibs https://<AEM_Instance>/etc.clientlibs
# written for thank you page and other URL present in AF during redirect
ProxyPassReverse /content https://<AEM_Instance>/content

 

thanks

Sudharsan