Touch UI dialog listeners

[Singaiah_Chintalapudi]

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.

[smacdonald2008]

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

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

[Singaiah_Chintalapudi]

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.

[smacdonald2008]

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. 

[Singaiah_Chintalapudi]

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?

[rasleena1527058]

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.

[arunpatidar]

Hi,

Yes you can set values also

e.g.

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

[infotechzoneoff]

Thanks Arun Very Nice Solution

[Kunal_Gaba_]

Try either of the following-

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