Tabs in module config page

[regesh]

Is it possible to create tabs for settings in module?

[szabesz]

Out of the box it is not possible. You might want to check out the settings page of AdminOnSteroids from @tpr to see a well organized page with loads of options.

[Robin S]

You could group some config fields inside a fieldset and set it to collapsed.

$fieldset = $this->modules->get("InputfieldFieldset");
$fieldset->collapsed = Inputfield::collapsedYes;
// add some fields to $fieldset

 

[regesh]

12 hours ago, Robin S said:

You could group some config fields inside a fieldset and set it to collapsed.

$fieldset = $this->modules->get("InputfieldFieldset");
$fieldset->collapsed = Inputfield::collapsedYes;
// add some fields to $fieldset

 

And how to add them via api in module.config file?

[kixe]

On 10.12.2016 at 10:39 AM, regesh said:

Is it possible to create tabs for settings in module?

With a little experience in PW: Yes it is.

Have a look at 'JqueryWireTabs' module. There is a small readme file. Check out this.
Furthermore you need to instantiate 'WireTabs' via JavaScript.

 

[netcarver]

@kixe Thanks for that!

[kongondo]

Yesterday I tested what @kixe said and it worked...to some extent. I could get the tabs but their content (i.e. all but the first tab's) were not getting loaded until one reloaded the page. I didn't have time to investigate further so left it at that. Basically, you would need to do three things:

1. In your module's getModuleConfigInputfields method, initialise WireTabs module. It is a static method so you would need:

wire('modules')->get('JqueryWireTabs');

2. Include the JavaScript that initiates WireTabs client-side: For instance, if you had that code in your NameOfYourModule.js, you could do this in your getModuleConfigInputfields :

$dir = wire('config')->urls->ProcessModuleName;// whatever your module is called. Here we assume a process module
wire('config')->scripts->add($dir . 'ProcessModuleName.js');// or whatever file you have your JS in, e.g. config.js

The code in your .js file for your Tabs:

$(document).ready(function(){
	var $form = $("#IdOfYourForm"); 
	// remove scripts, because they've already been executed since we are manipulating the DOM below (WireTabs)
	// which would cause any scripts to get executed twice
	$form.find("script").remove();
	$form.WireTabs({
		items: $(".WireTab"),
		skipRememberTabIDs: ['ProcessModuleNameTabID'],// if you need this option
		rememberTabs: true// if you need it
	});
});

The ID of the form is the tricky bit. I am not sure if you can use your own form ID in  getModuleConfigInputfields. I tried but it was not getting recognised. If not, try using the existing form's ID which would be:  ModuleEditForm.

3. Still in getModuleConfigInputfields, build your inputs, add them to your tabs which you then add to the form. I am too lazy to type now, so please have a look at modules that use tabs...Hanna Code, Menu Builder, Batcher, etc on how to do this.

[kixe]

Merry Christmas to everybody. (Missing Christmas Emoticon)

The JavaScript File:

$(document).ready(function() {
    // instantiate WireTabs if defined
    $('body.hasWireTabs #ModuleEditForm').WireTabs({
        items: $("#ModuleEditForm > .Inputfields > .InputfieldWrapper"),
    });
});

The Module:

<?php
class ModuleSettingsTab extends Process implements ConfigurableModule {

    /**
     *
     * @return array
     *
     */
    public static function getModuleInfo() {

        return array(
			'title' => 'Module Settings Tabs', 
			'version' => 000, 
			'summary' => 'Provide Tabs for module settings screen'
            );
    }

     public function __construct() {
        $this->wire('config')->scripts->add(wire('config')->urls->ModuleSettingsTab.'ModuleSettingsTab.js');
     }

    /**
     * Initialize the module
     *
     */
    public function init() {
    }

    /**
     * Module configuration
     *
     */
    public function getModuleConfigInputfields(array $data) {
    
        wire('modules')->get('JqueryWireTabs');

        $inputfields = new InputfieldWrapper();    
        
        $tab = new InputfieldWrapper();
        $tab->attr('title', 'Settings');
        $tab->attr('class', 'WireTab');

        $markup = $this->modules->get('InputfieldMarkup');
        $markup->label = 'Settings';
        $markup->value = '<p>Just a placeholder for some inputfields.</p>';
        $tab->add($markup);

        $inputfields->add($tab);

        $tab = new InputfieldWrapper();
        // $tab->attr('id', 'ext_settings');
        $tab->attr('title', 'Extended Settings');
        $tab->attr('class', 'WireTab');

        $markup = $this->modules->get('InputfieldMarkup');
        $markup->label = 'Extended Settings';
        $markup->value = '<p>For very experienced developers only.</p>';
        $tab->add($markup);

        $inputfields->add($tab);

        return $inputfields;
    }
}

 

Edited December 12, 2016 by kixe
removed autoload; moved inclusion of JavaScript in constructor; modified script

[netcarver]

Works very nicely. Thank you again @kixe

[netcarver]

Great concept - but the implementation seems to appear to mess with settings on other module's pages. When visiting the config page for any other module, I'm now getting an error in the JS console about WireTabs being undefined. 

[kongondo]

So maybe a setting in its own module settings to only autoload for specified/named modules? Is that even possible?

[Robin S]

16 minutes ago, netcarver said:

Great concept - but the implementation seems to appear to mess with settings on other module's pages. When visiting the config page for any other module, I'm now getting an error in the JS console about WireTabs being undefined. 

In some modules I am conditionally loading JS to the module config page like this:

if($this->input->get->name == $this->className) { 
    // load script 
}

 

[kixe]

The body class 'hasWireTabs' will only be set after a call of JqueryWireTabs. We can use it in the selector of the JavaScript. This should help.

$(document).ready(function() {
    // instantiate WireTabs if defined
    $('body.hasWireTabs #ModuleEditForm').WireTabs({
        items: $("#ModuleEditForm > .Inputfields > .InputfieldWrapper"),
    });
});

Furthermore the module should call the JavaScript and instantiate WireTabs without autoload set to true like ProcessPageEdit do or simply include the script via constructor instead of init().
I edited my post above.