Jump to content

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


dotnetic
 Share

Recommended Posts

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);
            }
        }

 

chrome_2017-03-21_16-35-43.png

Link to comment
Share on other sites

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.

  • Thanks 1
Link to comment
Share on other sites

2 minutes ago, 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.

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.

Link to comment
Share on other sites

17 hours ago, jmartsch said:

As you can see the Tab has a weird name

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

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

 

17 hours ago, jmartsch said:

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

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;
    }
});

 

 

  • Like 7
  • Thanks 3
Link to comment
Share on other sites

  • 3 years later...

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);
  }

nvJPbig.png

  • Like 3
  • Thanks 1
Link to comment
Share on other sites

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! 

  • Like 4
Link to comment
Share on other sites

  • 2 years later...
On 7/19/2020 at 2: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);
  }

nvJPbig.png

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

Link to comment
Share on other sites

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

 

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

×
×
  • Create New...