Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

I am attempting to concatenate an input text and a dropdown list, but I encountered an error. Below is my code:

Avatar

Level 3

this is my custom componant code for adabtive form 
.content.xml 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
jcr:primaryType="cq:Component"
component.name="Mohammed"
componentGroup="WKND Sites Project - Form"
sling:resourceSuperType="fd/af/components/guidefield"

/>

Mohammed.jsp 

<!-- customcomponent.html -->
<div data-sly-use.customcomponent="customcomponent.js">
<form action="#" method="post" data-sly-test="${customcomponent.submitted != true}">
<label for="inputName">Name:</label>
<input type="text" id="inputName" name="inputName" value="${customcomponent.name}" />

<label for="dropdown">Dropdown:</label>
<select id="dropdown" name="dropdown" data-sly-list="${customcomponent.dropdownOptions}" data-sly-test="${customcomponent.dropdownOptions != null}">
<option value="">Select an option</option> <!-- Default empty option -->
<option value="${item}" data-sly-test="${item == customcomponent.selectedOption}" selected>${item}</option>
<option value="${item}" data-sly-test="${item != customcomponent.selectedOption}">${item}</option>
<option value="New Option 1">New Option 1</option>
<option value="New Option 2">New Option 2</option>
<!-- Add more options as needed -->
</select>

<button type="submit" data-sly-test="${customcomponent.name != null && customcomponent.selectedOption != null}" data-sly-unwrap>Submit</button>
</form>

<div data-sly-test="${customcomponent.submitted == true}">
<p>Concatenated Value: ${customcomponent.concatenatedValue}</p>
</div>
</div>

 Mohammed.js

// customcomponent.js
"use strict";
use(function () {
var name = "";
var selectedOption = "";
var dropdownOptions = ["Option 1", "Option 2", "Option 3"];
var submitted = request.getMethod() === "POST";
var concatenatedValue = "";

if (submitted) {
name = request.getParameter("inputName");
selectedOption = request.getParameter("dropdown");
concatenatedValue = name + " " + selectedOption;
}

return {
name: name,
selectedOption: selectedOption,
dropdownOptions: dropdownOptions,
submitted: submitted,
concatenatedValue: concatenatedValue
};
});

The error 
Submit error.png
 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

The error suggests that you are unable to save the "wcmmode" property in "/content/forms/af/new-test-for-tooltip". I don't see any reference in your code that indicates such behavior. This implies that this behavior is inherited from the definition in your component.

With the attribute: sling:resourceSuperType="fd/af/components/guidefield"

I would recommend isolating the issue by removing this inheritance. Additionally, you need to investigate why this behavior (storing the property in that location) is not permitted. There might be permission issues or other factors contributing to this problem.



Esteban Bustamante

View solution in original post

1 Reply

Avatar

Correct answer by
Community Advisor

The error suggests that you are unable to save the "wcmmode" property in "/content/forms/af/new-test-for-tooltip". I don't see any reference in your code that indicates such behavior. This implies that this behavior is inherited from the definition in your component.

With the attribute: sling:resourceSuperType="fd/af/components/guidefield"

I would recommend isolating the issue by removing this inheritance. Additionally, you need to investigate why this behavior (storing the property in that location) is not permitted. There might be permission issues or other factors contributing to this problem.



Esteban Bustamante