Add Tabs To Form | PfJs.addTabsToForm(target, tabs)

PfJs.addTabsToForm(target, tabs)

This function enhances the organization of detail forms by segmenting them into tabbed sections. This method allows for a more streamlined user interface, making forms easier to navigate and manage by grouping related fields into distinct tabs.

Arguments

• target: The target variable from the On Render event, typically representing the jQuery DOM wrapper of the current screen. (Do not change the word target. Use it as is; it is not a placeholder to be replaced.)
• tabs: An array of objects, each representing a tab with its respective name and the fields it contains.

Usage

To use PfJs.addTabsToForm, provide the target form element and an array of tab objects. Each tab object should have a name key (the tab label) and a fields key (an array listing the names of fields to include in that tab).

Example:

Imagine a form that includes fields for title, category, date, text, and image. To organize these fields into three tabs ("General", "Detail", and "Other"), you would define each tab and its fields as follows:

PfJs.addTabsToForm(target, [
  {name: "General", fields: ["name", "job-title", "full-name","organization"]},
  {name: "Detail", fields: ["name","email-address", "phone-number","address","city","country","city","postal-code"]},
  {name: "Uploads", fields: ["file","photo"]},
  {name: "Empty Tab", fields: []}, // This tab currently has no fields assigned
  {name: "Other", fields: []}, // The 'Other' tab automatically includes any fields not assigned to previous tabs.
]);

The Last Tab

The last tab in the list will automatically contain any fields that are not explicitly included in the previous tabs. This ensures that all fields have a place within the tabbed interface.

The Blank Tab

If you wish to include an blank tab for future use or organizational purposes, ensure you add it before the last tab. Any tab placed last will automatically be populated with the remaining fields, as mentioned above.

This function call will dynamically create tabs within the specified form, making each tab visible only with its assigned fields. This arrangement can help users focus on specific subsets of data at one time, improving the overall form usability and aesthetic.

Example

This guide provides several tips and tricks to help you use this function effectively. Here are a few examples:

• How to display comments in a tab