Form with groups of checkboxes and radio buttons

Question

Hi, 
 What’s the best way to design a screen for the below requirement: 
 1. A list of document types must be displayed as checkboxes. 
 2. On selection of a checkbox (document type), one or more Boolean questions must be displayed that a user can answer (radio buttons/ checkboxes will suffice for this) 
 3. If no document types are selected the no additional questions must be displayed. 
 4. All the selected document types and it’s respective additional questions/answers Must be grouped as a dictionary/CDT. 
 Example: 
 [•] Document - 1 
     Is document complete? 
     (•) Yes ( ) No 
 [ ] Document - 2 
 [•] Document- 3 
 Is document Validated? 
     ( ) Yes (•) No 
 Regards, 
 Sunil Zacharia

Arpit Bhargava · Answer

Hi Sunil, 
 
Firstly you can store the values in the database 
Then create three radio button with single option in it. When you are selecting the radio button and on the basis of the questions you can show the another condition 
 
with( 
 local!isDocumentCompleted_bool, 
 local!isDocumentValidated_bool, 
 { 
 a!radioButtonField( 
 choiceLabels: "Document 1", 
 choiceValues: 1, 
 value: ri!documentType_int, 
 saveInto: ri!documentType_int 
 ), 
 a!radioButtonField( 
 label: "Is Document Complete?", 
 choiceLabels: { 
 "Yes", 
 "No" 
 }, 
 choiceValues: { 
 true, 
 false() 
 }, 
 value: local!isDocumentCompleted_bool, 
 saveInto: local!isDocumentCompleted_bool, 
 showWhen: tointeger( 
 ri!documentType_int 
 ) = 1 
 ), 
 a!radioButtonField( 
 choiceLabels: "Document 2", 
 choiceValues: 2, 
 value: ri!documentType_int, 
 saveInto: ri!documentType_int 
 ), 
 
 a!radioButtonField( 
 choiceLabels: "Document 3", 
 choiceValues: 3, 
 value: ri!documentType_int, 
 saveInto: ri!documentType_int 
 ), 
 a!radioButtonField( 
 label: "Is Document Validated?", 
 choiceLabels: { 
 "Yes", 
 "No" 
 }, 
 choiceValues: { 
 true, 
 false() 
 }, 
 value: local!isDocumentValidated_bool, 
 saveInto: local!isDocumentValidated_bool, 
 showWhen: tointeger( 
 ri!documentType_int 
 ) = 2 
 ), 
 } 
)

Sachin · Answer

Hi sunilz , 
 Please find below code snippet 
 load(
 local!documentTypes: {
 {
 documentTypeId: 1,
 documentName: "Document Type 1"
 },
 {
 documentTypeId: 2,
 documentName: "Document Type 2"
 },
 {
 documentTypeId: 3,
 documentName: "Document Type 3"
 }
 },
 local!checkList: {
 {
 checkListId: 1,
 question: "Is document complete?"
 },
 {
 checkListId: 2,
 question: "Is document Validated?"
 },
 {
 checkListId: 3,
 question: "Is document complete?"
 }
 },
 local!checkListResponse: {
 {
 documentTypeId: 1,
 documentResponse: toboolean(
 null
 ),
 checkListId: 1,
 checkListResponse: toboolean(
 null
 )
 },
 {
 documentTypeId: 2,
 documentResponse: toboolean(
 null
 ),
 checkListId: 2,
 checkListResponse: toboolean(
 null
 )
 },
 {
 documentTypeId: 3,
 documentResponse: toboolean(
 null
 ),
 checkListId: 3,
 checkListResponse: toboolean(
 null
 )
 }
 },
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: a!gridLayout(
 label: "",
 labelPosition: "ABOVE",
 headerCells: {
 a!gridLayoutHeaderCell(
 label: "Documents"
 ),
 a!gridLayoutHeaderCell(
 label: "",
 showWhen: contains(
 toboolean(
 index(
 local!checkListResponse,
 "documentResponse",
 null
 )
 ),
 true()
 )
 ),
 a!gridLayoutHeaderCell(
 label: "",
 showWhen: contains(
 toboolean(
 index(
 local!checkListResponse,
 "documentResponse",
 null
 )
 ),
 true()
 )
 )
 },
 columnConfigs: {
 a!gridLayoutColumnConfig(
 width: "DISTRIBUTE"
 )
 },
 rows: a!forEach(
 items: local!checkListResponse,
 expression: {
 with(
 local!showAdditionalDetails: and(
 contains(
 toboolean(
 index(
 local!checkListResponse,
 "documentResponse",
 null
 )
 ),
 true()
 ),
 toboolean(
 fv!item.documentResponse
 ) = true()
 ),
 local!blank: and(
 contains(
 toboolean(
 index(
 local!checkListResponse,
 "documentResponse",
 null
 )
 ),
 true()
 ),
 isnull(
 toboolean(
 fv!item.documentResponse
 )
 )
 ),
 a!gridRowLayout(
 contents: {
 a!checkboxField(
 choiceLabels: displayvalue(
 index(
 fv!item,
 "documentTypeId",
 null
 ),
 index(
 local!documentTypes,
 "documentTypeId",
 null
 ),
 index(
 local!documentTypes,
 "documentName",
 null
 ),
 null
 ),
 choiceValues: {
 true
 },
 value: toboolean(
 fv!item.documentResponse
 ),
 saveInto: {
 fv!item.documentResponse,
 a!save(
 fv!item.checkListResponse,
 null
 )
 }
 ),
 a!textField(
 readOnly: true(),
 value: displayvalue(
 index(
 fv!item,
 "checkListId",
 null
 ),
 index(
 local!checkList,
 "checkListId",
 null
 ),
 index(
 local!checkList,
 "question",
 null
 ),
 null
 ),
 showWhen: local!showAdditionalDetails,
 align: "RIGHT"
 ),
 a!textField(
 readOnly: true(),
 showWhen: local!blank
 ),
 a!radioButtonField(
 choiceLabels: {
 true(),
 false()
 },
 choiceValues: {
 true(),
 false()
 },
 choiceLayout: "COMPACT",
 value: toboolean(
 fv!item.checkListResponse
 ),
 saveInto: fv!item.checkListResponse,
 showWhen: local!showAdditionalDetails
 ),
 a!textField(
 readOnly: true(),
 showWhen: local!blank
 )
 },
 id: fv!index
 )
 )
 }
 ),
 selectionSaveInto: {},
 validations: {},
 shadeAlternateRows: false,
 borderStyle: "LIGHT"
 )
 ),
 a!columnLayout(
 contents: a!textField(
 readOnly: true()
 )
 )
 }
 )
) 
 Hope this helps 
 Regards, 
 Sachin