Dynamic tabs

How it works

Dynamic tabs are tabs that load content in AJAX requests. Once the user clicks on the tab heading, the page does not reload but the content of the respective tab loads in AJAX request.

Source files

• lib/amd/src/dynamic_tabs.js
• lib/amd/src/local/repository/dynamic_tabs.js
• lib/classes/external/dynamic_tabs_get_content.php
• lib/classes/output/dynamic_tabs.php
• lib/classes/output/dynamic_tabs/base.php
• lib/db/services.php
• lib/templates/dynamic_tabs.mustache

How to use dynamic tabs

First of all we need to create a tab class file for each tab that we need, extending lib/classes/output/dynamic_tabs/base.php.

These tab classes need to include these 4 methods in order to work:

• export_for_template returns the data we export to the template
• get_tab_label returns the tab title
• is_available checks the tab permission and returns true/false that will enable/disable the individual tab
• get_template returns the path to the tab template file

<?php 
class tab1 extends base {

    /**
     * Export this for use in a mustache template context.
     *
     * @param renderer_base $output
     *
     * @return stdClass
     */
    public function export_for_template(renderer_base $output) {
        $content = (object)[];
        $content->customtext = 'Tab 1 content example';
        return $content;
    }

    /**
     * The label to be displayed on the tab
     *
     * @return string
     */
    public function get_tab_label(): string {
        return 'Tab 1';
    }

    /**
     * Check permission of the current user to access this tab
     *
     * @return bool
     */
    public function is_available(): bool {
        // Define the correct permissions here.
        return true;
    }

    /**
     * Template to use to display tab contents
     *
     * @return string
     */
    public function get_template(): string {
        return 'tool_componentlibrary/dynamictabs_tab1';
    }
}
 ?>

Then we need to create the templates that each get_template method will call.

Finally, to add dynamic tabs to our page, we just need to call all the previously created tabs, and pass the attributes needed in each tab.

These attributes will be stored as “data attributes” in the DOM and can be also used inside our tab classes using get_data method (for example to check permissions in is_available).

<?php 
    $tabs = [
        new tab1(['demotab' => 'Tab1', 'reportid' => $reportid]),
        new tab2(['demotab' => 'Tab2']),
    ];
    echo $OUTPUT->render_from_template('core/dynamic_tabs', (new dynamic_tabs($tabs))->export_for_template($OUTPUT));
 ?>

Example