Highlighted

Read property from parent node for touch ui component name for AEM6.3

srinivas_chann1

10-07-2019

Hi,

I have a similar issue described in http://aemconcepts.blogspot.com/2017/05/read-and-write-to-parent-node-from.html

where i can write to jcr: content from a component dialog but cannot read  the property from component dialog

my node structure is

jcr:content

+     Mainpar

+ ..  componentNode  [here the property name which reads property from  jcr node like ]

for example name = "../../jcrbasedProperty"

Works:- When submit the dialog the value in jcrbasedProperty  is getting saved in jcr:content

Problem:- The  same property is not getting retrieved when dialog is open in touch ui.

Please provide any sample code that i could use for touch ui field with

sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

Thanks

Replies

Highlighted

Arun_Patidar

MVP

11-07-2019

why are you saving properties in page node or other node. Save in the same node and retrieve wherever you want using java APIs.

If you want to save properties for page node then use page properties dialog.

What if there are two components in the same page and that would try to writes different values on same property?

Highlighted

srinivas_chann1

11-07-2019

We have this behavior already defined was part of classic UI and now i am converting that touch UI and facing this issue.Please let me know if there any solution to take from parent node with problem statement i mentioned

Thanks

Arun_Patidar

MVP

12-07-2019

Hi,

I think as part of migration you can change the startegy.

Anyways to work this -

You need to write custom js , on dialog load, makes ajax call to parent node e.g.(http://localhost:4504/content/AEM64App/en/_jcr_content/root/responsivegrid/text.json ) where property is save and extracted the property and fill the textfield.

Highlighted

Arun_Patidar

MVP

16-07-2019

Hi Srinivas,

i don't have any sample code but you need to do :

1. Create clientlibs of category cq.authoring.dialog

2. On dialog load get property and update dialog

(function(document, $) {

    "use strict";

    // when dialog gets injected

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

        // make ajax request to parent node to get property value

        var url = "http://localhost:4504/content/AEM64App/en/_jcr_content/root/responsivegrid/text.json";

        var propVal="";

        $.getJSON( url, function( json ) {

  propVal= json.propertyName;

});

        // update text box value

        $('#textfieldId').val(propVal);

    });

})(document, Granite.$);

Highlighted

srinivas_chann1

25-07-2019

I would want to restrict the ajax only to that particular component dialog if that is present

Else just adding a ajax call will trigger a call for every page even though the component is not present.

Is there  a way we can check the class using jquery . For example in dialog filed we add grainte:class:"croal-textfield-css"

How to validate if  only that class "croal-textfield-css" is present then we trigger ajax on "foundation-contentloaded"

I tried using

if ($(".croal-textfield-css").length > 0) {}

https://stackoverflow.com/questions/759631/jquery-how-to-check-if-the-element-has-certain-css-class-...

but shows length as 0 .How to overcome this problem

Highlighted

Arun_Patidar

MVP

25-07-2019

you can load this js for a particular components by adding clinetlibs to dialong using  extraClientlibs :

1. Create clientlibs of category cq.authoring.dialog.myCategory.ajax

2. Add below property to your dialog node

extraClientlibs        String          cq.authoring.dialog.myCategory.ajax

Highlighted

srinivas_chann1

28-07-2019

Thanks for the help.  I was able to resolve the issue based on  your inputs.

Step1:-

Component dialog details of the field

<Date

         jcr:primaryType="nt:unstructured"

         granite:class=".cq-dialog-field-filldata-parentnode-data"

        

         sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"

         granite:id="datecompId"

         displayedFormat="MMMM DD, YYYY hh:mm a"

         displayTimezoneMessage="{Boolean}true"

         type="datetime"

         fieldLabel="Date"

         name="../../releaseDate">

        </Date>

Step2:-

I created a ajax request based on

Send a Ajax request to servlet

var requestPathWithHtml = $(".foundation-content-path").data("foundationContentPath");

        var requestPath=requestPathWithHtml.replace(/\.[^/.]+$/, "");

  $.ajax({

            type: "GET",

            url: "/bin/requreidserveltpath",

  data:{"pagepath":requestPath},

  contentType: "application/json"

        }).success(function (res) {

$("#datecompId").val(res["releaseDate"]);

}