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.

How to modify action of Create button?

Avatar

Level 4

Hi Friends,

I want to modify action of the Create button when I create a page content. After input the content for the fields on the form, the admin user will click on the Create button to save the content. I want ta call an action by Jquery before any other action (before save action).

How to do that?

Thanks you so much,

BienHV

8 Replies

Avatar

Community Advisor

Hi,

you need to write javascript in clientlibs with category granite.ui.coral.foundation.addon.coral2 and register on click event on Create button. In event code stop propagating and do your stuff then propagated to execute next events.

You can find about events and events propagation on internet.

I did something similar when user wants to create workflow then it checks for pages if page is already in workflow  or not.

https://forums.adobe.com/thread/2380697



Arun Patidar

Avatar

Level 4

Hi Arun Patiadar,

Thank you for your help. Could you help me the solution ideas to do this question How to display Saving when click the Create button if not finish?

Avatar

Community Advisor

Hi,

You can disabled Create button once clicked and enable it again as soon as page created and OOTB popup displayed.

in popup there are two buttons, open and done. on click of any button you can enabled create button again. Thats how you can prevent duplicate page creation.



Arun Patidar

Avatar

Community Advisor

Below code should work:

Clientlib category - granite.ui.coral.foundation

/* JS Code  to disable create button*/

(function(document, $) {

  $( document ).ready(function() {

        console.log( "ready!" );

        var formSelector = "form.cq-siteadmin-admin-createpage";

        var selector = "form.cq-siteadmin-admin-createpage .foundation-layout-wizard2-header .coral-Panel button[type=submit]";

        var selectorBtn = "coral-dialog.coral-Dialog.coral-Dialog--success.is-open>div.coral-Dialog-wrapper>coral-d ialog-footer>button";

       

        $(formSelector).on('submit', function() {

            $(selector).attr("disabled", "disabled");

            console.log("button disabled");

        });

        $("body").on('click', selectorBtn, function() {

            $(selector).removeAttr("disabled");

            console.log("button enabled");

        });

    });

})(document, Granite.$);



Arun Patidar

Avatar

Level 4

Thanks Arun Patidar,

I created a clientlib with category granite.ui.coral.foundation. But how to call it to run when I create page?

Avatar

Community Advisor

It'll be called automatically because granite.ui.coral.foundation clientlibs already being called when creating page.



Arun Patidar

Avatar

Level 4

Thank you for your help.

I test some app it work fine. But I have one app it work with wrong. The granite.ui.coral.foundation call after Create finish. I don't know what happen after click Create button. It very slow. I need the granite.ui.coral.foundation run before action create. I tried debugger in the code and put the script for call in some other category. But it doesn't work before Create action.

Do you have any idea for that?

Thank you so much,

BienHV

Avatar

Community Advisor

Hi,

May be there is custom event already written, can you please enable preserve log in browser console and put some alerts in code to check the sequence or on load you can put some log to confirm if file is already loaded.



Arun Patidar