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.

As suggested by other practitioners the breadcrumb navigation pattern (Appian Wizards) would be the best fit for this type of form. Check the UI/UX styling guide for it. Also make sure that you don't add all the columns to a single CDT. That would make the form and process slower. Try to divide it into multiple CDTs.

If your CDT is hundreds of fields, that's a very bad approach that you will definitely need to correct.

You could look into various different improvements to the form to increase its readability.  The great thing is that you can do multiples of these at the same time, mix and match how you see fit.

Breadcrumbs, Tabs, Wizards, others have discussed.  You can also use a milestone component to achieve the same effect.  Especially with clickable milestones that allow you to return to previous sections of the form.  It might seem old and trite, but Appian recently gave it an extra design option with the vertical milestone.  These are all useful, maybe not all at once, for when you want to break the form up into larger chunks that clearly don't need to be filled out at the same time.  You ideally don't want more than 7 of these, so you're still looking at about 30 to 35 fields per milestone/tab/breadcrumb.

30 to 35 can still be way too much for a human to process all at once.

Now, INSIDE each large chunk, what can we do to break it down further?  We can use columns to separate some fields and condense the whole form to avoid scrolling.  That tends to confuse some users which fields are associated with which fields.  We can use Box Layouts or Card layouts to organize fields further.  That's especially helpful for putting a few fields in one column and demonstrating that they're separate from the fields on the next column.  For instance, if billing address were on column 1, and shipping address were on column 2, you could put those in box layouts to visually separate them and prevent users from mixing up addresses.  You could also add a check box to the bottom, in that example, so the user only has to fill out one of them and auto-populate the other.

Do you have fields that aren't mandatory in some situations, but are in others?  Do you have some that are disabled in certain cases and can only be used in certain other cases?  You can eliminate those completely from many users' experience by using progressive disclosure.  You use the showWhen input to hide them rather than disabled to keep them visible and taking up space.  Have an entire group of related fields that don't necessarily need to be filled out?  Put them all in the same collapsible Section Layout. 

You can even use progressive disclosure to hide entire collapsible sections until each of the required fields in the section you're displaying has a valid value, then collapse that section and open the next.  Even without using the collapsibility, you still shouldn't overlook the benefit you can get just using Sections to break up the visual clutter.  They say humans can focus well on between 5 to 7 things.  If you can visually group your 200 fields into groups of 5 to 7, even with just barely enough to allow the user to tune out the rest, you'll have a much better form.

Additionally, I would also add LOTS of controls users can activate to save their work all over that thing.  No one wants to put in 199 values, get called to a meeting, find out they got timed out when they get back, and have to start over from the beginning.  If you make it so that person in this nightmare situation gets to keep 180 of the 199, they will love you forever!