Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Touch UI dialog listeners

Avatar

Community Advisor

Hi,

I am trying to write a simple listener for Touch UI dialog. I have two text fields and when I open the dialog, I want to hide one of the text field. I have couple of articles and they just explained how to show some alerts/email validations. 

https://helpx.adobe.com/experience-manager/using/creating-touchui-validate.html

Below is my code:

(function ($, $document) {
    "use strict";
    $document.on("dialog-ready", function() {
        $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");
        var $form = $(this).closest("form.foundation-form"),
            title = $form.find("[name='./jcr:Heading']"),
            message, clazz = "coral-Button ";
        title.hide();
    });

})($, $(document));

But the hide is not working. Can anyone help me to resolve this issue?

Thanks.

4 Replies

Avatar

Level 10

As most of the logic when using Touch UI Dialog is JQuery - have you tried to hide the field using JQuery:

  $('#myfield').hide();

Avatar

Community Advisor

smacdonald2008 wrote...

As most of the logic when using Touch UI Dialog is JQuery - have you tried to hide the field using JQuery:

  $('#myfield').hide();

 

Hi Scott,

What is the value of #myfield? widget name? I have tried with the widget name and its not working. Also, I've created the client lib for validation under a specific component as mentioned in the above article. However, this validation is triggering/applying for all components.

Ex: If I put alert then this alert is popping up for every component.

Thanks.

Avatar

Level 10

I got this to work. Assume we have this dialog struc:

Now the TextField in the dialog is named title. I have used JQuery selector to get it and hide it:

    $document.on("dialog-ready", function() {

        $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");

         $("[name='./title']").hide() ; 

         

    });

 

Dialog looks like:

 

 

The text field is hidden, SO you can manipulate touch ui via standard JQuery 

Hope this helps. 

Avatar

Community Advisor

smacdonald2008 wrote...

I got this to work. Assume we have this dialog struc:

Now the TextField in the dialog is named title. I have used JQuery selector to get it and hide it:

    $document.on("dialog-ready", function() {

        $(window).adaptTo("foundation-ui").alert("Open", "Dialog now open, event [dialog-ready]");

         $("[name='./title']").hide() ; 

         

    });

 

Dialog looks like:

 

 

The text field is hidden, SO you can manipulate touch ui via standard JQuery 

Hope this helps. 

 

 

Yes Scott. This really helps. In the older versions of CQ, when we hide any widget, it hides the field label also. Can we do that in touch ui?

Another issue is that I've created this client lib under a specific component and category name of this client lib is: cq.authoring.dialog. But this client lib is loading in all the components. For example, if you see the above code, those alerts are coming in all the components. Is there any way to restrict this client lib only to a specific component?

Avatar

Level 1

Hi Scott,

Can we set the value for any field using this ? I want to set my date field to jcr creation date on dialog open.

Avatar

Community Advisor

Hi,

Yes you can set values also

e.g.

$("[name='./title']").val('new value') ;

Avatar

Level 10

Try either of the following-

title.setAttribute("style","display:none") OR $form.find("[name='./jcr:Heading']").hide()