Creating Repeatable Section Tabs

Section Tabs and Repeatable Sections

Now we know a way to organize form fields with sections (see Organize a Form with Sections). There are some more useful features with form sections. In the previous tutorial, you created a repeatable field that allows the user to add/remove fields dynamically. Similarly, sections can be repeatable, which allows the user to repeat a set of fields.

When a section is repeated, it becomes vertically long and the user has to scroll down to view the repeated elements. It’s okay if the number of fields is not so large but if you want the area to be compact, we can put a section in a tabbed container so that the user can easily switch tabs. Also, there is a field type called section_title and with it the user can set their own section title.

With a combination of these features, you can create a very powerful dynamic form.

Steps

  1. Include the library
  2. Extend the library class
  3. Define the setUp() method
  4. Define a section with custom settings
  5. Define fields that belong to the section
  6. Instantiate the extended class

Screenshot

Section Tabs and Repeatable Sections with Admin Page Framework

Include the library

The library file needs to be loaded.

Extend the library class

This time, we use APF_AdvancedSections for the class name.

Define the setUp() method

In the setUp() method, we define the admin pages that are going to be created. For that, we need to decide:

  1. the root page.
  2. the sub page title.
  3. the sub page slug.

The code will look like the following. As you might have guessed, we have to go through this process every time we create a page with Admin Page Framework. So you need to get used to it if you use the framework.

Define a section with custom settings

We are going to create a section that is repeatable and displayed in a tabbed box. For that, we need to specify the options in the section definition array with the keys of ‘section_tab_slug’ and ‘repeatable’.

The section_tab_slug key is to used to group multiple sections into a tabbed container. Say there are section A and section B and apply the same section tab slug to them, then they will be grouped. Here we just create one section but it will be repeatable so the number of sections will be multiple. That’s why we use the section_tab_slug setting.

To make a section repeatable, we set the repeatable argument and pass the value of true. That’s it.

Define fields that belong to the section

Next, we add fields to the section we just defined.

Notice that there is the sortable argument which make fields sortable, that is, you can set an order of the fields such as which item goes first and next.

Instantiate the extended class

Finally, we instantiate the class. Unless it is instantiated, it will do nothing.

Code

Try the code below and post comments if you get a problem.

Leave a Reply

Your email address will not be published. Required fields are marked *