Sub-section (nesting collapsible sections)

[ghost]

Please could you look into the possibility to allow subsections or nested collapsible sections. If this were available I would write some CSS to be able to have left subsection and right subsection to allow a much tighter admin page. An example of this can be seen here in the screenshot below on how I would use it. Sub pages to open a full list of tabbed sections. Each tabbed section to have collapsible sub sections.

With screens getting bigger and bigger these days I can make use of some good CSS media queries to allow for these sub sections to sit side by side, and smaller screens to be stacked. This would produce a very smart looking options page utilising as much of the available screen size available.

With Admin Page Framework and the ability to be able to nest like that I believe I can reproduce the screenshot below quite easily.

[michaeluno]

The saved options array structure currently looks like this.

array(
    'section_a' => array(
        'field_a' => 'value a', 
        'field_b' => 'value b', 
        ...
    ),
    'section_b' => array(
        'field_a' => 'value a', 
        'field_b' => 'value b', 
        ...
    ),  
    ..
)

This is hard to change as there are hook(action and filter) names such as validation_{section id}_{field id}. Only to display particular sections inside a selected section without reflecting the structure in the saved option array, it is still hard to code but I guess it's not impossible.

To use that functionality, maybe a sections argument can be introduced.

array(
    'section_id'        => 'my_section_id',
    'sections'          => array( 'section_a', 'section_b', 'section_c' ),
    'title'             => __( 'My Section', 'admin-page-framework-demo' ),
),

I cannot guarantee when this is implemented. If you need this really soon, email me. The address is written in the commit log.

[ghost]

Apologies for the delayed response, has been a whirlwind week. the sections array looks easy to follow and understand. I am still in the phase of building out all the tabbed sections and sub sections (nested sections). For now I have just added comment blocks above where I am wanting to add the new sections argument. I am most likely not needing this in the next 2 weeks.

I am happy that this project is flourishing, and will continue to donate to this development since I hope the end product that I am building will make money in the end run, in which case the donations would still continue. This framework is actually far superior to a few of the dominant ones out there.

[ghost]

Hi Michael, Is this idea possible on the radar? Am looking forward to putting this option into great use.

[michaeluno]

Yes but I cannot guarantee when it is implemented.

As the suggested functionality deals with the options structure, it is not that easy. At least, it won't be done unless the #158 is finished. That one will be a preparation change for nested fields. Nested sections will be after implementing nested fields. So it will be a long way to go.

Having said that, to just display sections in tabs without touching the options structure, it is not that a big deal. You just need to insert a list element with sections titles before the framework form sections output and call the jQuery tabs method.

[ghost]

Thank you for taking the time to reply. Would the method you have described provide me the options to create the layout that I have shown in the first posting?

[michaeluno]

I think so. Basically it is the same as the layout of the built-in section tabs. Still you would have to style the vertical tabs by yourself though. If you need a code spinet for it, you may create a new topic about it as it will be a different issue.

[ghost]

Thanks Michael, as for the vertical tabs, I have done that part already. The part I am struggling on is to create the nested sections and have those open close using your special button you made. This would be great if it is possible to do the way you have mentioned. I will create a new topic. "temporary nested sections"

[michaeluno]

This is ready to be tested in the 3.7.0b branch. Download.

How to Use

Set nested section definitions in the content argument of the parent section.

$oFactory->addSettingSections(    
    'my_page_slug', // the target page slug                
    array(
        'section_id'        => 'parent_section',
        'title'             => __( 'Nesting Sections', 'admin-page-framework-loader' ),
        'content'           => array(
            array(
                'section_id'    => 'nested_section_a',
                'title'         => __( 'Nested Section A', 'admin-page-framework-loader' ),                                                
            ),                                
            array(
                'section_id'    => 'nested_section_b',
                'title'         => __( 'Nested Section B', 'admin-page-framework-loader' ),
                'content'       => array(
                    array(
                        'section_id'    => 'nested_section_b_a',
                        'title'         => __( 'Nested Section B of A', 'admin-page-framework-loader' ),
                    ),                            
                    array(
                        'section_id'    => 'nested_section_b_b',
                        'title'         => __( 'Nested Section B of B', 'admin-page-framework-loader' ),
                    ),                                                    
                ),
            ),
            array(
                'section_id'    => 'nested_section_c',
                'title'         => __( 'Nested Section C', 'admin-page-framework-loader' ),
            ),                     
        ),
    )
);   

To add fields to nested sections, set an array of section path. If you want to add a field to a section whose ID is nested_section_a that belongs to parent_section, set an array like array( 'parent_section', 'nested_section_a' ) to the section_id argument of the field definition array.

$oFactory->addSettingFields(
    array( 'parent_section', 'nested_section_a', ), // the target section ID - pass dimensional keys of the section
    array(
        'field_id'      => 'text_in_nested_section',
        'title'         => __( 'Text', 'admin-page-framework-loader' ),
        'description'   => __( 'Added to a nested section.', 'admin-page-framework-loader' ),
        'type'          => 'text',
        'repeatable'    => true,
        'sortable'      => true,
    ),
    array(
        'field_id'      => 'color_in_nested_section',
        'title'         => __( 'Color', 'admin-page-framework-loader' ),
        'type'          => 'color',
        'repeatable'    => true,
        'sortable'      => true,
    )
);

The example can be accessed via Dashboard -> Demo -> Advanced Usage -> Nesting. The code can be found in /example/admin_page/nesting.

Let me know if it works.

@cmwwebfx I'm not sure if you are still interested in this but feedback would be appreciated.

[ghost]

This is fantastic Michael. I didn't get notified of this update from 14 days ago. I only saw it being closed off. Apologies not for responding sooner on this. I can test this next week.

I see what you have done instead of nesting collapsible sections is make nested tabbed sections. Is it possible to nest collapsible sections of options rather than nested tabbed options?

[michaeluno]

@cmwwebfx In this example, collapsible sections are nested under tabbed sections. So it is possible. The live example can be accessed via Dashboard -> APF Demo -> Advanced Usage -> Nesting. I'm not sure if you are referring to something different.

[ghost]

Ahh I see it now. The image was not clear that each tab has collapsible sections in each one.