Embedded Adaptive Form in external webpage doesn't load clientlibs

[manpreetk908]

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

[Pulkit_Jain_ · Accepted solution]

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

[manpreetk908]

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

[Pulkit_Jain_]

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.

[manpreetk908]

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

[Pulkit_Jain_]

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

[Sudharsan_Selv1]

@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