Tip how to change markup of fields inside a pagetable field

[Juergen]

Sometimes you want to add a specific markup to the values inside a pagetable field. Fe. you want to add a FontAwesome icon in front of the value or you want to add a background-color. In this little tutorial I want to show you how you can do that with only a view lines of code.

In the following example I will add the background color red to a specific field inside the page table.

This is what i looks like at default:

After the manipulation it will looks like this:

You can see the difference in the second field of the pagetable. This manipulation makes not really sense and it is only to show you what can be done. You can manipulate it also in other ways. Fe to add different colors to different status of orders and so on.

To achive this we use the following type of hook: Fieldtype::markupValue (read more at https://processwire.com/api/ref/fieldtype/markup-value/)

In this case we put the code inside the init.php and not in the ready.php. The reason for this is, that if the page table will be updated via Ajax, the default values will be displayed again if the code is in ready.php. So here we go:

 

$this->addHookAfter('Fieldtype::markupValue', function($event) {
    $page = $event->arguments(0);
    $field = $event->arguments(1);
    $value = $event->arguments(2);  
    if($field->name == 'nameofthefield' && $page->template->name == 'childrentemplatename') {
        $event->return = '<span style="background:red;color:#fff;">'.$value.'</span>';
    }
});

First we define all the variables needed for the manipulation ($page, $field and $value).

$value returns the formatted value of the field. If you need the unformatted value (fe. if it is a date field and you want the timestamp) you get the unformatted value by using this line of code:

$value = $page->getUnformatted($field->name);

We restrict it to a special field of the pagetable called "nameofthefield" - rename it to the name of your field where you want the manipulation to take place.

So this field of the pagetable is a field of a child template. In this case the child template is called "childrentemplatename". You have to rename it to your child template name. Only to clearify: each field inside the pagetable is part of a child page.

"$event->return" returns the output of the field (usually the value). In this example the value of the field should be between two <span> elements with a special CSS styling to add a red background and turn the color of black to white.

Here is a usecase where I use this technique:

You can see that after the end date there is no time (in opposition to the start date). Instead of the time the text "no specific endtime" is displayed. This is because this event has no specific end time (it is open end). Only to mention: The editor can choose if the event is all day long or starts and ends on specific date and time or it is open end.

Thats all and happy coding with your own manipulations!

[szabesz]

Thanks for the tip Juergen!

[elabx]

Could we get some more info on that nice looking search input you got there? 

[szabesz]

24 minutes ago, elabx said:

Could we get some more info on that nice looking search input you got there? 

AdminOnSteroids: settings: Add filterbox to AdminDataTables, if I'm not mistaken.

[Juergen]

Yes you are right @szabesz