Juergen

Render UIKit list Here is another function to create various types of lists corresponding to https://getuikit.com/docs/list /** * Render a uikit list * * @param array $listitems All list items as an array, you can also use html inside the array (fe links) * @param array $options Optionally specify different options to list. * @return string * */ function ukList($listitems = array(), $options = array()) { if(count($listitems) == 0) return; $defaults = array( 'divider' => false, 'bullet' => false, 'striped' => false, 'large' => false, 'icon' => '', // icon to display before list items 'class' => '' // add custom class to list item ); $options = _ukMergeOptions($defaults, $options); $out = ''; $classes = array(); if($options['class']) $classes = explode(' ', $options['class']); if($options['divider']) $classes[] = 'uk-list-divider'; if($options['bullet']) $classes[] = 'uk-list-bullet'; if($options['striped']) $classes[] = 'uk-list-striped'; if($options['large']) $classes[] = 'uk-list-large'; if(count($classes)) { $class = ' ' . implode(' ', $classes); } else { $class = ''; } $out .= '<ul class="uk-list'.$class.'">'; foreach($listitems as $listitem) { $out .= '<li>'; $icon = (!empty($options['icon'])) ? ukIcon($options['icon']).' ' : ''; $out .= $icon.$listitem.'</li>'; } $out .= '</ul>'; return $out; } Usage examples: echo ukList($page->children); //creates a simple unstyled list of all child pages ids echo ukList($page->children, $options = array('icon' => 'heart', 'striped' => true, 'large' => true)); //creates a striped list, with heart icon in front and a larger margin

This causes a problem in my case with Ajax update, so I removed it.

Hello @all, I am using UIKit now for over a year and I am totally satisfied. Ryan has created a site profile with UIKit 3 (https://processwire.com/blog/posts/introducing-a-new-processwire-site-profile/) where he uses a lot of markup functions to simplify content creation. Here is the function file of Ryan: https://github.com/ryancramerdesign/regular/blob/master/site-regular/templates/_uikit.php I want to start this topic for all users, who are also using UIKit 3 and want to share additional markup functions to extend Ryans function file. So everyone who use the new UIKit 3 framework can benefit from it. I want to start with functions to render different types of buttons: Render UIKit buttons Render UIKit buttons corresponding to https://getuikit.com/docs/button /** * Render a uikit button * * @param string $text Text for the button * @param string $style Specify one of: default, primary, secondary, danger, text, link. * @param array $options Optionally specify different options to the button. * @return string * */ function ukButton($text, $style = '', $options = array()) { if(!$text) return; $defaultoptions = array( 'tag' => 'button', //button or a tag 'type' => '', //optional button type attribute fe submit 'name' => '', //optional name attribute fe if button is inside form 'disabled' => false, //optional true or false 'href' => '', //optional href attribute; works with button and a tag, but recommended only with a tag 'rel' => '', //optional rel attribute fe nofollow 'icon' => '', //optional icon fe user, unlock 'class' => '', //optional additional class attribute fe uk-width-1-1, uk-button-small or uk-margin-small-bottom 'id' => '', //optional id attribute 'wrapper' => false, //optional add a wrapper div arround the button 'wrapperclass' => '' //optional add a class to the wrapper div fe alignment or margin ); $options = _ukMergeOptions($defaultoptions, $options); $out = ''; if($options['wrapper'] == true){ $out .= (!empty($options['wrapperclass'])) ? '<div class="'.$options['wrapperclass'].'">' : '<div>'; } $out .= ($options['tag']) ? '<'.$options['tag'].' class="uk-button' : '<button class="uk-button'; $out .= (!empty($style)) ? ' '.$style : ' uk-button-default'; $out .= (!empty($options['class'])) ? ' '.$options['class'].'"' : '"'; if(!empty($options['id'])) $out .= ' id="'.$options['id'].'"'; if($options['disabled'] == true) $out .= ' disabled'; if(!empty($options['name'])) $out .= ' name="'.$options['name'].'"'; if($options['tag'] == 'a'){ if(!empty($options['href'])) $out.= ' href="'.$options['href'].'"'; } else { $out .= ' onclick="window.location.href=\''.$options['href'].'\'"'; } if((!empty($options['href'])) && (!empty($options['rel']))) $out .= ' rel="'.$options['rel'].'"'; if(!empty($options['type'])) $out .= ' type="'.$options['type'].'"'; $out .= '>'; if(!empty($options['icon'])) $out .= ukIcon($options['icon']) . ' '; $out .= $text; $out .= ($options['tag']) ? '</'.$options['tag'].'>' : '</button>'; if($options['wrapper'] == true) $out .= '</div>'; return $out; } /** * Render a primary button; * * @param string $text * @param array $options * @return string * */ function ukButtonPrimary($text, $options = array()) { return ukButton($text, 'uk-button-primary', $options); } /** * Render a secondary button; * * @param string $text * @param array $options * @return string * */ function ukButtonSecondary($text, $options = array()) { return ukButton($text, 'uk-button-secondary', $options); } /** * Render a danger button; * * @param string $text * @param array $options * @return string * */ function ukButtonDanger($text, $options = array()) { return ukButton($text, 'uk-button-danger', $options); } /** * Render a text button; * * @param string $text * @param array $options * @return string * */ function ukButtonText($text, $options = array()) { return ukButton($text, 'uk-button-text', $options); } /** * Render a link button; * * @param string $text * @param array $options * @return string * */ function ukButtonLink($text, $options = array()) { return ukButton($text, 'uk-button-link', $options); } This code snippet uses functions from Ryans code (ukIcon() and _ukMergeOptions()), so please be sure that this functions are included in your function file as well. It would be great if other users can also post their UIKit markup functions (if you have created ones) to extend the collection. Best regards

Nevermind. Thanks for your info. I will change the code at my first post.

Ok, I have tried another approach that seems to work: Replace $page = $this->process->getPage(); with $id = $this->input->get('id'); $page = wire('pages')->get('id='.$id); Let me know if it works Best regards

Ok I found the issue, but not a solution. This line of code is responsible: $page = $this->process->getPage(); I will try to find a working way to grab the page in another way.

Ok, there must be something in the code that stops the Ajax update of page table fields. For the moment I have no solution, but I hope that I will find out what causes the problem.

I am not 100 percent sure, but I guess this issue was not present in previous versions. For the moment I am a little bit helpless, cause there is not so much code that could be changed to make it work properly. Its a simple string replace function and nothing more. I cannot say what causing this issue now????? Maybe you could try to use the code from @Robin S to see if that works.

Yes you are right. Do you use the latest DEV version of PW?

Hello @tpr You can ignore this "bug". It was caused by a page table hook inside ready.php on my side. After changing my code it works as expected. Maybe there was some interference . Now my code and AOS work as expected - I am happy.

Hello @tpr If you can confirm the behavior written in the previous post, @Robin S helped me out at my similar problem to get it working. Running a slightly modificate code inside init.php instead of ready.php will solve the problem. Maybe its a solution you can also use if you can confirm this behavior. For the solution please click the link to my problem in the previous post. Best regards

Yep that works!!! Awesome! I will rewrite it to adapt it to my code! Thousand thanks.

hello @tpr I have discovered an issue with search box in page table field and updating the page table field via Ajax. Before: The search box is there After updating the page table via Ajax (a child page was edited in modal and then saved): As you can see the search box is gone. After refreshing the page the search box is still there. I have also troubles with this behavior by using a InputfieldPageTable::render hook (see https://processwire.com/talk/topic/17738-tip-how-to-change-the-table-headers-in-page-tables/). It seems that that the hook doesnt hook in if the field will be updated via Ajax. My attempt was to try to run this hook in init.php but I was not successful.

Yes you are right @szabesz

Thanks @adrian, unfortunately my solution does not work if the page table is updated via Ajax after a child page is saved in the modal. I have tried to use the code inside init.php instead of ready.php but I cannot solve this problem. Do you have an idea?

I have found a solution for my posting above : https://processwire.com/talk/topic/17738-tip-how-to-change-the-table-headers-in-page-tables/

This little tutorial is about how to change the text of the table headers of a page table field: This is what it looks like before: The text for the table headers comes from the field labels. Now we want to change this a little bit: As you can see I have changed 3 values of the table header: Beginn (Datum) -> Start Beginn (Zeit) -> Beginn Ende (Zeit) -> Ende Here is the hook to make this working. I use a "InputfieldPageTable::render" hook. This code should be placed inside init.php not ready.php $this->addHookAfter('InputfieldPageTable::render', function($event) { $id = $this->input->get('id'); $page = wire('pages')->get('id='.$id); $table = $event->object; $content = $event->return;//put the output into a variable for manipulation later on if($table->name == 'mypagetablefield'){ //only on this pagetable field - rename it to the name of your field //create an array of all fields where you want to change the header text $fieldsarray = array( //use name of the field as key and the new header text as value ($key => $value) 'field1' => __('Text 1'),//rename field1 to your field name and Text 1 to your table header text of field1 'field2' => __('Text 2')//rename field2 to your field name and Text 2 to your table header text of field2 ); $templateID = $page->template->childTemplates[0];//array of children templates IDs - in this case key 0 indicates the first (and only) template; foreach($fieldsarray as $key=>$value) { $label = wire('templates')->get($templateID)->fields->getFieldContext($key)->label;//get labels from template context $content = str_replace($label, $value, $content);//manipulate the output } $event->return = $content;//output the manipulated content } }); I know using str_replace is not the most elegant solution, but I havent found another possibility to achive this. $templateID is used to get the labels from template context. In this example I manipulate 2 field labels (labels of field1 and field2). You have to adapt it to your needs The str_replace line is for the manipulation. If someone has better and more elegant solution please post it here. There is also a problem if the page table is updated via Ajax. If so they headers return to the default value: Maybe a hook with "InputfieldPageTableAjax::checkAjax" would be also necessary. So use with caution at the moment. Edit: After removing this line from the code and putting the code into init.php it works also after updating via Ajax: if($this->process != 'ProcessPageEdit') return; //this was not a good idea to use It seems that if the page table is updated via Ajax than the process is no longer in "ProcessPageEdit" mode, so it will force the hook to not run. Removing this line from the code solves the problem. Now its working after Ajax update without any problems. Also a big thanks to @Robin S for helping me to find a working solution.

If you want to completely hide the field (not only closed) you have to set the display option to "open" and add the following condition:

Sorry that was a wrong information - I have corrected it. You have to use another option.

Use this option:

Hello @ all, I am trying to find a solution to change the table headers via a hook. These are the hooks that can be use with a pagetable field: The fields of the pagetable can be entered in the configuration of the pagetable field inside a textarea: I guess there should be a possibility to change the labels of these fields which are used inside the table header. Changing it directly at the fields is not an option in this case. My idea was to hook like this: addHookBefore('InputfieldPageTable::render', function($event) But I have no idea at the moment how to get the labels of the fields. Does anyone has a hint how it could be done?

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!

Only to mention: I know that AOS is not full supporting the new UIKit Theme, but I think I post it nevertheless. With the new UIKit Theme the description of the fields that are usually shown inside an overlay will be displayed on the left side of the field too. The hover function works also. This is fe a description of a pagetable field. As you can see the description will be displayed in a small column on the left side. Best regards

Here is another working method, that only shows changes once after save. It is based on this post from Ryan. //Compare before and after values $pages->addHookAfter('saveReady', function($event) { $page = $event->arguments('page'); if(!in_array($page->template->name, array('template1', 'template2'))) return; //restrict it to these templates only $fields = array('field1','field2'); //check only changes on these fields $this->wire('pages')->uncache($page);//uncache new page $oldPage = $this->wire('pages')->get($page->id);// get old page $changedfieldsarray = array(); foreach($fields as $field) { if (($oldPage->$field) != ($page->$field)) { //this is the comparison between before and after $changedfieldsarray[] = $page->fields->get($field, true)->label; } } if(count($changedfieldsarray) > 0) { $fieldnames = implode(", ", $changedfieldsarray); $this->warning(sprintf(__("Following fields have been changed: %s"), $fieldnames )); } }); It uses the uncache method to compare stored values from the DB and the new ones entered in the form. This informs the editor only once directly after form submission. If the editor push the save button once more and nothing was changed, the message will not be shown again. This is the main difference between this and the previous method. Attention: This method uncaches the page and therefore all entered values will be cleared after pressing the submit button and no sucessfull saving of the page - so use this method with care.

Another idea would be to use https://github.com/sunra/php-simple-html-dom-parser library, works like Jquery, but its only PHP and run server side. You can manipulate the output of fe comments->render function and you can add classes to it.