Jump to content

[SOLVED] Create Process Module Tabs


rick
 Share

Recommended Posts

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

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

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Robin S
      If your module has a lot of config fields you might want to divide them into groups inside a tabbed interface. Here is a demonstration module showing how this can be done.
      https://github.com/Toutouwai/ModuleConfigTabs

      Thanks to @kixe for providing my starting point in this forum topic.
    • By tron1000
      Hello! After I upgraded PW from 2.5.? to 3.0.116, my language tabs in the backend behave strange. I have 3 languages: german, french and english (default). Since I upgraded, all multilingual fields show the 3 tabs (DE, FR, EN) plus an additional textfield below for EN (see screenshots). The german tab is ok, but the upper tabs FR and EN both show the content in french, while the additional tab below shows the english content. When I click on the folder icon to the right to change the view, all looks ok. Also the frontend is ok.
      I uninstalled and reinstalled the module «LanguageTabs», but that didn't help …
      Any ideas?
      Thanks a lot, Andrej


    • By dragan
      In one of my templates, I have divided my fields into 5 fieldsets.
      The default tab now only appears when you create a new page. Once saved, you only see the custom 5 tabs.
      Now my problem is: When you open a page with such a template, it still jumps to the 1st tab (which is hidden by custom CSS). How can I achieve that it shows another tab? Would I have to write a hook? Some sort of redirect?
      e.g. I want to open the "Projekt" tab, so I don't get to see an empty page with just the save-button, when opening a page using that template.

       
    • By dragan
      Is it possible to open a specific tab, when in page-edit mode?
      Let's say I have 5 tabs (more than just the default "content" tab - 4 more created with field-groups), and the user is in tab 3. How can I possibly manage to set tab 3 again to active/selected when the same user wants to edit the same page after x days?
      Are there any in-built methods I could use? And which hook(s) would be necessary?
    • By Mustafa-Online
      Hi Everyone, It's Been a While Since i Started Working With The "Super Lovely ProcessWire" & I Absolutely In Love With It .
      But, sometimes i feel lost, because the lack of tutorials "Specifically Videos" - i wish  there will be more tuts made by the community & from the ones who have
      The Experience.
      1- Regarding to the user profile, is there any way to show fields in Tabs ?? or if there in way to attach pages to user will be fine
      2- Markup-Regions : Where i can find the Docs that are Related to them ??
       
      Thanx
×
×
  • Create New...