Jump to content

[SOLVED] Create Process Module Tabs

rick

By rick,
in General Support

 Share

Recommended Posts

rick Hero Member

rick

Posted
Posted (edited)

Hello all,

I am creating a simple ProcessModule to better understand ProcessWire itself, but have stumbled in my attempts. Here is a sample scenario:

  1. I would like the processmodule interface to have two tabs, one for an overview and the second for details. 
  2. Both tabs contain two comboboxes where the user can select options.
  3. A 'refresh' button to update the display with the currently selected options.

I will add the form to process the combobox selections when I get the tabs to work (unless this is out of order).

I cannot seem to create the two tabs. I have tried the many examples present in the forum comments for similar subjects without success, referenced different source files, such as ProcessPageEdit, etc., a numerous existing module source code.

The latest 'simplified' attempt from my most recent forum search results is as follows:

ProcessExample.module 

class ProcessExample extends Process implements Module, ConfigurableModule {
...
public static function getModuleInfo() {
  return array(
    'title' => 'Process Example',
    'version' => 001,
    'summary' => 'Sample Interface.',
    'autoload' => false,
    'singular' => true,
    'permission' => 'page-edit',
    'requires' => 'ProcessWire>=3.0.42',
    //'useNavJSON' => true, //Yes, I tried duplicating processpageedit without success
  );
}
...
public function init() {
    $this->wire( 'modules' )->get( 'JqueryWireTabs' );
    parent::init();
	//$this->modules->get( 'JqueryWireTabs' ); // Neither position (before/after init) works.
}
...
public function ___execute() {
    $out = '';
    $out .= "<div id='{$this->className}-tabs'>";
    $out .= "    <div id='{$this->className}-tab1'>Tab1</div>";
    $out .= "    <div id='{$this->className}-tab2'>Tab2</div>";
    $out .= "</div>";

    return $out;
}

ProcessExample.js 

if($("#ProcessExample-tabs").size()) {
    $("#ProcessExample-tabs").WireTabs({
        items: $("#ProcessExample-tab1, #ProcessExample-tab2"),
        id: 'ProcessExample-tabs',
        rememberTabs: 1
    });
}

There are no errors shown in the console, notices (except those darn css map references), or logs when executing the above. The output displays as follows:

tabdisplay.jpg.ebab619053bd3af32b258909939e0659.jpg

This is the resulting script references in the <HEAD> section: 

	<script type='text/javascript' src='/example/wire/modules/Jquery/JqueryCore/JqueryCore.js?v=1510330240'></script>
	<script type='text/javascript' src='/example/wire/modules/Jquery/JqueryUI/JqueryUI.js?v=1510330240'></script>
	<script type='text/javascript' src='/example/wire/modules/Jquery/JqueryWireTabs/JqueryWireTabs.js?v=1510330240'></script>
	<script type='text/javascript' src='/example/site/modules/example/ProcessExample.js?v=1-1511168979'></script>
	<script type='text/javascript' src='/example/wire/modules/Process/ProcessPageSearch/ProcessPageSearch.js?v=106-1510330240'></script>
	<script type='text/javascript' src='/example/wire/templates-admin/scripts/inputfields.js?v=14k'></script>
	<script type='text/javascript' src='/example/wire/templates-admin/scripts/main.js?v=14k'></script>
	<script type='text/javascript' src='/example/wire/modules/AdminTheme/AdminThemeDefault/scripts/main.js?v=14k'></script>
	<script type='text/javascript' src='/example/wire/modules/Jquery/JqueryUI/panel.js?v=1510330240'></script>
	<script type='text/javascript' src='/example/wire/modules/System/SystemNotifications/Notifications.js?v=12'></script>

Surely I am missing something simple, and hope better trained (and less tunnel vision) eyes can provide insight.

 

Edited by rick
Solved
Link to comment
Share on other sites
rick Hero Member

rick

Posted
  • Author
Posted

Yeah, @arjen, I've been bangin' my head against the keyboard all weekend that I've got QWERTY imprinted on my forehead. 

@adrian, This worked. Thank you.

I had looked at your admin actions reference from another thread, but didn't want to use a form, so I passed on it because there was one other thread where ryan had replied with using form or wrapper or whatever else... I assumed a form was not required.

So basically all those other threads have incorrect information in them, or that information only works with very old versions ProcessWire.

  • 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
Go to topic listing
×
×
  • Create New...