Adding tabs to you admin custom page UI

[Neeks]

I'm trying to figure out how to add tabs to an admin page for my module. 

I tried copying the HTML from a page edit (where there are nice tabs that fit in with the existing UI)

<ul class="WireTabs nav" id="PageEditTabs">
    <li><a href="#drafts" id="_drafts" class="on">Drafts</a></li>
    <li><a href="#history" id="_history">History</a></li>
</ul>

<ul class="Inputfields">
    <li class="Inputfield InputfieldWrapper InputfieldColumnWidthFirst" id="drafts" style="display: block;>
         my first tab (drafts)
    </li>

   <li class="Inputfield InputfieldWrapper InputfieldColumnWidthFirst" id="history" style="display: none;>

        my second tab (history)

    </li>

</ul>

 

 

 

 

....

But they didn't work. Wondering if there is a way to generate admin tabs in processwire for admin pages a module creates?

[kongondo]

You don't add the HTML manually...that is automatically done for you. In a hurry, but have a look at how it is done in various modules, e.g. Batcher and Menu Builder, or in PW pages, e.g. /wire/modules/Process/ProcessPageEdit/ProcessPageEdit.module

The key is to include; $this->modules->get('JqueryWireTabs') in your module, most likely in your init() method and create tabs like shown in Batcher/Menu Builder. You also need to add some short js in your module.js file...Again, see the above modules...Sorry, you will get other answers if this is not clear....

[Neeks]

Thanks Kondogo,

I found a good example in the forum on how to use it: https://processwire....-line-wiretabs/

    $form = $this->modules->get('InputfieldForm');
    $this->modules->get('JqueryWireTabs');

    foreach(array('One', 'Two', 'Three') as $number) {

        $tab = new InputfieldWrapper();
        $tab->attr('id', 'tab_' . $number);
        $tab->attr('title', $number);
        $tab->attr('class', 'WireTab');

        $markup = $this->modules->get('InputfieldMarkup');
        $markup->label = $this->_('Label ') . ' ' . $number;
        $markup->value  = "<h2>$number</h2>";

        $tab->append($markup);
        $form->append($tab);
    }

  echo $form->render();

The only thing is it creates accordions instead of tabs, but when I work out the details of getting tabs ill post the solution. Thx.

[Martijn Geerts]

You need to have the Javascript, thats posted on that page to !

[horst]

I found a good example in the forum on how to use it:

@Neeks: Please add the link to this post, so that others can read it in full and also can get aware of the original context, authors etc.!

https://processwire.com/talk/topic/9376-mysterious-white-line-wiretabs/

Edited March 21, 2015 by horst

[Neeks]

updated my post....good call, links and context are very helpful. Thanks for the feedback.