AEM 6.2 Dashboard Screen For End Users

[Somnath_Mookerj]

Hi,

Can a screen be implemented on AEM 6.2 where the end user on a particular web page can drag-n-drop widgets on a placeholder from a set of widgets displayed on the left side navigation ?  The end user should also be able to add or remove a column or a widget from the website dashboard page.

Each widget is like a data driven component which is populated by REST JSON response coming from external system. Since external systems and data come from a different data center and domain than the one hosting AEM and they are not connected in any way because of various security reasons, hence server side calls are not possible. We are planning for Ajax calls from JS, which will be downloaded on page load on the end user's browser.

However, end of day, question remains:

1. Can such a drag-drop facility be provided on a website for end user using AEM ?

2. How to mitigate CORS problem for Ajax calls since the domains are different ? We need to manage PII data as well for which we are using SSL. We are thinking about: a) Cross Domain Ajax API, b) JSONP, c) Route AEM Dispatch Server via the Apache WebServer Proxy (httpd traffic) through which the JSON data also routes.

Thanks & Regards,

Som

[smacdonald2008]

"end user on a particular web page can drag-n-drop widgets on a placeholder from a set of widgets displayed on the left side navigation"

Sounds like you are describing how an author works in AEM on the Author instance. 

[Somnath_Mookerj]

Yes, you are spot on. It is like an end user authoring experience on the Website (AEM Publish). That's where I doubt the feasibility of such an implementation in AEM, but still want to make sure from the Adobe experts, in case you have an idea or if I am missing something here.

Thanks & Regards,

Som

[kautuk_sahni · Accepted solution]

Hi 

You can definitely do this.

I am not very clear with your use case, but i will help you with some examples so that you can fine tune it as per your need.

See these JavaScripts/Jquery plugins with demo:

Link:- http://jqueryui.com/droppable/

Link:- https://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html

Link:- http://jqueryui.com/draggable/

We can implement these in AEM. We can create a component by integration with these third party Jquery.

Link:- https://helpx.adobe.com/experience-manager/using/integrating-jquery-framework-cq.html

// Integrating the JQuery Framework into Adobe Experience Manager

I hope you can implement these as per your need. 

~kautuk

[boser87]

Hello Som,

where you able to implement your solution? Could you please share the approach for the sake of knowledge of the community?

In particular, where did you save the preferences of the end users about widgets and their positions? Where did you save them?