Leaderboard

Thanks for all the help guys, appreciated. I ended up just creating repeater fields, nested as needed, and it works well enough. Coming from WordPress with ACF or CMB2, I'm surprised how flexible the PW system is and how many options it offers for the fields. I just wish the documentation was a little more comprehensive and offered some examples as well, sort of like the WordPress codex, since I'm having a hard time understanding/following the source code. I look forward to working with PW some more, I'm sure I'll get the hang of it soon and then it's bye-bye WordPress

Hey forum. I should have posted this one here a long time ago, but been so busy I didn't even add it to my portfolio despite being launched months ago: http://www.wholebrain-technologies.dk Wholebrain is a brainwave optimization center in Denmark. This started out as a site redesign and quickly shifted towards a complete brand overhaul with new logo, illustrations, icons, the works. The site features a simple ingredients list: Repeater, AIOM, Markup SEO and that's about it. I took a flexible approach where the basic page template features a bunch of optionals that can be combined to add testimonials, video gallery, featured video, illustration or icon cards. You can see the result navigating from page to page, as all use the same template, except for the contacts page. In the end, this site was replicated for Dynamic Brain Technologies, the same service in Ireland: http://www.dynamicbraintech.com Enjoy, H

Hello @franciccio-ITALIANO, you could start by renaming the HTML files inside your templates folder from .html to .php and add them as templates. But those template files would be still static HTML. So you would have to define some fields for your dynamic content and add them to your templates. Next step would be to output those fields with PHP between the HTML. But this has been already explained more better here: http://processwire.com/docs/tutorials/how-to-structure-your-template-files/ https://www.smashingmagazine.com/2016/07/the-aesthetic-of-non-opinionated-content-management-a-beginners-guide-to-processwire/ (Must read) Regards, Andreas

comments: 1) You might want to consider using pages instead of repeater for news items (repeaters are not really meant for infinitely scaling content types) 2) Sounds like you want to use ajax to change the content of the news article that was clicked on, on the left side? - maybe take a look at this: http://barbajs.org/

I'm usually use this which uses lightgallery.js (non-jQuery) and include my own script loader. Perhaps it's not what you're after but maybe you can get ideas. Make sure you run it after the DOM is ready (DOMContentLoaded, window.ready, jQuery document.ready, etc). So when the document is ready this JS runs and if there's a matching selector. If yes, it builds up the lightbox. To use only links with custom class, use ".project-items a.my-class" and then "selector: a.my-class", for example (add classes inside CKEditor). Also make sure the links are linking to the big version of your image (inside CKEditor). I also recommend to make such links open in a new tab.

Hi @joe_g Maybe you can loop over all your page and just save output of your markdown field to the newly created ckeditor field $yourpages = $pages->find("template=some"); foreach($yourpages as $p) { $p->ckeditorfiedl = $p->oldfield $p->save(); }

The hook doesn't create a page. The hook is called if a page is created. If you add a page with a repeater field in its template the hook is called twice, because 2 pages have been created. If you have 2 repeater fields Pages::added will be triggered 3 times and so on. This is not a bug.

Hi, @Zeka, Sorry for the big edit, I was totally swimming in my head coding til morning. But thanks for pointing me to subselectors! I've been using ProcessWire since 2012, but never heard of it and it looks amazing. I should probably read the PW weekly more often.

Hi @Alxndre' Not sure, but looks like you should use sub-selectors in this case https://processwire.com/api/selectors/#sub-selectors

@heldercervantes It works as you describe when js is enabled. My bad. I don't run scripts on any site unless necessary and forgot to enable it.

@rick Something more must be going on. At that point in scrolling JS collapses the header, adds color to the logo and gives it a white background. You may have stumbled upon a JS issue in Ubuntu.

you should be able to paginate any PageArray https://processwire.com/api/modules/markup-pager-nav/

Its just a spotify playlist . If you want to share it you can use the code https://open.spotify.com/user/clsource/playlist/3xl7eUL5ccWacR3V7dz2Er

Hi Robin, Aye, it certainly does, thanks!

Thanks for the update. I missed that article. However the old method still works... I have it in action on this website https://chrysemys.nl

yep. you can also read this post (the whole thread) to see one option:

After this tutorial you'll have learned how to: Build a Process module Make an AJAX request to backend Serve JSON as response Let's say you want to display the latest orders in a dashboard that you can access from admin panel. And you want it to refresh its content with a button click. Most straightforward and proper way (that I know of) is to create a Process module, as they're built for this purpose. First, create a directory under /site/modules/, call it ProcessDashboard, and create a file named ProcessDashboard.module under that directory. Following is about the least amount of code you need to create a Process module. <?php namespace ProcessWire; class ProcessDashboard extends Process { public static function getModuleInfo() { return [ 'title' => 'Orders Dashboard', 'summary' => 'Shows latest orders', 'version' => '0.0.1', 'author' => 'abdus', 'autoload' => true, // to automatically create process page 'page' => [ 'name' => 'order-dashboard', 'title' => 'Orders', 'template' => 'admin' ] ]; } public function ___execute() { return 'hello'; } } Once you refresh module cache from Modules > Refresh, you'll see your module. Install it. It will create an admin page under admin (/processwire/) and will show up as a new item in top menu, and when you click on it, it will show the markup we've built in execute() function. All right, now let's make it do something useful. Let's add create a data list to display latest orders. We'll change execute() function to render a data table. public function ___execute() { /* @var $table MarkupAdminDataTable */ $table = $this->modules->MarkupAdminDataTable; $table->setID($this->className . 'Table'); // "#ProcessDashboardTable" $table->headerRow([ 'Product', 'Date', 'Total' ]); // fill the table foreach ($this->getLatest(10) as $order) { $table->row([ $order['title'], $order['date'], $order['total'] ]); } // to refresh items $refreshButton = $this->modules->InputfieldSubmit; $refreshButton->name = 'refresh'; $refreshButton->id = $this->className . 'Refresh'; // "#ProcessDashboardRefresh" $refreshButton->value = 'Refresh'; // label of the button return $table->render() . $refreshButton->render(); } where getLatest() function finds and returns the latest orders (with only title, date and total fields) protected function getLatest($limit = 5, $start = 0) { // find last $limit orders, starting from $start $orders = $this->pages->find("template=order, sort=-created, limit=$limit, start=$start"); // Only return what's necessary return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total ]; }); } When you refresh the page, you should see a table like this Now we'll make that Refresh button work. When the button is clicked, it will make an AJAX request to ./latest endpoint, which will return a JSON of latest orders. We need some JS to make AJAX request and render new values. Create a JS file ./assets/dashboard.js inside the module directory. window.addEventListener('DOMContentLoaded', function () { let refresh = document.querySelector('#ProcessDashboardRefresh'); let table = document.querySelector('#ProcessDashboardTable'); refresh.addEventListener('click', function (e) { // https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault e.preventDefault(); // Send a GET request to ./latest // http://api.jquery.com/jquery.getjson/ $.getJSON('./latest', { limit: 10 }, function (data) { // check if data is how we want it // if (data.length) {} etc // it's good to go, update the table updateTable(data); }); }); function renderRow(row) { return `<tr> <td>${row.title}</td> <td>${row.date}</td> <td>${row.total}</td> </tr>`; } function updateTable(rows) { table.tBodies[0].innerHTML = rows.map(renderRow).join(''); } }); And we'll add this to list of JS that runs on backend inside init() function public function init() { $scriptUrl = $this->urls->$this . 'assets/dashboard.js'; $this->config->scripts->add($scriptUrl); } Requests to ./latest will be handled by ___executeLatest() function inside the module, just creating the function is enough, PW will do the routing. Here you should notice how we're getting query parameters that are sent with the request. // handles ./latest endpoint public function ___executeLatest() { // get limit from request, if not provided, default to 10 $limit = $this->sanitizer->int($this->input->get->limit) ?? 10; return json_encode($this->getRandom($limit)); } Here getRandom() returns random orders to make it look like there's new orders coming in. protected function getRandom($limit = 5) { $orders = $this->pages->find("template=order, sort=random, limit=$limit"); return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total ]; }); } And we're done. When refresh button is clicked, the table is refreshed with new data. Here it is in action: 2017-04-29_19-01-40.mp4 (227KB MP4, 0m4sec) Here's the source code: https://gist.github.com/abdusco/2bb649cd2fc181734a132b0e660f64a2 [Enhancement] Converting page titles to edit links If we checkout the source of MarkupAdminDataTable module, we can see we actually have several options on how columns are built. /** * Add a row to the table * * @param array $a Array of columns that will each be a `<td>`, where each element may be one of the following: * - `string`: converts to `<td>string</td>` * - `array('label' => 'url')`: converts to `<td><a href='url'>label</a></td>` * - `array('label', 'class')`: converts to `<td class='class'>label</td>` * @param array $options Optionally specify any one of the following: * - separator (bool): specify true to show a stronger visual separator above the column * - class (string): specify one or more class names to apply to the `<tr>` * - attrs (array): array of attr => value for attributes to add to the `<tr>` * @return $this * */ public function row(array $a, array $options = array()) {} This means, we can convert a column to link or add CSS classes to it. // (ProcessDashboard.module, inside ___execute() method) // fill the table foreach ($this->getLatest(10) as $order) { $table->row([ $order['title'] => $order['editUrl'], // associative -> becomes link $order['date'], // simple -> becomes text [$order['total'], 'some-class'] // array -> class is added ]); } Now, we need to get page edit urls. By changing getLatest() and getRandom() methods to return edit links in addition to previous fields protected function getLatest($limit = 5, $start = 0) { // find last $limit orders, starting from $offset $orders = $this->pages->find("template=order, sort=-created, limit=$limit, start=$start"); return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total, 'editUrl' => $order->editUrl ]; }); } protected function getRandom($limit = 5) { $orders = $this->pages->find("template=order, sort=random, limit=$limit"); return $orders->explode(function ($order) { return [ 'title' => $order->title, 'date' => date('Y-m-d h:i:s', $order->created), 'total' => $order->total, 'editUrl' => $order->editUrl ]; }); } and tweaking JS file to render first column as links function renderRow(row) { return `<tr> <td><a href="${row.editUrl}">${row.title}</a></td> <td>${row.date}</td> <td>${row.total}</td> </tr>`; } we get a much more practical dashboard.

hi abdus, thanks for your effort on helping others maybe i can suggest you to take a tool that lots of people are using here for creating micro-screencasts as animated gifs: http://www.cockos.com/licecap/ very easy, very helpful

There is no cheat sheet for UIkit available, but autocomplete for editors.

I can't reproduce this. When I hook after Pages:added and dump the name of the added page this only fires once. In Pete's code a page is added inside the hook. If you hook after a page is added, then add another page in the hook, you will have two pages. I'm surprised this doesn't cause an endless loop actually. BTW, you can skip the first step of adding a new page by setting the "Name format for children" option on the template of the parent page.

We've been using UserGroups for this use case for a few years now. This might be one of those unmaintained projects you were referring to, but if that's the case, it's mainly because it has been working just fine. No need to fix what isn't broken That being said, we haven't been using UserGroups with ProcessWire 3.x, so can't really say for sure how well those two work together.

If there are issues with a given module, you can always post your query/questions in the sub-forum for that module: You can also report technical issues/possible bugs with modules directly at the particular Project Page (Github) location: https://github.com/adrianbj/AdminRestrictBranch On the ProcessWIre Modules Page, for each module --- it lists the links to both the Forum Support and Project Page (Github): http://modules.processwire.com/modules/admin-restrict-branch/ I would encourage everyone to use these essential resources to let the module authors know about bugs, possible changes or any other issues with their module. Most module authors are willing to make changes to how things operate based on the comments or queries from module users.

put this in your ready.php wire()->addHookBefore('Page::addable', null, function ($e) { if ($e->object->parents->count > 1) $e->object->template->noChildren = 1; });

@Salemoche Obviously this is the same question you asked on http://stackoverflow.com/questions/43854601/css-is-not-updating-in-processwire. Maybe give me an upvote there if my solution helps you. Here is my answer again: This is most likely a problem with caching. Please read https://varvy.com/pagespeed/leverage-browser-caching.html for example, to understand what browser caching is and what task it accomplishes. On this page under "Common caching issue" you find your problem. If you are using Chrome, open the Dev Tools (F12) and under the Network tab check "Disable cache". In Firefox open the Firefox Toolbox (also F12) and under Settings > Advanced settings check "Disable HTTP-Cache if Toolbox is open" (I translated this from a german Firefox). After that make changes in your CSS file and reload the page. If your changes appear then you know you stumbled into one of the pitfalls of browser-caching. There are many strategies to deal with this "problem". Take a look at https://css-tricks.com/strategies-for-cache-busting-css/ for some solutions.

I can't write a working example yet (on mobile) but if you're comfortable with hooks, you can hook into Page:addable and return false (change $event->return) or throw error when the page ($event->object) has more than 2 parents ($page->parents->count)

@Hosted Power The 'session_handler_redis.php' will change your session handler. By changing the default session handler you may store your session data in files, in database, redis, memcache, etc. You can use it in any PHP project, with any CMS or framework. Include it at the beginning of your index.php or header.php, before your session_start(); Of course, you may have to tweak the port and/or socket path. Make sure you have "php_redis" extension installed for greater performance. You may need to edit the file if you don't have igbinary_serializer extension installed. I am busy too and hopefully, one rainy weekend I will focus on converting it as PW module with Karl_T. Meanwhile, you have a working solution and despite it's not as a module yet, it is reliable and you can use it with ProcessWire. Enjoy!

@nickie Any update or showcase for the site?

All fields in PW are custom fields. And you can't save content to a page without an actual field added to the page's template to hold that content (in your module you are only dealing with inputfields which themselves do not save their content to the DB). If you like you can add tags to your fields to create groups of fields within the fields list and keep things tidy. As @Macrura said, currently the only way to add a group of fields to a template in the form of a single unit is to create a repeater with those fields and limit it to a single repeater item. Or if you prefer, a PageTable or Profields Table in conjunction with Limit PageTable or Limit Table. Another approach that I sometimes take (if the project is well planned out in advance) is first create a template with the fields/fieldsets that will be used on all templates, and then I duplicate that template as the starting point for each additional template.

Thanks for the suggestion, I've added it to the original post.

I am happy that you like it @Sebastian, thank you for your support. I started the thread here because I thought this would be more like a discussion on how GraphQL and ProcessWire could fit together and wanted to get some feedback first. But this thread quickly become this module's official place here in the ProcessWire forums. Also @teppo included the link to this thread as the "dedicated support forum thread" in the 143 issue of the weekly.pw (which I was flattered to see ). Now I don't really know how to go on with this thread. Should we abandon it and start new thread in the modules section? Or maybe this thread could be moved to modules section? What @moderators think of this? Meanwhile, for those who are following this thread I wanted to mention that there are some additions in the dev branch, such as mutations that allows you to create/update pages and there is also support for FieldtypeMapMarker field. I stopped developing the module for some time because I thought that it needed a good testing before moving further with it and decided to built an SPA using this module, to see if there is something that need to be added or changed. But then I got carried away and started to make usage of third-party APIs such as Wikipedia and GoogleMaps. As a result the app does not make heavy usage of the ProcessGraphQL module, but it is still relevant to showcase the module's abilities. It is a US Skyscrapers app, duh... You can see it live here and the source code here (though I doubt that the code will interest you if you are not a React developer). I was finished with this demo SPA just couple of days ago. Now I will be back to continue to work on this module again.

This is amazing and so easy to skin, I noticed a few CSS errors, I will put them on GitHub Great work Ryan!

Hey @bcartier and everyone who is following. I implemented a basic language support. Nothing really changed, except now with LanguageSupport enabled in your ProcessWire app, the GraphQL api will return the content in whatever language the user is assigned. In addition, when Language Support module is activated, there is a language field in your GraphQL api. So you can request the exact language you want. It looks like this. { language(name: "de") basic_page{ list{ title summary } } } You need to put the language field on the top. Well, not exactly on top but just before fields that return translatable content, like title, headline, body etc. It's because GraphQL processes requested fields from top to bottom and it will not know what language you want till it gets to language field. Did you also know that in GraphQL you can query same field multiple times with aliases? Here, take a look at this { basic_page_default: basic_page{ list{ title summary } } language(name: "de") basic_page_de: basic_page{ list{ title summary } } } Curious what will be the response? Try this with site-languages profile and find out.

@Oliver, @bcartier Thanks guys. Glad you like it. No, Language fields are not supported yet. There will be support for them too. Maybe I will implement them this weekend. In any case I will let you know when they are available. For those who are following this module, I make releases almost everyday. Sometimes I introduce new bugs but patch them as soon as I find them. There are bunch of features added since the first introduction. You can follow up the changes/additions in the changelog. Lots of parts are not documented yet but I will provide full documentation and possibly introduction video targeted to ProcessWire users, on what the module is about, how you can use it, along with some todo app tutorial. But for now, feel free to play with it and provide some feedback either here or in issue tracker. It is always easier to make changes in the beginning.

@Nurguly Ashyrov, this is really awesome. My front-end work is mostly JS/SPA work these days and I learnt to love the “headless”/“api first“ approach of commercial CMSes like Contentful. So I often thought about what a perfect and easy to manage back-end ProcessWire would be with a solid HTTP-based api built right in to allow uncoupling actual front-end/ui parts like admin and user interfaces (as actual self-contained apps) from the CMS itself. A module like yours makes a huge leap in this direction and will make ProcessWire much more interesting for a lot of front-end devs and e.g. as a flexible and fast to set up back-end for app prototyping/mvp development. A pity this didn’t exist 9 month ago!

Thank you @Werner Pilnei. I am excited because I like using ProcessWire . I try to do my best in introducing this module to the community. GraphQL is very young standard and is not mainstream yet. I intentionally started this thread in the Pub section, to make sure this is not a module support page but more a discussion on GraphQL (as this new api standard by facebook) and ProcessWire. To talk about how they could fit with each other, what ways we could use it, the new ways to use ProcessWire and so on. I personally never think about ProcessWire as a CMS. Though it is in fact a true CMS in its literal meaning, it is best at managing your content. But when people are introduced to ProcessWire it is presented as CMS and since the web is cursed by WordPress, people start using ProcessWire with wrong assumptions in their minds which result in negative impressions. I am generalizing here but when an average web developer hears CMS, she thinks it is a ready website with bunch of functionality baked in like tags, searching, blogging, commenting and so on. Those functionalities become the evaluation criteria and when they see that there is no tags in ProcessWire they count that as one of the things ProcessWire is missing. They don't understand that tags are something ProcessWire shouldn't have, because they are used to see tags in a CMS. I don't think that I am telling something new here. The community is well aware of this problem and the release of new site profile states that these problems are being addressed. But it doesn't have to be the only way. The modular architecture of ProcessWire allows us to extend it anyway we want, and this module is one of those attempts in presenting ProcessWire in different perspective. Even if it won't make much difference, I think we should keep trying and experimenting. Who knows what could come up along the way. I was only thinking about SPAs when creating this module. Never thought of PWA and usage with service workers like you approached it. Which is, by the way is great to hear. I hope there will be bunch of other ways people use it.

@Nurguly Ashyrov Hello Nurguly, I was following this thread from day one and I am deeply impressed by the passion you are putting into your 'baby'. Especially your in-depth explanations helped me understand your concept and getting first results on my own. Very often talented programmers do not have the same skill in teaching others . But you definitely have. Right now I am experimenting with your module to figure out if this could be a method to be used in a PWA (progressive web application). Using the GraphQL channel I would reload just my 'new' data via the service worker . Therefore it wouldn't matter that this data is exposed to the public - it should go there anyhow.

That will all depend on how you configure your api. If you wish this module can expose all pages in your website, including the system ones. Or you can restrict to some very limited data. There are more functionality to come, but at this stage the module supports: Template restrictions. You can choose which templates are enabled, but in addition it will conform to ProcessWire permissions. So you could limit access to certain templates only to certain user roles. You can enable access to only logged in users for example. Field restrictions. Also supports ProcessWire permissions. Including template context permissions. Meaning, you can allow title to be viewable for one template and restrict for another. Max limit support. Like the one you use in selectors. So users won't be able to get list of data for more than say 50 pages at a time. and also many other security options are on the roadmap: Built in field restrictions. At it's current stage api gives access to page fields like children, parents, createdUser..., or there are path, size, basename for files and images fields. Those will be disabled and available as extras. Query complexity limit. Currently you can build queries as deep as you want, to request ridiculous amounts of data. This will also be limited for only couple levels of complexity and you will be able to increase or decrease it.

It's probably not as feature rich, but I really like nette forms, where I can define validation rules for both client side and server side at once. The library is so nice to include a simple js file, to handle client side validation, which is additionally quite easy to enhance / change to ones specific needs.

A private photo gallery with user login is something that is asked for many times. I think this thread about it should have a summary and placed in Tutorials or FAQ. If somebody, or I can find the time to start collecting all the posts holding code examples and try to make a tutorial out of it.

PW 2.3 protects file-based assets to unpublished or non-public pages, so this won't be a concern much longer. Matching up names is just one way to do it. I just put together a quick module that provides another way you could do it even more easily: