Jump to content

Tabs in module config page


regesh
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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. :rolleyes:

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

 

  • Like 1
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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 by kixe
removed autoload; moved inclusion of JavaScript in constructor; modified script
  • Like 5
Link to comment
Share on other sites

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 
}

 

  • Like 2
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...