Module: ProcessPreview

[Nico Knoll]

Hi,

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(!!!),

Nico

[nikola]

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...

[Nico Knoll]

To the first: Tested it - doesn't look good...

To the second: I guess it's better like this, because "Save"/"Publish" is the main button and "Preview" is just a second, optional.

[ryan]

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:

<?php

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

[ryan]

Nico are you still working on this? I'm intrigued by the possibilities with this module–keep up the great work here.

[Nico Knoll]

Well yeah I'm working on it but I hadn't much time this week because of my school life. So at the weekend I probably improve this module

[Nico Knoll]

OK, I updated preview.php with something much simular to Ryans posted code. So it should be much safer while I'm working on the backed method. Same download link like in the first post.

[ryan]

Thanks for the update Nico!

[Soma]

Just wanted to hook me in. Great idea Nico. Thanks for the module! I will check it out soon, as it's a often requested feature.

[carlos]

I think this forum must read minds. I just had some users ask for this exact feature. Thanks Nico, extremely useful.

[Pete]

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

[Nico Knoll]

Yes, this is how it works. But I'm working on an alternative way. So I wil release a better version within the next week.

/ Nico

[Pete]

Ah right, I was trying to preview a particularly lengthy article

[ryan]

I'm guessing this one can be solved just by using POST rather than GET?

[Nico Knoll]

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/

Greets,

Nico

[Pete]

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.

[Soma]

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.

[Soma]

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?

[Nico Knoll]

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.

[Soma]

Well, it doesn't. Save button is broken after using "preview" ones. And the preview only shows the changed text every 2th time I click "preview".

[Nico Knoll]

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.

[Soma]

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.

[Nico Knoll]

Should work now in the debug mode.

[Soma]

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}

[Nico Knoll]

Same thing happened to me some minutes ago. I'm not sure why but I'll try to fix it

And to issue#2: Which browser are you using and which system? Because I don't have this problem with Chrome on Mac OS X.