Form with groups of checkboxes and radio buttons

Certified Lead Developer

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

Parents
  • 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

  • 0
    Certified Lead Developer
    in reply to Sachin
    Thanks Sachin. Nice and clean solution.
Reply Children
No Data