How to add own tab in Admin on edit page via API?

[dotnetic]

I want to add a tab to an edit page in the admin via API. I found a code from @kixe here https://processwire.com/talk/topic/15015-tabs-in-module-config-page/?do=findComment&comment=134624 that basically does this, but I can´t get it to work correctly (see screenshot).

As you can see the Tab has a weird name and the submit button appears before the fieldset. Also the tab should appear as second, directly after "Inhalt (content)".

Maybe I did something wrong when adding the tab to the form?

Here is the code that I used:

public function ready()
        {
            $this->addHookAfter('ProcessPageEdit::buildForm', $this, 'addButtons');
        }

 public function addButtons($event)
        {
            $page = $event->object->getPage();

            if ($page->template == "bewerbung") {
                $form = $event->return;
                $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);

                $form->add($inputfields);
            }
        }

 

[kixe]

The topic you found is about modules.

If you want to add a tab to your page edit screen you should create a field of type FieldsetTabOpen. Add it to your template and place the inputfields you want to show up under this tab between the opening and closing field.

[dotnetic]

  On 3/21/2017 at 8:32 PM, kixe said:

The topic you found is about modules.

If you want to add a tab to your page edit screen you should create a field of type FieldsetTabOpen. Add it to your template and place the inputfields you want to show up under this tab between the opening and closing field.

Expand  

I want to do this programmatically. Because I want to add custom markup like some buttons. I don´t want to add inputs to the tab.

[dotnetic]

Is there a way to add custom markup to the tab via fields? Then I could do it the way you described.

[adrian]

@jmartsch - you can see how I have done this in the BCE module when the editor interface is added in a new tab:

https://github.com/adrianbj/BatchChildEditor/blob/4cd7f64e28d166b1f78eb02e83167cd7af031e87/BatchChildEditor.module#L374-L421

[kixe]

  On 3/21/2017 at 8:39 PM, jmartsch said:

Is there a way to add custom markup to the tab via fields? Then I could do it the way you described.

Expand  

Not tested:
http://modules.processwire.com/modules/inputfield-textarea-markup/

[kixe]

  On 3/21/2017 at 3:44 PM, jmartsch said:

As you can see the Tab has a weird name

Expand  

If you do not assign a title the autogenerated ID (Inputfield) will be taken.

$inputfields->attr('title', 'Weird name');

 

  On 3/21/2017 at 3:44 PM, jmartsch said:

Also the tab should appear as second, directly after "Inhalt (content)"

Expand  

To put the Inputfields (Tabs) in the right order you could use InputfieldWrapper::insertBefore() or InputfieldWrapper::insertAfter() instead of InputfieldWrapper::add(). Unfortunately this doesn't work in case of ProcessPageEdit.

To get it working you need to add another hook to ProcessPageEdit::getTabs()

The following code snippet should work. Place it in your /site/ready.php

wire()->addHookAfter('ProcessPageEdit::buildForm', function ($event) {
    $page = $event->object->getPage();

    if ($page->template == "bewerbung") {
        $form = $event->return;

        $inputfields = new InputfieldWrapper();
        $inputfields->attr('title', 'Weird Name');
        $inputfields->attr('name+id', 'WeirdTabNameAndId'); // we need both unique ID and Name

        $markup = wire()->modules->get('InputfieldMarkup');
        $markup->label = 'Custom Lable';
        $markup->value = '<p>Just a placeholder for any custom markup</p>';
        $inputfields->add($markup);

        $pageEditTab = $form->find('id=ProcessPageEditContent')->first();
        $form->insertAfter($inputfields, $pageEditTab);

        // inserting in the right place is not enough to set the tab order
        // we need the following hook
        wire()->addHookAfter('ProcessPageEdit::getTabs', function ($event) {
            $event->return = array_merge(
                array_slice($event->return, 0, 1, true),
                array('WeirdTabNameAndId' => __('Weird Name')), // should be identical to the weird name/title above
                array_slice($event->return, 1, null, true)
            );
        });

        $event->return = $form;
    }
});

 

 

[dotnetic]

@kixe Your solution works perfectly fine. Thank you a thousand times  Kudos!

Thanks to @adrian as well.

 

[bernhard]

Thx for this one @adrian and @kixe that really saved me today ? 

This is my final version:

  public function init() {
    $this->addHookAfter("ProcessPageEdit::buildForm", $this, "addGUI");
    $this->addHookAfter("ProcessPageEdit::buildFormContent", $this, "addGUI");
  }

  public function addGUI(HookEvent $event) {
    $tabid = 'my-tab';
    $form = $event->return;
    $page = $event->process->getPage();
    if($page->template != 'my_page_template') return;

    // add new tab after content tab
    if($event->method == 'buildFormContent') {
      $event->process->addTab($tabid, __('My Tab!'));
      return;
    }

    // add fields inside the tab
    $tab = new InputfieldWrapper();
    $tab->id = $tabid;
    $tab->add([
      'type' => 'markup',
      'label' => 'foo',
      'value' => 'foo',
    ]);
    $tab->add([
      'type' => 'markup',
      'label' => 'bar',
      'value' => 'bar',
    ]);
    $form->prepend($tab);
  }

[Chris Bennett]

Thank you @bernhard, @adrian and @kixe for this thread and the very timely thank-you note from Bernard that pointed my in a far more productive direction with regards to my question from yesterday:

Had been playing around with hooks to try to achieve my goals but this has made things a whole lot better and a whole lot easier.
I kinda figured there had to be a way to hook into the form build process, but without this thread I would have remained lost for much longer as I played around the edges.

My very grateful appreciation to all! 

[rastographics]

  On 7/19/2020 at 7:57 PM, bernhard said:

Thx for this one @adrian and @kixe that really saved me today ? 

This is my final version:

  public function init() {
    $this->addHookAfter("ProcessPageEdit::buildForm", $this, "addGUI");
    $this->addHookAfter("ProcessPageEdit::buildFormContent", $this, "addGUI");
  }

  public function addGUI(HookEvent $event) {
    $tabid = 'my-tab';
    $form = $event->return;
    $page = $event->process->getPage();
    if($page->template != 'my_page_template') return;

    // add new tab after content tab
    if($event->method == 'buildFormContent') {
      $event->process->addTab($tabid, __('My Tab!'));
      return;
    }

    // add fields inside the tab
    $tab = new InputfieldWrapper();
    $tab->id = $tabid;
    $tab->add([
      'type' => 'markup',
      'label' => 'foo',
      'value' => 'foo',
    ]);
    $tab->add([
      'type' => 'markup',
      'label' => 'bar',
      'value' => 'bar',
    ]);
    $form->prepend($tab);
  }

Expand  

@bernhard did you put this code inside a custom page class?

[bernhard]

I don't think so, what is your exact question? ? 

Nowadays I'd do it like this: 

The only think that I'd do differently is to make that PageClass use the MagicPage trait instead of manually triggering the init method in init.php