Expand my Community achievements bar.

SOLVED

AEM Forms Table with Checkbox column

Avatar

Level 3

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.

 

vidhyabhushanbahl_0-1658460087784.png

Any help will be appreciated.

 

Thanks

 

 

1 Accepted Solution

Avatar

Correct answer by
Level 5

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".

View solution in original post

8 Replies

Avatar

Level 1

@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...

 

 

Avatar

Employee Advisor

@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...

Avatar

Level 3

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?

 

 

 

Avatar

Employee Advisor

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

Avatar

Level 3

"To have checkbox with ID and textbox showing the title?"  - Yes, this is use case. I should be able determine what checkbox selected by the user.

 

 

Avatar

Level 3

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

Avatar

Correct answer by
Level 5

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".