Leaderboard

This week we've bumped the ProcessWire dev branch version to 3.0.239. Relative to the previous version, this includes 15 commits. This version is required if you decide to test out the new PageEditChildren module, which has also been released in the ProFields board today. I'm not sure it'll remain in the ProFields set of modules, as it's not even a field. But after spending multiple days updating ProFields modules to be compatible with it (also posted today), I thought it was best to keep them together for the short term. It's easier for me to support that way at least. Longer term, it may even become a core module. There's also a couple other modules in ProFields right now that I'm planning to move into the modules directory and GitHub. These most likely include TextBlocks, AutoLinks, and potentially FunctionalFields. These modules have not required much in terms of support resources in awhile, so may not need to be part of ProFields any longer. Thanks for reading and have a great weekend!

File Mover Allows the selection of files or images for moving or copying to a different field. The destination field can be on the same page as the source field or on a different page. Screencast For convenience in the screencast this demonstration shows moving and copying images and files between fields on the same page, but you can also move/copy between pages by following the same process. Usage In any Images or Files field, hover on the field label to show the File Mover icon. Clicking on the icon will reveal the File Mover buttons. If no items are yet selected you'll see a button labelled "Select items to later move or copy". Click the button to enter selection mode. While in selection mode, click one or more images/files to select them. When you have finished selecting items click the "Done" button. Note: you can only select from one Images and one Files field at a time before completing the move/copy step. In the Images or Files field that you want to move/copy the items to, hover the label to show the File Mover icon and click it to reveal the File Mover buttons. When you click the Move or Copy button the page will automatically be saved and the selected items will be moved or copied accordingly. There is also a button to clear the current selection if needed. If you hover on any of the buttons a tooltip shows the filenames of the currently selected items, in case you need a reminder. Configuration There is a field in the module config that defines which roles are allowed to use the File Mover module. If the field is left empty then all roles are allowed. https://github.com/Toutouwai/FileMover https://processwire.com/modules/file-mover/

Another update: More info() settings! Please check out v1.8

Just finding this. THIS IS HUGE! Thank you, @FireWire.

Version 1.2.70 is out! This version comes with support for the Pico CSS framework, a new method to output a success message under an inputfield and a file permission check for the root directory during the module installation. Thanks to @Andi for informing me about this CSS framework. I have never heard about it before. Also thanks to @Andy for reporting the issue with the file permission. Please read the changelog.md for more detailed information. Jürgen

Hey @bernhard - I think there's a bit of a problem with storing the enabled settings in wireCache. The cache can be manually cleared for a variety of reasons, and also really important is the fact that the default expiry is 24 hours which makes it pretty useless for this purpose :) Why can't these be stored in the module's config settings?

Hey all! This is a module to enhance forms built using the Pro FormBuilder module by providing the ability to submit them in place using AJAX and HTMX. FormBuilderHtmx works in harmony with FormBuilder by handling front-end rendering and AJAX and lets FormBuilder manage form configuration and processing. FormBuilderHtmx provides a drop-in replacement for the $forms->render() method and provides all native features and behavior (and adds a few extra superpowers to boot). Noteworthy features: Zero configuration, install and render AJAX powered FormBuilder forms immediately Render multiple forms on the same page. Supports both multiple instances of the same form or different forms. Each form is processed independently. Non-intrusive, can be used alongside FormBuilder's native rendering methods and does not modify core module behavior Perfect for forms embedded in popups and modals Does not conflict with styling and other JavaScript already in-place, only handles the form submission/response loop Automatically disables the `Submit` button on submission to prevent duplicate requests Provides the ability to add a custom 'spinner' shown when a form is being processed Gives you the ability to add additional HTML attributes to your FormBuilder <form> element. Add additional custom functionality using HTMX attributes, hook into form actions with your JavaScript, or even add AlpineJS directly to your forms. Compatible with FieldtypeFormSelect, let users choose which forms to embed, your code determines how they are rendered Uses HTMX, a stable, powerful, and tiny (14kb gzipped) library, installation documentation available here This module is BYOH (Bring Your Own HTMX) in that the HTMX library is not included or available within this module. This ensures long-term stability by not locking FormBuilderHtmx to external asset versioning. FormBuilderHtmx uses stable core HTMX features so use the library version that works for you and confidently add this module to both new, existing, and future ProcessWire applications. In some instances CSRF protection may need to be disabled to submit forms with this module. Just test your forms and you're good to go. Using this module is truly easy. <!-- Replace the native $forms->render() method with $htmxForms->render() --> <?php $htmxForm = $htmxForms->render('your_form_name') ?> <!-- Use native ProcessWire properties and methods as usual --> <?php echo $htmxForm->styles; echo $htmxForm->scripts; echo $htmxForm; ?> Presto. You can optionally include a helpful 'spinner' or activity animation that will be showed to users while their form request is being processed. Check out these ready-to-go examples you can use in your projects. <style> /* Add these styles to your CSS, the `.htmx-request` must be present as shown here. Be sure to include any CSS your 'spinner' may need, and style everything as desired */ .activity-indicator { display: none; } .htmx-request .activity-indicator, .htmx-request.activity-indicator { display: block; } </style> <!-- Optional second argument matches that of the $forms->render() method for pre-populated values The third argument is the CSS selector matching your 'spinner' element --> <?= $htmxForms->render('your_form_name', [], '#indicator-for-the-form') ?> <div id="indicator-for-the-form" class="activity-indicator"> <span class="spinner"></span> </div> Presto (again) Check out the documentation for detailed usage and other available features. Pull requests and issues filed on Github are welcome, or drop by here to get some help! Install as a ProcessWire module Install using Composer Download from the FormBuilderHtmx Github repository . Cheers!

Hey ProcessWire RockStars! ? Ever felt like your ProcessWire backend could use a bit more... pizzazz? Or functionality? Well, it's time to roll up your sleeves and dive into the world of RockAdminTweaks! ??️ Creating tweaks is as easy as smashing a power chord on your guitar! If you've got cool features from AOS you'd love to see, why not port them over? We even have a GUI for creating new Tweaks! Let's make the backend rock even harder! Github: https://github.com/baumrock/RockAdminTweaks Modules Directory: https://processwire.com/modules/rock-admin-tweaks/ Docs: https://www.baumrock.com/processwire/module/rockadmintweaks/

Hello all, I have released RockFrontendTailwind, an extension module for RockFrontend. It extends Bernhard's module and adds an installation profile for site development with Tailwind CSS. Obviously RockFrontend is a required dependency for my module to work. This module aims to give you a quick start with a Tailwind based project. What RockFrontendTailwind does: A folder "rockfrontendtailwind" will be installed in site/templates. That folder contains all the configuration files needed to get you started with a webpack-based build pipeline for JS and CSS with webpack tailwindcss postcss with postcss-preset-env (for autoprefixing) babel (for transpiling) So rather than just building the CSS with Tailwind, the build pipeline also takes care of transpiling your Javascript based on configuration in a .browserslist file. Of course, the setup is opinionated. But people who are comfortable working with webpack can easily adjust / extend the configuration to their liking. The default configuration watches your JS and CSS files and compiles them into site/templates/assets main.css and main.js by default. All paths are configurable through a .env file. Live reloading during development is not part of the webpack configuration since this is handled by RockFrontend already in a very efficient way. Also a _main.php file including a very basic boilerplate for a typical setup will be placed insite/templates. It includes examples on how to render your JS and CSS assets. More detailed instructions over at github. Adding new profiles to RockFrontend through your own modules is quite straight forward thanks to the clear structure in @bernhard's module. RockFrontendTailwind can serve as a boilerplate. The only important thing is that the "profiles" folder structure remains the same. The module is currently in beta but runs very stable. It will eventually be released as an official module in the directory soon. If you want to give it a shot, I shall be happy to hear your feedback. If you are looking for a standalone webpack build pipeline with webpack-dev-server, you might want to have a look at https://github.com/gebeer/tailwind-css-webpack-processwire-starter Happy Coding!

Consider checking 404 logs and see if there's excess traffic to nonexistent pages. If so, and depending on you are handling those and if they are pages that take a lot of database power to generate, handle accordingly. Bad traffic can sometimes cause performance issues.

Short update. I was able to uninstall SessionHandlerDB successfully now and the errors have stopped. But the site remains very slow and the API calls are intermittently quick and then VERY, VERY slow. I have Dreamhost looking into the issue because I truly believe it is an issue with the MySQL VPS (and/or the networking) they have my client on.

Very cool. Thank you, @Robin S.

Hey @MarkE, I know the feeling ? If you want to make absolutely sure, I'd suggest making a Duplicator copy of the entire site, install it on your live environment, using a subdomain and a different database.. Then update that site and see if it fixes things.. Just don't get confused with the different installations ?

Hi @Andi Yes its weekend... or so ?! I have updated the module with some code changes. What I cannot reproduce on my site is that both, the error message and the success message will be displayed side by side. I only get the error message OR the success message but not both at the same time. I have added a check if a value is entered inside a field. If not and no error has been occured, the the success massage and the aria attributes will not be added to the input field. Please try it and let me know if it works on your side. Best regards

Haha, really cool @Juergen, but wasn't it supposed to be weekend? ? Working nicely over here, and now configuration really is a breeze! One little thing I've come across during testing, if I disable HTML5 validation and just submit an empty form, the success message gets printed below the error (see Screenshot 1). Steps to reproduce: Framework -> Pico2 Field code: // disable html5 validation $form->setHtml5Validation(false); // add name field $name = new \FrontendForms\InputText('name'); $name->setAttribute("placeholder", "Name"); $name->setRule('required')->setCustomMessage('Please enter your name'); $name->setSuccessMessage('Looking good!'); $form->add($name); And the resulting HTML, after submitting an empty form: <input id="contactform-name" name="contactform-name" type="text" class="input input-error" placeholder="Name" required="" aria-invalid="true" aria-errormessage="contactform-name-errormsg"> <small class="error" id="contactform-name-errormsg">Please enter your name</small> <small class="valid">Looking good!</small> When entering a value, everything's working as expected (see Screenshot 2). Really glad you like Pico! Just found out about it myself a few days ago in this post by @Jonathan Lahijani and I think it 's going to make a great fit for smaller PW projects. All the best and have a nice weekend, coding or otherwise ?

A lot has happened since the first version of PAGEGRID. At first I used PAGEGRID myself to build smaller custom websites faster or to allow users more freedom for the layout of certain pages. But since a page builder like this is quite time consuming to maintain, I decided to release PAGEGRID as a commercial module to support it in the long run. Initially I had ProcessWire users in mind. But my idea for the module was also to make PAGEGRID (and ProcessWire) interesting for a group of users who are not so experienced with code. I soon realized that this group is able to work with PAGEGRID, but often does not get along with the installation process (E.g. Graphic designer friends of mine were never able to install ProcessWire themselves). Things that we take for granted, such as creating a database and working with FTP, were difficult for them. That's why I decided to launch PAGEGRID cloud. PAGEGRID Cloud ☁️ With the new cloud service, it's easier than ever to create a website. Don't worry about hosting, installation and server updates and focus on designing your website ?️. Start with the free plan and upgrade to unlock more features. Websites are hosten on Uberspace and the process of creating a new ProcessWire instance is completely automated. For now consider this a beta launch, since it was not tested with a lot of users. Even if you are not inetrested in PAGEGRID Cloud, I am happy about everyone who wants to help with testing. Start for free (Note: I won't share your email with third parties or spam your inbox and your password is saved through ProcessWire's native encrypted password field.) Self-hosting Of course you can still host PAGEGRID yourself. Just install the module (The site profile is deprecated, but I made it much easier to get started with the module). You can even export an existing cloud website and install it on another server (E.g. You can start with the free cloud plan and later export the site und install it on your own server). Self-hosting is more flexible since you have access to the API and code. This is the best option for users with coding knowledge, who want to build their own blocks or use PAGEGRID as part of a larger individual website. Other updates this month: Pin scroll animations Elements can now be pinned to the screen for a certain scroll distance. When the scroll distance is exceeded, they are released and continue to scroll normally. This feature uses the native CSS position sticky and some javascript to update the scroll state. Client-side resizing of images The latest update brings support for client-side resizing of images uploaded through the inline file uploader. Once enabled images will be resized and compressed before they are uploaded to the server. This makes uploads faster and saves disc space. You can enable this option in the admin through ProcessWire's native image field settings. Accordion Block (PageGridBlocks Module) I added a new block that shows a vertically stacked set of clickable headings that can be expanded to show more content. Content can be added as child items, so you can be very flexible with the design of it.

@kongondo THX! I have no experience with GCP, AWS, so I can not really compare those to Uberspace. I also never managed a server or VPS myself (Always used shared hosting or worked with a server admin). Managing a server seemed to complicated and time consuming for my usecase. I started having a discussion about my plans with @diogo and he showed me Uberspace (I never heard of it) and it had everything I needed already installed and ready to go. It's like shared hosting but with shell access (+ it has HTTPS for all domains and takes care of PHP/MYSQL updates). Also the price from 5€/month is very fair and the attitude of the people is very nice. I can only recommend everyone to try it out, because you can automate a lot of things through the shell (databases, install ProcessWire etc.). One thing to consider is that it will only work for a limited number of users, as 100 GB is the storage limit per account (At that point you have to pay 15€/Month). Also I think the servers are located in germany (not sure), which can be nice for GDPR but might not be ideal for people outside of europe. And of cause you have to think if it makes sense (financially) to spend the time to develop it (In my case most likely not, but it was fun ?). My setup is kind of like a multi-site installation that shares the wire folder, site templates and modules (those are just symlinked). The assets folder and config file changes for each ProcessWire instance. So to create a new instance I clone a "master" folder (with the smylinks and files/folders) and clone the "master database". Of cause there is more going on (like Gumroad integration, etc), but this is the basic setup. If you have any further questions, you can also send me a DM and I will try to answer them.

I've been running processwire locally with the vendor/ folder up one level, outside the site root. Check out Moritz' post on processwire.dev for the background to this. This works fine, but requires a few tweaks. I can't find the post at the moment, but I do remember reading that Ryan has said that he considers the /index.php file as site-specific and therefore can be edited by users for their specific installations. So I've chosen to edit the vendor/ path directly in /index.php for testing. I've also been experimenting with allowing the installation to define the vendor/ path via an environment variable, and this seems to work well, too. I've put in a speculative pull request for this.

No worries, I have no guidelines in place so nobody can know. Once I tried to protect the main branch from PRs but then something else was not working any more (I think automated releases)... But I think with this module and if it's only about new tweaks it shouldn't matter at all where the PRs want to merge, I'm not sure, I'll try that out tomorrow ? Great input. I've thought of a new parameter like "help" or something, and maybe one for "author" to give proper credits and one for "maintainer" if that's someone else (like you or @netcarver porting over tweaks from tpr/aos). "help" would be markdown syntax and show up in a modal. author/maintainer could be icons ? I don't think that I like the idea of having tweaks spread around several repos of several people! The module is MIT, so I'm happy to maintain it for now and if something should happen anybody could take over.

Yeah, the subresource key is a hash of the file contents so that will break at some point on @latest. Alternatively, I don't want to introduce external resource versioning since it would mean the module has to be updated to keep up with HTMX. Biggest deal for me is that, as an online privacy advocate, I can't recommend something that I wouldn't use myself. Agreed! Great way to add SPA features without fundamentally changing ProcessWire rendering. I'd argue that it's the way that interactive UI should be built to begin with.

Thanks for the module! htmx is awesome and absolutely the right tool for such things.

I've been continuing to work on the PageEditChildren module that I wrote about here last week. This week a "Clone" feature was added. You can click the Clone action and it'll create a copy of the page below the one you cloned, and then make it immediately editable before you even have to save. This Clone action is an example of an Inputfield header action, and it accompanies the Move, Pub/Unpub and Trash actions for each page in PageEditChildren. I thought this ability to add Inputfield actions seemed useful beyond just this module, so the ability has been added directly into ProcessWire's core Inputfields JS API. If you grab the current dev branch of ProcessWire, you can test it out if you'd like. You can paste these examples in your web browser's Javascript console. But in actual web development, you'd likely put these in a separate JS file that is added to your page editor with a hook. Open the page editor to any page, then open your Javascript console in your web browser, and then paste this in: Inputfields.addHeaderAction('title', { icon: 'fa-hand-stop-o', callback: function() { ProcessWire.alert('Hello World!'); } }); That should add a hand icon to your "Title" field header, and if you click it, it'll pop-up a dialog box that says "Hello World". Let's say you wanted it to show a different icon when you hover it, and also to show tooltip text via a title attribute. You can add the 'overIcon' to specify what icon to show on mouseover, and 'tooltip' to specify the tooltip text: Inputfields.addHeaderAction('title', { icon: 'fa-hand-stop-o', overIcon: 'fa-hand-peace-o', tooltip: 'Hello world', callback: function() { ProcessWire.alert('Hello World!'); } }); Above are examples of 'click' actions. We also support toggle or "on/off" actions: Inputfields.addHeaderAction('title', { onIcon: 'fa-toggle-on', onTooltip: 'Click to toggle off', onCallback: function() { ProcessWire.alert('You toggled on'); }, offIcon: 'fa-toggle-off', offTooltip: 'Click to toggle on', offCallback: function() { ProcessWire.alert('You toggled off'); } }); Toggle actions like this are primarily what is used by the PageEditChildren module to handle the Published vs Unpublished state, and Trash on/off state. Whereas "Clone" is an example of a Click action. Our callback functions in the examples above are very simple alerts, but of course you could make it do anything you want in those callbacks. Also added this week to the Inputfield JS API was an update to the Inputfields.label() function that now allows you to set the label for an Inputfield (previously it could only get the label). This is a bit of a contrived example, but since we were talking about header actions above, let's demonstrate the label() function within a header action. This example adds an action that lets you edit the Inputfield label: Inputfields.addHeaderAction('title', { icon: 'smile-o', callback: function($f) { ProcessWire.prompt('Enter new label', 'Label', function(val) { if(val) Inputfields.label($f, val); }); } }); By the way, there's a lot more to the Inputfields JS API, and it's all documented directly in ProcessWire's inputfields.js file. I'll be bumping the core dev version next week to hopefully accompany the first version of the PageEditChildren module. Thanks for reading and have a great weekend!

This week we have another update to the ProFields table field. A couple of weeks ago I wrote a blog post about Table v28 and the new actions features that it added. I've been working with Table a lot for my current client project, and have found these new features very useful. But I'm doing a lot of data entry in Table and found I still wanted more. Specifically, I wanted to be able to apply some of the actions directly on the row I was working in (rather than having to select it and then scroll down to the actions). Kind of like how one can click the Trash icon on any row to delete the row... I wanted to be able to apply other actions in the same way (Add, Clone, Copy, Paste). And Table v29 (released today) does exactly that. Another desire I had is for the for row-level actions to be just really simple, with not too much to look at... something folks could use rapidly without having a lot to read. This leaves several powerful and verbose features for the actions menu you saw earlier (the one that appears under the Table). Below is a video that outlines these new row-level actions. It's actually the same video from before, but I added to it for the version 29 features. So I'll try to post a link that starts at the timecode of the new stuff. But if you haven't seen this video before, you may want to rewind to the beginning. Below is the full CHANGELOG for this version: Expanded actions support so you can also execute actions directly on individual rows, which is often more convenient than selecting rows and then applying actions. Hold down the SHIFT key before clicking the row actions select and it will convert any actions that usually append rows to instead prepend rows. This works with the the Add, Clone and Paste actions when clicked at the individual row-level. It also works with the Select action for selecting multiple rows at once. The Select action is there in part for people that may not realize you can already click the sort arrows to select the row. Removed the Vex dialogs when copying or pasting and replaced them with other visual cues to indicate successful copy and/or paste. Added a new config option for disabling the DELETE (trash) icon on individual rows when individual row actions are enabled. This is because the row actions already include a delete action, so the trash icon can be redundant for some who might prefer the additional space. For all non-page selection column types, a new "Settings" option was added (named “formattedValueType”) to indicate how the value should be represented when accessed from a formatted page. Previously the API value was always the selection value. Now you can specify that it should include both the value and label (in your choice of array), or just the label rather than the value. Table v29 beta is available for download now in the ProFields download thread. More core updates are likely for next week. Thanks for reading and have a great weekend!

@maetmar not sure where you read about RockForms, but it's definitely neither a module by Ryan nor a replacement for FormBuilder, which is Ryans pro module. RockForms is a module built by me (baumrock.com) and is - like FormBuilder - a module that tries to help us developers to create secure and versatile forms for PW websites easily and quickly. In contrast to FormBuilder it does not come with a UI to build your forms. Instead if offers a simple* API to define your forms from within one PHP file and get forms with 100% custom markup (no iframes!) that have validation both on the frontend and backend with just on single source of code. As you define your forms in code rather than via GUI it is a lot easier to work with it on GIT based workflows. * it's based on nette forms and the API is unfortunately not as straightforward as we are used to from PW, but I did my best to make the experience as smooth as possible.

Indeed. Pico CSS, which is a minimal CSS framework, takes that approach: https://v2.picocss.com/docs https://v2.picocss.com/docs/accordion I wish they supported tabs however.