Best way to manage more fields in Interface

Hello All,

I have an requirement where more than 200 fields should be there in the Form. Please suggest which approach will be good to proceed with.

Thanks.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • hi Gavin, yes i checked the patterns, but it was not helpful as i wanted an interface where a form needs to be there with more than 200 fields. i know it wont look good to have that much fields in a form but  was looking for a solution where i can accommodate  that much fields in multiple tabs , so that it can become more user friendly. Could you please let me know if you have any other solution to implement this?

  • 0
    Certified Lead Developer
    in reply to gopalk0003

    load(
      local!tab: 1,
      a!formLayout(
        label: "Form",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: "Tab 1",
                        align: "CENTER",
                      )
                    },
                    style: if(local!tab = 1, "ACCENT", "STANDARD"),
                    link: a!dynamicLink(
                      value: 1,
                      saveInto: local!tab
                    )
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: "Tab 2",
                        align: "CENTER"
                      )
                    },
                    style: if(local!tab = 2, "ACCENT", "STANDARD"),
                    link: a!dynamicLink(
                      value: 2,
                      saveInto: local!tab
                    )
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: "Tab 3",
                        align: "CENTER"
                      )
                    },
                    style: if(local!tab = 3, "ACCENT", "STANDARD"),
                    link: a!dynamicLink(
                      value: 3,
                      saveInto: local!tab
                    )
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: "Tab 4",
                        align: "CENTER"
                      )
                    },
                    style: if(local!tab = 4, "ACCENT", "STANDARD"),
                    link: a!dynamicLink(
                      value: 4,
                      saveInto: local!tab
                    )
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!cardLayout(
                    contents: {
                      a!richTextDisplayField(
                        value: "Tab 5",
                        align: "CENTER"
                      )
                    },
                    style: if(local!tab = 5, "ACCENT", "STANDARD"),
                    link: a!dynamicLink(
                      value: 5,
                      saveInto: local!tab
                    )
                  )
                }
              )
            }
          ),
          a!columnsLayout(),
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  choose(
                    local!tab,
                    /* Tab 1 Fields here, can be replaced by separate Interface Rule */
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Tab 1 Text Field"                          
                            ),
                            a!paragraphField(
                              label: "Tab 1 Paragraph Field"
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!dropdownField(
                              label: "Tab 1 dropdown",
                              choiceLabels: {1,2,3},
                              choiceValues: {1,2,3},
                              placeholderLabel: "1"
                            ),
                            a!radioButtonField(
                              label: "Tab 1 Radio Button",
                              choiceLabels: {"True", "False"},
                              choiceValues: {1,2}
                            )
                          }
                        )
                      }
                    ),
                    /* Tab 2 Fields here, can be replaced by separate Interface Rule */
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Tab 2 Text Field"                          
                            ),
                            a!paragraphField(
                              label: "Tab 3 Paragraph Field"
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!dropdownField(
                              label: "Tab 2 dropdown",
                              choiceLabels: {1,2,3},
                              choiceValues: {1,2,3},
                              placeholderLabel: "1"
                            ),
                            a!radioButtonField(
                              label: "Tab 2 Radio Button",
                              choiceLabels: {"True", "False"},
                              choiceValues: {1,2}
                            )
                          }
                        )
                      }
                    ),
                    /* Tab 3 Fields here, can be replaced by separate Interface Rule */
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Tab 3 Text Field"                          
                            ),
                            a!paragraphField(
                              label: "Tab 3 Paragraph Field"
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!dropdownField(
                              label: "Tab 3 dropdown",
                              choiceLabels: {1,2,3},
                              choiceValues: {1,2,3},
                              placeholderLabel: "1"
                            ),
                            a!radioButtonField(
                              label: "Tab 3 Radio Button",
                              choiceLabels: {"True", "False"},
                              choiceValues: {1,2}
                            )
                          }
                        )
                      }
                    ),
                    /* Tab 4 Fields here, can be replaced by separate Interface Rule */
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Tab 4 Text Field"                          
                            ),
                            a!paragraphField(
                              label: "Tab 4 Paragraph Field"
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!dropdownField(
                              label: "Tab 4 dropdown",
                              choiceLabels: {1,2,3},
                              choiceValues: {1,2,3},
                              placeholderLabel: "1"
                            ),
                            a!radioButtonField(
                              label: "Tab 4 Radio Button",
                              choiceLabels: {"True", "False"},
                              choiceValues: {1,2}
                            )
                          }
                        )
                      }
                    ),
                    /* Tab 5 Fields here, can be replaced by separate Interface Rule */
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Tab52 Text Field"                          
                            ),
                            a!paragraphField(
                              label: "Tab 5 Paragraph Field"
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!dropdownField(
                              label: "Tab 5 dropdown",
                              choiceLabels: {1,2,3},
                              choiceValues: {1,2,3},
                              placeholderLabel: "1"
                            ),
                            a!radioButtonField(
                              label: "Tab 5 Radio Button",
                              choiceLabels: {"True", "False"},
                              choiceValues: {1,2}
                            )
                          }
                        )
                      }
                    )
                  )
                }
              )
            }
          )
        },
        buttons: a!buttonLayout(
          primaryButtons: {
            a!buttonWidget(
              label: "Submit",
              submit: true,
              style: "PRIMARY"
            )
          },
          secondaryButtons: {
            a!buttonWidget(
              label: "Cancel",
              value: true,
              saveInto: ri!cancel,
              submit: true,
              style: "NORMAL",
              validate: false
            )
          }
        )
      )
    )
    

    See the attached code snippet with 5 tabs, basically you can use card layouts with links and choose function that could closely resemble the tab layout. You can then enforce validations on submit button if you need user to complete all tabs, etc. This is just an idea if you need to have tab layout on your form, ideal solution should be creating a form wizard so as to handle more fields.