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

[cquser1]

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.

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.

[arunpatidar]

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

[cquser1]

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.

[smacdonald2008]

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]

Hi All,

Update as below :

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.

[arunpatidar]

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]

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.

[arunpatidar]

Ok, I'll check and let you know.

Thank

Arun

[arunpatidar · Accepted solution]

Hi,

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

Didn't change anything.

Where are you facing issue?

[del05405]

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

[del05405]

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

[del05405]

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

[cquser1]

Hi Arun,

Details as below :

In my apps folder have the below structure created.

The custom button properties are as below :

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 :

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

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]

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.