Recently, I posted this query on Alapaca's Stack Overflow. However, considering their busy schedule and slow response rate, I am hopeful that someone else here can offer assistance with my question.
The issue at hand involves a table whose number of rows is determined by another element through a postRender script. Despite pushing values into the elements, I am unable to get them set properly. Below is the code snippet:
Schema
"required": false,
"properties": {
"study_group_radio": {
"enum": [
"2",
"3",
"4",
"5",
"6"
]
},
"study_group_table": {
"type": "array",
"required": false,
"items": {
"type": "object",
"properties": {
"study_group": {
"title": "Study Groups",
"type": "number",
"readonly": true
},
"dose": {
"title": "Dose",
"type": "string"
},
"route": {
"title": "Route",
"type": "string"
},
"doses": {
"title": "# Doses",
"type": "string"
},
"animals_main": {
"type": "string",
"title": "Animals Main"
},
"animals_recovery": {
"type": "string",
"title": "Animals Recovery"
}
}
}
}
}
Options
{
"type": "object",
"fields": {
"study_group_radio": {
"type": "radio",
"helper": "the number of selected will generate a table"
},
"study_group_table": {
"type": "table",
"id": "study_group_table",
"label": "New table",
"animate": true,
"hideNone": true,
"toolbarStyle": "button",
"actionbarStyle": "right",
"items": {
"type": "tablerow"
},
"hideToolbarWithChildren": true,
"datatables": {
"paging": false,
"lengthChange": false,
"info": false,
"searching": false,
"ordering": true,
"columns": [
{
"orderable": false,
"name": "actions",
"bSortable": false,
"sName": "actions"
}
],
"bLengthChange": false,
"bInfo": false,
"aoColumns": [
{
"orderable": false,
"name": "actions",
"bSortable": false,
"sName": "actions"
}
],
"bSort": true,
"bPaginate": false,
"bFilter": false
},
"dragRows": false,
"showActionsColumn": false,
"fields": {
"dose": {
"placeholder": "e.g. 1 mg/kg"
}
}
}
}
Postrender
control.childrenByPropertyId["study_group_radio"].on("change", function() {
var times = this.getValue();
var value =
control.childrenByPropertyId["study_group_table"].getValue(value);
if (value.length < times) {
for (var i = value.length; i < times; i++) {
console.log(i+1);
value.push({
"study_group": (i+1),
"dose": "",
"route": "",
"doses": "",
"animals_main": "",
"animals_recovery": ""
});
}
} else {
while (value.length > times) {
value.pop();
}
}
console.log(value.study_group);
control.childrenByPropertyId["study_group_table"].setValue(value);
});
I initially populated the table Options using the sample form builder. Unfortunately, I am facing challenges when manually inputting the code. Despite closely studying AlpacaJS's table documentation examples, what worked for others isn't working in my case!
Issues:
I am trying to automatically number the "study_group" column. While the postRender code correctly generates rows, they appear blank even after adding a value (i+1).
I am struggling to add placeholders using Alpaca. Currently, I have to manipulate the HTML manually after rendering. You can see my attempt on "dose" in Options.
Thank you for your help!