Customize http://localhost:4502/aem/inbox in vanilla AEM 6.4instance

cquser1 05-06-2018

Hi All,

I have created a sample task , renamed the label appearing at the top [ex: from Complete to CustComplete, Re-assign to CustRe-assign etc].

I want to create a custom button[for now have just copied the existing ones and renamed as Custom] as seen in the screenshot below.

1501981_pastedImage_0.png

When I click on it, a pop-up should open up with say 'FileUpload' field and read only description field.On submitting that, it should hit a servlet. Right now, do not have detailed functionality, but this is to be achieved as part of POC.

Any thoughts/pointers/reference code on how to go about this will be really helpful.

Accepted Solutions (1)

Accepted Solutions (1)

Answers (9)

Answers (9)

cquser1 07-06-2018

Hi Arun,

Thanks a lot for your help and patience.

Able to get the custom dialog to show up on my custom button.

Once again, thanks a lot for all your help and patience.

cquser1 06-06-2018

Hi Arun,

Details as below :

In my apps folder have the below structure created.

1503471_pastedImage_1.png

The custom button properties are as below :

1503472_pastedImage_2.png

In my /apps/cq/inbox/clientlibs/js/inbox.item.actions.custom.js file haven't changed too many things, but just few things as seen in the screenshot as below :

1503473_pastedImage_3.png

My custom dialog that I wanted to show up in my custom button as below :

1503474_pastedImage_4.png

Those are the only things which I have changed, but it is erroring out in inbox.commons.dialog.js[when I debug it] and no console errors. Also, the dialog I have added for my custom button doesn't show up if I click on it.

Since I am not getting any console errors, not sure how to proceed further on this.

Any thoughts/pointers will be really helpful.

cquser1 06-06-2018

Hi Arun,

Thank you for your reply.

What I did was

1] Copy content of /libs/cq/inbox/gui/components/inbox/clientlibs/inbox/js/inbox.item.actions.completetask.js file in my clientlib folder under apps and changed few properties[corresponding to property value provided in custom button].

2] Have overlaid /libs/cq/inbox/content/inbox/jcr:content/actions/selection into /apps. Copied "completeTask" under this and few changes to certain properties, as seen in the screenshot in the previous post.

3] On debugging saw that the code is invoking /libs/cq/inbox/gui/components/inbox/clientlibs/commons/js/inbox.commons.dialog.js.

It is failing here for the custom button on debugging. No console errors that i could see.

Guess, some property on the custom button is causing issues, because the same code in inbox.commons.dialog.js works fine for other buttons. But not getting as to what is to be done.

Any thoughts/pointers/reference code on this will be helpful.

Arun_Patidar
MVP
05-06-2018

Hi,

inbox.commons.dialog.js just loads a dialog and appends it to the DOM.

you can also check /libs/cq/inbox/gui/components/inbox/clientlibs/commons/js/inbox.commons.dialog.js

What error you are getting error.log or browser console.

Can you make sure all the other property and everything is same like complete task.

Or you can just copy and create duplicate Complete Task and change things one by one like dialog then script(Servlet) and see where it is failing.

Thanks

Arun

cquser1 05-06-2018

Hi All,

Update as below :

1502229_pastedImage_1.png

I have created a custom button that is displayed [shown in the first post] and the above screenshot corresponds to that.

In my custom js /apps/cq/inbox/clientlibs/js/inbox.item.actions.custom.js[have copied the inbox.item.actions.completetask.js with some minor changes to refer to my custom button details], have referred it.

When I check for the working of other functionality say Complete or open actions it works, but for my custom action it fails in inbox.commons.dialog.js.

Not sure what is causing the issue.

Any thoughts/pointers/reference code on this will be helpful.

smacdonald2008 05-06-2018

THe issue of this type of request is it's not documented - overlaying AEM UI involves really reading the code and understanding what is going on.

cquser1 05-06-2018

Hi Arun,

Thank you for the pointers. So far, what I have done is

1] Overlay from /libs/cq/inbox/content to /apps/cq/inbox/content.

2] Have created custom dialog fields under /apps/cq/inbox/content/inbox/dialogs.

3] added custom button under /apps/cq/inbox/content/inbox/jcr:content/actions/selection.

4] created a clientlibs folder with same categories/dependencies(which is in libs) in  /apps/cq/inbox/clientlibs/js/inbox.item.actions.custom.js

Here I am trying to follow the other js files but not getting as to how to proceed further on this.

Any references/snippet/pointers will be helpful.

Arun_Patidar
MVP
05-06-2018

Hi,

you can take code reference of "Task Complete" action type, anyways you need to change dialog to add file upload type also.

Dialog - /libs/cq/inbox/content/inbox/dialogs/taskcompletedialog

ClientLibs - /libs/cq/inbox/gui/components/inbox/clientlibs/inbox/js/inbox.item.actions.completetask.js

Above dialog is created using granite types.

Thanks

Arun