AEM Forms Table with Checkbox column | Community
Skip to main content
New Participant
July 22, 2022
Solved

AEM Forms Table with Checkbox column

  • July 22, 2022
  • 2 replies
  • 1889 views

Hi Guys,

 

I am trying to create a table with 2 columns.

First column as text and second with a Checkbox for selection of the rown in AEM forms.(Screenshot below)

Need to bind the value of the checkbox with a value so that I can determine what all rows are selected. I am able to bind the data with first column text but have no clue how to do it for checkbox.

 

Any help will be appreciated.

 

Thanks

 

 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by MorisMonk

I know that is possible but future I may need to display 2 more column. Then simple checkbox options will not work.


If you are looking to populate your table (using the API data), then you can set the checkboxes using something like following (very basic sample):

newRow = _Row1.addInstance();
newRow.checkbox1.items =["28="+28];
newRow.textbox1.value = "Sweden";

Going out (i.e. Submit) I believe you will only get the checkbox value if it is selected. Something like the following:

<Row1><checkbox1>28</checkbox1><textbox1>Sweden</textbox1></Row1>
<Row1><textbox1>USA</textbox1></Row1>

If your endpoint is smart enough, I guess it could determine that since there is no checkbox attribute then it is not selected, and already knows USA is id = 56.

Otherwise, (not ideal) you could use a hidden column field for the "id", and a hidden field for "selected".

2 replies

Mayank_Gandhi
Employee
July 22, 2022

@vidhyabhushanbahl If the no. of rows are fixed just iterate over the rows with fixed count, else use instance manager instanceCount method to first get no. of instances of rows and then iterate to see what all checkbox value is not null.

if you want to bind the repeatable rows to a schema then you need to have complex type in xsd

 

<xs:element maxOccurs="unbounded" name="panel1657620927921">
<xs:complexType>
<xs:sequence>
<xs:element name="tableItem11" type="xs:unsignedByte" />
</xs:sequence>
</xs:complexType>

 

https://developer.adobe.com/experience-manager/reference-materials/6-4/forms/javascript-api/Instance...

New Participant
July 22, 2022

Rows are dynamic. 

Let me explain the issue with an example.

My Rest API response is similar to this-

[
   {
      "id":28,
      "Title":"Sweden"
   },
   {
      "id":56,
      "Title":"USA"
   },
   {
      "id":89,
      "Title":"England"
   }
]

What I want to do is

Bind first Column - "Title" (TextBox) - Done easy.

Bind second column with "id"- Checkbox with value as id.

 

Challenge 1. How do I bind the value of "id" attribute in rest response with checkbox and don't display the able?

 

 

 

Mayank_Gandhi
Employee
July 22, 2022

@vidhyabhushanbahl What is the use case? To have checkbox with ID and textbox showing the title? 

Mayank_Gandhi
Employee
July 22, 2022

@vidhyabhushanbahl If the no. of rows are fixed just iterate over the rows with fixed count, else use instance manager instanceCount method to first get no. of instances of rows and then iterate to see what all checkbox value is not null.

if you want to bind the repeatable rows to a schema then you need to have complex type in xsd

 

<xs:element maxOccurs="unbounded" name="panel1657620927921">
<xs:complexType>
<xs:sequence>
<xs:element name="tableItem11" type="xs:unsignedByte" />
</xs:sequence>
</xs:complexType>

 

https://developer.adobe.com/experience-manager/reference-materials/6-4/forms/javascript-api/InstanceManager.html