Form with groups of checkboxes and radio buttons

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 Sunil,

    I would like to ask few queries on this for better understanding of the scenario.

    1) Questions are stored in the DB?
    2) Questions will be same for all the document types?

    This can be achieved with Custom CDT. I have similar scenario and implemented it with Custom CDT.
  • 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
    ),
    }
    )
  • 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