Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

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

Avatar

Level 8

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.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi,

I tried above steps, for me I can see the dialog.

Screen Shot 2018-06-06 at 11.52.04 PM.png

Didn't change anything.

Where are you facing issue?



Arun Patidar

View solution in original post

13 Replies

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 8

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.

Avatar

Level 10

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.

Avatar

Level 8

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.

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 8

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.

Avatar

Community Advisor

Ok, I'll check and let you know.

Thank

Arun



Arun Patidar

Avatar

Correct answer by
Community Advisor

Hi,

I tried above steps, for me I can see the dialog.

Screen Shot 2018-06-06 at 11.52.04 PM.png

Didn't change anything.

Where are you facing issue?



Arun Patidar

Avatar

Level 1
/libs/cq/inbox/content/inbox is granite:InternalArea and

Avatar

Level 1
Hi Arun /libs/cq/inbox/content/inbox is granite:InternalArea and

Avatar

Level 1
Hi Arun, /libs/cq/inbox/content/inbox is granite:InternalArea and shouldn't be extended or overlay as per Adobe Documentation.

Avatar

Level 8

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.

Avatar

Level 8

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.