Integrate third party Js / CSS/HTML on a AEM page

Avatar

Avatar

Krisgum

Avatar

Krisgum

Krisgum

18-11-2016

Hi  gurus, 

Ima trying to tackle a use case where a different team creates a app/widget which comprises of some js/CSS/HTML. This widget has to be displayed on a AEM page.

 

I do not want to go via the route of iframe so thinking of other possibilities. One approach I'm inclined to is ask the third party team to upload the artefact combining full JS CSS and HTML in some shared location. From AEM we pull down this artifact and just refer it on a page via custom AEM component. ( by referring to path where the artifact is downloaded in repository .. may be DAM)

 

Has any one tried similar implementation before ?or do you see any other better approaches ? Greatly appreciate for guiding me towards right direction

 

Cheers

Replies

Avatar

Avatar

PuzanovsP

MVP

Avatar

PuzanovsP

MVP

PuzanovsP
MVP

19-11-2016

Hi,

If you do consider bootstrap custom html, css and js.

Then you would find these results & much more [1] [2]

[1] http://help-forums.adobe.com/content/adobeforums/en/experience-manager-forum/adobe-experience-manage...

[2] https://github.com/smithstone-oss/aem-bootstrap

Regards,

Peter

Avatar

Avatar

Krisgum

Avatar

Krisgum

Krisgum

19-11-2016

Thanks for your reply. I'm not sure if my the above mentioned links help me in my case. Above principles seems good for creating layout container components. 

What I'm trying to achieve is to create a widget container like component  which just leverages third party j s,  CSS and HTML located from dam and embed that widget on a AEM content page. 

The widget here is but a self contained angular app and an example of that can be a service locator app which shows all service stations in a particular city. 

Please do let me know if I have overlooked and missed your point. 

Cheers

Avatar

Avatar

PuzanovsP

MVP

Avatar

PuzanovsP

MVP

PuzanovsP
MVP

19-11-2016

While possible, embedding .html and css as well as js from DAM does not sound right.

Benefit's from AEM you get once you start building components and templates.

In your case 'service locator app' would be just an AEM component that 'leverages third party js, CSS and HTML'.

It should not be a problem to add third party js/css either as resource from different domain or component owned client library.

Yes, it might take you a bit longer than uploading data to DAM, but it would give you benefits or allow someone else who would adopt your code understand what's happening just by looking at component rather then trying to understand how you hacked you third party data into DAM.

Regards,

Peter