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
Discussion posts and replies are publicly visible
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
Sachin