dragan

Remember open tab in page edit mode?

Recommended Posts

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?

Share this post


Link to post
Share on other sites

When saving the admin remembers which tab was open (only on non-ajax tabs unfortunately). You can link directly to one tab by appending the id like this:

.../page/edit/?id=123#ProcessPageEditSettings

 

  • Like 1

Share this post


Link to post
Share on other sites

I know, but if you leave the admin, logout or go somewhere else, e.g. edit another page or whatever, you'll find that you get the 1st tab again.

The general idea behind this question is: A relatively big page (lots of fields, lots of "show only if" conditions) should be split up into several "process steps" - hence the tabs approach. The user is supposed to be "guided" in the page-editing process that if he only has completed tab 1-3, the next time the page-edit screen is opened, tab 4 is shown. Think of multi-step forms, a shop checkout process or similar.

Share this post


Link to post
Share on other sites

you can also use ?field=yourtab to show only the fields of this tab. I'm using this sometimes combined with the pw side panel

edit: this only works with custom fieldsettabs, but maybe you can list the fields one by one, like ?fields=yourfield1,yourfield2

  • Like 1

Share this post


Link to post
Share on other sites
?field=yourtab

It's probably too late right now... approaching midnight here, but I am not sure where or how to use this. Do you have a simple example? You add that to your page-edit link as a param? If so, that's not an option, since I don't want to write a module, but still be in the "default" page-edit area. I don't want to mimick or refactor the whole page-editing somewhere else.

Share this post


Link to post
Share on other sites

The built-in WireJqueryTabs is configurable but doesn't offer the exact same thing you need.

I would add an extra hidden field and save the current tab name via hook on page save, then retrieve this value somehow on page load, with a hook or js, and set the tab accordingly.

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • 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 rick
      Hello all,
      I am creating a simple ProcessModule to better understand ProcessWire itself, but have stumbled in my attempts. Here is a sample scenario:
      I would like the processmodule interface to have two tabs, one for an overview and the second for details.  Both tabs contain two comboboxes where the user can select options. 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:

      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.
       
    • 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
    • By novalex
      Hi,
      New to PW, please forgive my ignorance if this has been answered before, I have scoured the docs and forums but couldn't find anything.
      I'm trying to add a custom tab to the Page Edit screen (or process), which will contain fields for a page hero. Ideally, I would have a "Hero" tab before "Content", which would contain fields for images, text, a CTA button, etc. What I have so far is this:
      class HeroTab extends WireData implements Module { public static function getModuleInfo() { return array( 'title' => 'Page Hero', 'version' => 1, 'summary' => 'Header fields for pages.', 'singular' => true, 'autoload' => true, ); } public function ready() { if(wire('page')->process != 'ProcessPageEdit') return; $this->addHookAfter('ProcessPageEdit::buildForm', $this, 'addTab'); } public function addTab(HookEvent $event) { $form = $event->return; // create the tab $hero = new InputfieldWrapper(); $hero->attr('id+name', $this->className() . 'hero'); $hero->attr('title', $this->_('Hero')); // Images $fimages = $this->modules->get("InputfieldImage"); $fimages->attr('id+name', 'hero_images'); $fimages->label = $this->_('Images'); $fimages->extensions = 'gif jpg jpeg png svg'; $hero->append($fimages); // Text $ftext = $this->modules->get("InputfieldCKEditor"); $ftext->attr('id+name', 'hero_text'); $ftext->label = $this->_('Text'); $hero->append($ftext); $form->prepend($hero); } } This adds the tab and the fields, but after the "View" tab. However, the bigger problem is that the fields do not save. When I click Save, the page refreshes, with the "Saved Page" notice, but the fields are empty.
      I got inspiration from https://github.com/adrianbj/ProcessRedirectIds/blob/master/ProcessRedirectIds.module, but I think it is for the older 2.x version because it originally used $form->append which put the bottom save button between the tabs and tab content.
      Any help would be appreciated, I am thoroughly lost and the documentation doesn't give any examples for what I'm trying to do.
      Cheers