Jump to content

Module: ProcessPreview

Nico Knoll

Recommended Posts


here's a really simple preview module. It adds a "preview" button next to "save".

To use it you have to copy "preview.php" to your root folder. (If the module has write permission it should do it automatically).

Please let me now if it work and what do you think about it.

You can download it here: https://github.com/NicoKnoll/ProcessPreview/

Happy new year(!!!),


Link to comment
Share on other sites

Works great Nico.

How about cloning it to upper right area (like the save button and other buttons are cloned)?

I would also add "float: left" to #wrap_preview div in ProcessPreview.css so it would show before "Save page" button, it makes sense...

Link to comment
Share on other sites

Great module Nico! This is a way of going about it that I hadn't considered before. It seems to work quite well on the pages I tested it with. A few comments/suggestions:

1. This is another module that shouldn't be a 'Process' module the way it's currently implemented. But I think you may want to make this a real Process module for another reason (below). But if you stick with the preview.php method, then you likely want to make this a regular non-Process module and make it extend WireData rather than Process.

2. I'm concerned about the safety of preview.php. This gives any logged-in user access to view any page they want to. If you had to stick with this method, I would change it as follows:


include './index.php'; // add "./" before index.php to ensure it's not picking up another from PHP's path

if(!wire('user')->isLoggedin()) throw new Wire404Exception(); 

$page = wire('pages')->get((int) $_GET['id']); // typecast to (int)

if(!$page || !$page->id) throw new Wire404Exception(); // check that it exists
if(!$page->editable()) throw new WirePermissionException("You don't have access to edit that page"); // check for edit permission 

foreach(wire('input')->get as $key => $value) { // change from $_GET to wire('input')->get
   $key = wire('sanitizer')->name($key); 
   if($key != $_GET['key']) continue; // skip over invalid field name
   if(!$page->fields->getField($key)) continue; // skip over field that this page doesn't have
   $return->setFieldValue($key, $value, false); // add the extra 'false' for optimization: prevents PW from loading previous value

echo $return->setOutputFormatting(true)->render();

3. What may be a preferable way to implement this is to move everything from preview.php into an execute() function of your ProcessPreview.module. Then have ProcessPreview's install method add a page using the 'admin' template to /processwire/page/preview/ and assign ProcessPreview to the 'process' property of that page. See the install() method of this module for an example of how to do that: https://github.com/ryancramerdesign/ImportPagesCSV/blob/master/ImportPagesCSV.module

The reason may be be a preferable way to do it is because it ensures that PW admin is still the gatekeeper to an admin activity. And it also removes the necessity for someone to have an extra php file that they might or might not have to copy to your site root. However, if you still prefer preview.php, I don't necessarily see a problem with using the preview.php if the security of it is updated like in the example above.


Edit: added 2 more lines in the foreach

Link to comment
Share on other sites

  • 3 weeks later...

Hi Nico

I get the following error:

Request-URI Too Large

Is it trying to pass the entire page body in a $_GET var? That's what it appears to be doing on my installation anyway :(

Link to comment
Share on other sites

  • 2 months later...

Howdy cowboys!

Please let me introduce ProcessPreview 2.0.

The new version doesn't need the preview.php anymore because it works completely different. Just have a look in the code (only 89 lines!).

Also it now uses AJAX POST requests instead of the old GET way.

You can download it on GitHub: https://github.com/NicoKnoll/ProcessPreview/



  • Like 1
Link to comment
Share on other sites

Nice - I see precisely what's happening and that's a clever way of doing it indeed :)

For anyone confused as to what the new module does, it basically allows you to view the page as if it were published. In fact, for the current page it sets the status of the page as though it were published (I think) but only for the page launched by the preview button, and doesn't save that state, so you're viewing it as if it were published even though it isn't.

I think that's right anyway.

Link to comment
Share on other sites

Nico thanks for the update! I just gave it a try. But...

Do you know that the "view" button of PW does actually same as this module? Any logged in user that can edit/view a page can also "view" it even if the page is unpublished. I didn't knew that for some time.

So this module could just add a target='_blank' attribute to the "view" tab and do the exactly same.

The other thing is: This module doesn't do what I expect from a "preview" module. I would assume that when I want to "preview" a page I'm editing, that it works without saving the page actually. I guess there would be the need to have a more complicated process going to get this work. I can't think of any atm. But I'm sure there is one.

After testing you module, there was an issue when I click preview, it opens new window. I close the window, and when I click "save" it open 1-2 Windows again with the preview. I close them and still the same. I need to reload the page to get saving to work.

Link to comment
Share on other sites

Ahh sorry now I see it does some saving of the page (post). If I change the title it does show on preview without saving.. but it doesn't seem to work always only every 2th time? There's something strange that's why I assumed it doesn't save.

Also will this approach work with when there's some logic happen in the template view to show something based on the pages id or childs?

Link to comment
Share on other sites

Well, the main point is that you don't have to save or publish the page before you see a preview of it. And it should work after the first click on the button you just have to wait some seconds because of the ajax request.

Link to comment
Share on other sites

Uploaded a new version. It should fix the broken "save" button and the multiple preview windows. Another addition is that you now can see when the preview is loaded because the previe button goes back to green after loading it.

Link to comment
Share on other sites

Thanks for the update. The save button now works.

1. When debug mode on, it breaks the admin. Notice shows up and page tree doesn't get loaded.

Notice: Undefined index: id in /.../site/modules/ProcessPreview/ProcessPreview.module on line 31

2. Still, when I open a page, edit something in the text, click "preview" it opens window, but the text change isn't there. When I close the window and hit "preview" again, it shows the updated text. Which means it only works every 2th time I hit "preview" when I change a text. In other words, everytime I change a text I have to open "preview" 2 times to see the change.

Link to comment
Share on other sites

Thanks Nico. Any news to issue #2?

I noticed another problem when submitting a front-end form and have this module installed I get this error:

Error Exception: You must assign a template to the page before setting custom field values. (in /Applications/XAMPP/xamppfiles/htdocs/pw-dev/wire/core/Page.php line 335)

#0 /Applications/XAMPP/xamppfiles/htdocs/pw-dev/site/modules/ProcessPreview/ProcessPreview.module(38): Page->setFieldValue('_form_id', '35cf3e112fd7061...')
#1 /Applications/XAMPP/xamppfiles/htdocs/pw-dev/wire/core/Wire.php(291): ProcessPreview->changeView(Object(HookEvent))
#2 /Applications/XAMPP/xamppfiles/htdocs/pw-dev/wire/core/Wire.php(229): Wire->runHooks('execute', Array)
#3 [internal function]: Wire->__call('execute', Array)
#4 /Applications/XAMPP/xamppfiles/htdocs/pw-dev/index.php(198): ProcessPageView->execute()
#5 {main}
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...