Tip how to change add button value on pagetable fields

[Juergen]

If you want to add your own button value at the add button of a pagetable field, you only have to put this little piece of code inside your ready.php file.

$wire->addHookBefore('InputfieldPageTable::render', function($event) {
   $table = $event->object;
   if(!in_array($table->name, array('datespagetable'))) return;
      $this->addHookBefore("InputfieldButton::render", null, function(HookEvent $event){
         $button = $event->object;
         if($button->name == 'button'){
          $button->attr('value', 'Test');
         }
      });
});

In this case I limit it to a certain pagetable field called "datespagetable". You have to change it to the name of your desired pagetable field.

If you want to change it for all pagetable fields (no restrictions) simply remove the following line from the code:

if(!in_array($table->name, array('datespagetable'))) return;

If you want to add it to more than 1 pagetable field, then write all the fieldnames into the array:

if(!in_array($table->name, array('datespagetable','pagetable1','pagetable2'))) return;

You can change the value of the button text to your needs in this line of code:

$button->attr('value', 'Test');

I simply called it "Test" in this case to show how it is working.

If you need it to be a translateable string simply use:

$button->attr('value', __('Test'));

And now this is the result:

 

 

This let you customize your pagetable field a little bit. Fe you can use "Add News" or "Add new events" or something else.

If you want to change another attribute than the value please take a look at the following page: https://github.com/processwire/processwire/blob/master/wire/modules/Inputfield/InputfieldButton.module

Best regards

[adrian]

Just for reference: https://processwire.com/talk/topic/10408-button-labels-for-pagetable/

I thought I remembered this being possible by default, but turns out it only works when you have more than one possible template.

[Juergen]

I know, this is the solution if you have only 1 template assigned.

[adrian]

6 minutes ago, Juergen said:

I know, this is the solution if you have only 1 template assigned.

Yeah - I got it  and appreciate your tip!

Just thought others might like clarification on how it works with multiple templates.

[Noel Boss]

Thanks alot @Juergen!

If you wan't to name the button automatically based on the page-table label or the label/title of the allowed templates, use this hook:

$this->addHookBefore('InputfieldPageTable::render', function ($event) {
	$table = $event->object;

	// Make sure only for fields with a single template…
	if (count($table->hasField()->template_id) > 1) {
		return;
	}

	// Use the field label…
	$label = $table->hasField()->label;
	// or… use the template label or title…
	$label = $this->templates->get(['id=' => $table->hasField()->template_id])->get('label|title');

	// don't miss the use($label part)…
	$this->addHookBefore('InputfieldButton::render', null, function (HookEvent $event) use ($label) {
		$button = $event->object;
		if ('button' == $button->name) {
			// add label and translatable Add string…
			$button->attr('value', __('Add') . ' ' . $label);
		}
	});
});

 

[jploch]

this is working great for a pagetable with a single item/button. I would like to adapt this code to set icons to multiple buttons, based on the icon that is set in the template settings of the item template (in backend GUI).  Here is what I have so far, wich sets the icon markup as an attribute for the first item:

$this->addHookBefore('InputfieldPageTable::render', function ($event) {
	    $table = $event->object;
        $templateIconName = $this->templates->get(['id=' => $table->hasField()->template_id])->getIcon();
        $templateIcon = wireIconMarkup($templateIconName);

	$this->addHookBefore('InputfieldButton::render', null, function (HookEvent $event) use ($templateIcon) {
		$button = $event->object;
    	$button->attr('icon', $templateIcon);
	});
});

Any Idea how I can adapt that to work with multiple Items? And is it also possible to set the Icon markup inside a span tag or something?
If its easier to set the attribute, I think I could set the markup using javascript after page load...

[Robin S]

10 hours ago, jploch said:

I would like to adapt this code to set icons to multiple buttons, based on the icon that is set in the template settings of the item template

For /site/ready.php, but you can adapt for use in a module if needed:

$wire->addHookBefore('InputfieldPageTable::render', function (HookEvent $event) {
	/** @var InputfieldPageTable $table */
	$table = $event->object;
	$field = $table->hasField;
	// Get array of table template data in the form 'label' => 'icon'
	$table_template_ids = $field->template_id;
	$table_templates = $event->wire('templates')->find(['id' => $table_template_ids]);
	$table_template_data = [];
	foreach($table_templates as $table_template) {
		$table_template_data[$table_template->get('label|name')] = $table_template->icon;
	}
	
	$event->wire()->addHookBefore('InputfieldButton::render', function (HookEvent $event) use ($table_template_data) {
		/** @var InputfieldButton $button */
		$button = $event->object;
		// Return early if this is not a button we want to modify
		if(!isset($table_template_data[$button->value])) return;
		// Set button icon
		$button->icon = $table_template_data[$button->value];
	});
});

[jploch]

@Robin S this is perfect! Works like a charm. Thank you!!

EDIT: After some testing I realized that the icons disappear once a new item is added to the pagetable.
So I guess the ajax call and update of the pagetable removes any changes to the buttons?

Do you know how to hook into the add item action and reset those icons after the ajax update is finished?

EDIT2: Got it. I had to put the hook inside the init instead of ready function. Now it works!