AEM Forms Table with Checkbox column

[vidhyabhushanbahl]

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

[Mayank__Gandhi]

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

[Mayank_Gandhi]

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

[vidhyabhushanbahl]

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]

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

[vidhyabhushanbahl]

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

[Mayank_Gandhi]

@vidhyabhushanbahl Why to use table here just set the checkbox dynamically using set options and align the component to show it vertically.

https://experienceleague.adobe.com/docs/experience-manager-learn/forms/adaptive-forms/choice-group-i...

[vidhyabhushanbahl]

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

[MorisMonk · Accepted solution]

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