Highlighted

Retrieving Multifield variables via JS-use API - AEM 6.2+

ryuatnorcal

21-09-2017

Hello Community!

I have a question about Multifield variables.

Previous post, I could make Multifield on my dialog with tutorial (Creating an AEM HTML Template Language 6.3 component that uses a Multifield )

Now, I'm lost track of how to get those variable via JS-use API.

I have following structure in my multifield

1305541_pastedImage_0.png

multifield

1306403_pastedImage_1.png

field

1306404_pastedImage_2.png

layout

1306405_pastedImage_3.png

items

1306406_pastedImage_4.png

column

1306407_pastedImage_5.png

items

1306408_pastedImage_6.png

text

1306409_pastedImage_7.png

id

1306410_pastedImage_8.png

in my js file (subMenu.js)

1306411_pastedImage_9.png

in the html

1306415_pastedImage_11.png

as test variables I have following set up

1306416_pastedImage_12.png

So I was expected to obtain JSON object that contain both text and id.

I tried one from js api and the other uses properties.<propertiy_name>

However, neither of them return blank.

I think it should be similar to retrieving regular form variable.

so I assume properties.get() method or some similar method should obtain the object . (but I'm still learning AEM development so I might wrong)

If you know how to get those variables, Please help me solve this

Thank you for your time!

Ryu

Replies

Highlighted

smacdonald2008

22-09-2017

Using Java is a better approach for this use case - why are you trying to use JavaScript when WCMUsePojo is a much better way to proceed when reading values that an AEM author entered into a Multifield?

Using Java - you can use Object-Oriented Programming techniques that let you set objects as you read the MF values.

Highlighted

smacdonald2008

22-09-2017

This method in Java lets you read the values in the MF and set a List that is read in HTL

private List<TouchMultiBean> setMultiFieldItems() {

@SuppressWarnings("deprecation")

JSONObject jObj;

try{

String[] itemsProps = getProperties().get("myUserSubmenu", String[].class);

if (itemsProps == null) {

   

    LOGGER.info("PROPS IS NULL") ;

}

if (itemsProps != null) {

for (int i = 0; i < itemsProps.length; i++) {

jObj = new JSONObject(itemsProps[i]);

TouchMultiBean menuItem = new TouchMultiBean();

String title = jObj.getString("title");

String link = jObj.getString("link");

String flag = jObj.getString("flag");

menuItem.setTitle(title);

menuItem.setLink(link);

menuItem.setFlag(flag);

submenuItems.add(menuItem);

}

}

}catch(Exception e){

LOGGER.error("Exception while Multifield data {}", e.getMessage(), e);

}

return submenuItems;

}

Highlighted

ryuatnorcal

22-09-2017

Thank you @smacdonald2008

I thought JS-USE API and Java API are doing the same thing.

I just curious, our project has done by JS-USE API, Is it okay to mix with Java and JS API ?

Also I noticed that crx de does not quite handle Java well. so is that mean I need to set up Eclipse ?

Ryu

Highlighted

Ratna_Kumar

MVP

22-09-2017

Yes, I agree with Scott..Please use Java for creating Multifields. Java is the best way to create using WCMUsePojo.

~Ratna

Highlighted

smacdonald2008

22-09-2017

Yeah - do not write Java in CRXDE - bad idea - use Eclipse.

Never mix up WCMUSEPOJO and JS API. I recommend using either Sling Models or WCMUsePojo for HTL compnent development.

Now not all HTL components even need a Java backend. You can read the dialog values from HTL directly - see this:

Scott's Digital Community: Creating a custom Image Text component for Experience Manager 6.3

This component was created without using Java at all.

However - when using HTL - you should know how to use Java and compile it and deploy to AEM as an OSGi bundle. See this article and you can watch the video that shows you everything to get this Getting Started HTL component up and running:

Scott's Digital Community: Creating an AEM HTML Template Language component that uses the WCMUsePojo...