Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.

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

Avatar

Level 8

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

10 Replies

Avatar

Community Advisor

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?



Arun Patidar

Avatar

Level 8

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

Avatar

Community Advisor

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.



Arun Patidar

Avatar

Level 8

Hi,

Do you have any sample code for same.Which i could use would be helpful??

Thanks

Avatar

Community Advisor

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.$);



Arun Patidar

Avatar

Level 8

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

Avatar

Community Advisor

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



Arun Patidar

Avatar

Level 8

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"]);

}

Avatar

Level 1

Hey Srinivas

Can you tell me what do you have exactly in -

url: "/bin/requreidserveltpath",

I don't think this is a standard url.