Read out and use node parameters from other components via JS Use API

[Former Community Member]

Hi! 

my current task is to read out the properties set in a component and use these values in another component:

I created a common component for some settings like date format or some translations that should be used in other components that are also used on that page.
The user should add another component to that page and the settings made before are being used inside this new component.
For example: If we have a setting for a date format in the settings component this format replaces the standard date format in all other used related components.
Storing these settings works properly via dialog.

But when I try to use an JS approach like:
var newNodePath = "/content/path/to/the/page/jcr:content/settings/"; // existing path
var existingComponentResource = resourceResolver.getResource(newNodePath);
returnObj.translationVenue = existingComponentResource.properties("venueTranslation");
the system returns an org.apache.sling.scripting.sightly.SightlyException saying it can't find the function properties.

I'm not able to get the stored values.

I've also tried the Java way - although I'm on beginner level here.
In this case I fail at integrating the .java file into the component HTML via <sly data-sly-use.settings="Settings" />
Even though the Java file is in the right directory the system throws an error: ...cannot be correctly instantiated by the Use API
 

Where is my mistake?
Any idea how I can solve this (ideally with Java Script)?

Thanks and best regards
Sebastian

[Former Community Member]

Attached Java File.

[Daniel_H__A__Li]

Hi, Sebastian.

As far as I know, Resource doesn't have a method called "properties". I believe you can use getValueMap and access the result as an associative array...

Have you tried?

var newNodePath = "/content/path/to/the/page/jcr:content/settings/"; // existing path var existingComponentResource = resourceResolver.getResource(newNodePath); var props = existingComponentResource.getValueMap(); // or .valueMap returnObj.translationVenue = props.get("venueTranslation"); // or props["venueTranslation"]

Regards,

Daniel.

REESG wrote...

But when I try to use an JS approach like:

var newNodePath = "/content/path/to/the/page/jcr:content/settings/"; // existing path
var existingComponentResource = resourceResolver.getResource(newNodePath);
returnObj.translationVenue = existingComponentResource.properties("venueTranslation");
the system returns an org.apache.sling.scripting.sightly.SightlyException saying it can't find the function properties.

[Former Community Member]

Hi Daniel,

many thanks for your response.

I've tried the ValueMap approach before and tried it again today in several variants:

Using the getValueMap() function returns this error message:
"org.apache.sling.scripting.sightly.SightlyException: org.mozilla.javascript.EcmaError: TypeError: Cannot find function getValueMap in object /content/www/en-eu/about/events2/jcr:content/eventSettings."
This sounds strange to me as the function should be available.

Using .valueMap returns this error:
"org.apache.sling.scripting.sightly.SightlyException: org.mozilla.javascript.EcmaError: TypeError: Cannot read property "jcr:focusText" from undefined"
This sounds like the path is incorrect, but I've copied it from the CRXDE Lite bar: "/content/www/en-eu/about/events2/jcr:content/eventSettings"

I tried to get properties from other nodes with the same result.

Here is an real code example of the JS file (all irrelevant parts excluded):
"use strict";
use(function(){
    var eventList = {};
    var resourceResolver = resource.getResourceResolver();
    var newNodePath = "/content/www/en-eu/about/events2/jcr:content/eventSettings";
    var existingComponentResource = resourceResolver.getResource(newNodePath);
    // Variant function:
    // var props = existingComponentResource.getValueMap(); // or .valueMap
    // eventList.translationFocus = props.get("jcr:focusText"); // or props["venueTranslation"]
    // Variant value:
    var props = existingComponentResource.valueMap;
    eventList.translationFocus = props["jcr:focusText"];
    return eventList;
});

Do you have any idea what's wrong here?

Thanks and best regards
Sebastian

[smacdonald2008]

Try getting a ValueMap from Java. Also - learn how to use WCMUsePojo with HTL. I recommend looking at:

http://scottsdigitalcommunity.blogspot.ca/2016/07/creating-aem-html-template-language.html

There is also a video that shows you how to hook into WCMUsePojo when writing an HTL component.  

[Former Community Member · Accepted solution]

Thanks for your replies.

After a lot of trial & errors I've found a JSP solution that provide the respective values:

<%@ page import="com.day.cq.commons.jcr.JcrUtil, com.day.cq.wcm.api.WCMMode, org.apache.sling.api.resource.ResourceUtil, org.apache.sling.api.resource.ResourceResolver" %>
<%@ include file="/libs/foundation/global.jsp"%>
<%
String resourcePath = "/path/to/settings";
Resource res = resourceResolver.getResource(resourcePath);
Node node = resource.adaptTo(Node.class);
properties = res.adaptTo(ValueMap.class);
String translateOne = properties.get("jcr:translationOne", (String) null);
String translateTwo = properties.get("jcr:translationTwo", (String) null);
%>

Cheers!