Hide or disable Touch UI dialog (asset) file upload | Community
Skip to main content
D
danc13675873
Level 2
December 30, 2018
Solved

Hide or disable Touch UI dialog (asset) file upload

  • December 30, 2018
  • 3 replies
  • 4484 views

Does anyone know the JS code required to hide or disable an (asset) file upload in a Touch UI dialog based on if a checkbox is ticked. I am loading the JS using a client library for the dialog.

                                        <items jcr:primaryType="nt:unstructured">
                                            <file
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                allowUpload="{Boolean}false"
                                                autoStart="{Boolean}false"
                                                class="cq-droptarget"
                                                fieldLabel="Image Asset"
                                                fileNameParameter="./fileName"
                                                fileReferenceParameter="./fileReference"
                                                mimeTypes="[image/gif,image/jpeg,image/png,image/webp,image/tiff]"
                                                multiple="{Boolean}false"
                                                name="./file"
                                                title="Upload Image Asset"
                                                uploadUrl="${suffix.path}"
                                                useHTML5="{Boolean}true"/>
                                            <imageFromLinkedPage
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                fieldDescription="When checked, populate the image with the linked page's thumbnail."
                                                text="Get image from linked page"
                                                name="./imageFromPage"
                                                value="{Boolean}true"
                                                uncheckedValue="{Boolean}false"
                                                checked="{Boolean}false"/>
                                        </items>
    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Ravi_Pampana

    Hi,

    Below is the sample code, using this we can disable and enable the browse option for image field. You can extend this as per your requirement.

    Add class "cq-dialog-checkbox-showhide" attribute to checkbox field. Class value can be any and update the js code accordingly.

    Add below code to js file and add category as below

    categories

    String[]

    cq.authoring.dialog

    //For checkbox changes in dialog

    $(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {

            disabledBrowse($(this));

        });

        //To check the value on initial load

         $(document).on("foundation-contentloaded", function(e) {

            // if there is already an inital value make sure the according target element becomes visible

            $(".cq-dialog-checkbox-showhide").each( function() {

                disabledBrowse($(this));

            });

        });

       

        function disabledBrowse(el) {

       

        var checked = el.prop('checked');

        if(checked) {

      

        $("input.coral-FileUpload-input").attr('disabled','disabled');

        }else {

      

        $("input.coral-FileUpload-input").removeAttr('disabled');

        }

         }

    3 replies

    smacdonald2008
    smacdonald2008
    Level 10
    December 31, 2018

    See Sreekanth Choudry Nalabotu blog here - he has many write ups on how to manipulate a component dialog using JQuery -- Experiencing Adobe Experience Manager - Day CQ: In the blog "Experiencing Adobe Experience Manger - Day CQ"

    Ravi_Pampana
    Community Advisor
    Ravi_PampanaCommunity AdvisorAccepted solution
    Community Advisor
    January 1, 2019

    Hi,

    Below is the sample code, using this we can disable and enable the browse option for image field. You can extend this as per your requirement.

    Add class "cq-dialog-checkbox-showhide" attribute to checkbox field. Class value can be any and update the js code accordingly.

    Add below code to js file and add category as below

    categories

    String[]

    cq.authoring.dialog

    //For checkbox changes in dialog

    $(document).on("change", ".cq-dialog-checkbox-showhide", function(e) {

            disabledBrowse($(this));

        });

        //To check the value on initial load

         $(document).on("foundation-contentloaded", function(e) {

            // if there is already an inital value make sure the according target element becomes visible

            $(".cq-dialog-checkbox-showhide").each( function() {

                disabledBrowse($(this));

            });

        });

       

        function disabledBrowse(el) {

       

        var checked = el.prop('checked');

        if(checked) {

      

        $("input.coral-FileUpload-input").attr('disabled','disabled');

        }else {

      

        $("input.coral-FileUpload-input").removeAttr('disabled');

        }

         }

      D
      danc13675873Author
      Level 2
      January 3, 2019

      Thanks Ravi!

      Terms & ConditionsAccessibility statement

      Loading footer...