Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Component client lib not loading when called in workflow dialog participant step page

Avatar

Level 2

Hi,

I am new to AEM and using AEM 6.2

I created a component for touch UI, which has a checkbox (added  class="cq-dialog-checkbox-enabledisable" attribute) and  textbox (added class="cq-dialog-checkbox-enabledisable-target" atribute). I have added client lib to the hide/show textfield based on checkbox select and unselect. This works fine when i added the component to a page and tested.

I added touchUiDialogPath property /apps/sample/components/workflow/test/testlistener/cq:dialog and used the dialog in workflow  Dialog Participant Step. I started the workflow and in Dialog Participant Step CheckBox and TextField sowed up but TextField hide and shoe is not working. I noticed that my script itself did not get loaded when I did view source of the workflow page but script loaded for site/page. What is that I am missing here?

I see js files from etc, lib files getting loaded.

 

 

js code:


 /**
 * Extension to the standard checkbox component. It enables/disables  other components based on the
 * selection made in the checkbox.
 *
 * How to use:
 *
 * - add the class cq-dialog-checkbox-enabledisable to the checkbox element
 * - add the class cq-dialog-checkbox-enabledisable-target to each target component that can be enabled/disabled
 */
(function(document, $) {
    "use strict";

    // when dialog gets injected
    $(document).on("foundation-contentloaded", function(e) {
        // if there is already an inital value make sure the according target element becomes visible
        enableDisable($(".cq-dialog-checkbox-enabledisable", e.target));
    });

    $(document).on("change", ".cq-dialog-checkbox-enabledisable", function(e) {
        enableDisable($(this));
    });

    function enableDisable(el){
        el.each(function(i, element) {
            if ($(element).attr("type") === "checkbox"){
                if ($(element).prop('checked')){
                    //$('.cq-dialog-checkbox-enabledisable-target').enable();
                    $('.cq-dialog-checkbox-enabledisable-target').show();
                } else {
                    //$('.cq-dialog-checkbox-enabledisable-target').disable();
                    $('.cq-dialog-checkbox-enabledisable-target').hide();
                }
            }
        })
    }
})(document,Granite.$);

1 Accepted Solution

Avatar

Correct answer by
Level 9

Hi Nanda,

  Verify the client lib category & dependency. Should have cq.workflow

Thanks,

View solution in original post

3 Replies

Avatar

Correct answer by
Level 9

Hi Nanda,

  Verify the client lib category & dependency. Should have cq.workflow

Thanks,

Avatar

Level 2

MC Stuff wrote...

Hi Nanda,

  Verify the client lib category & dependency. Should have cq.workflow

Thanks,

 

Replaced categories="cq.authoring.dialog" with cq.workflow and added to dependencies as well but still its not working(my client lib is not loading)

Avatar

Level 2

Thanks MC with your input I searched OOTB sample and added cq.workflow.gui.inbox to category and it worked. I am searching for links to get a better understanding on OOTB category list to load scripts.