Best way to manage more fields in Interface

Having these many number of fields on a single form isn't a pleasant end User experience. It is less likely that user may have all that data with him while filling out a single form. Even if the user has all the information, it might happen halfway through the user navigates away from the screen, accidentally closes or refreshes the browser and whatever data he has filled might be lost.

As per the UX design guide, for requirements with large number of fields, Wizard design should be used to break up the long form into more manageable componets. Refer - docs.appian.com/.../ux_wizards.html for more information. You can make use of Wizard with side navigation bar that gives you more control over the appearance of the wizard navigation.

is there any tabular approach in appian that we can implement so that we can switch between tabs?

Did you look at the UX Design patterns as suggested, there are examples of both Wizard and Tab design patterns there?

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?

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.

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.