nico65

Frontend editing in extra Page

Recommended Posts

Hello,

the frontend edit mode in pw3 is allready great. But I'n looking for a solution where I can have the create/update form on a edite page. (url/urlsegmaent=edit).

With all the released code here I was able to put together some code that does that.

So far it works to fill the page for the first time, but unfortunaly it dosen't work so great on updating the page.

When I try to update, the page disappears from the frontend. Its still visible in the backend but seems to be corrupt.

Here is the code I used:
 

<?php namespace ProcessWire; ?>

<?php $content =''; ?>

<?php
$content = '';
$out = '';



if ($input->urlSegment(1 ) =='edit'):
if(!isPageOwner()) throw new Wire404Exception();

// Edit Form
// get a page
$editpage = $page->setOutputFormatting(false);
$ignorefields = array("isOld","user_activation","language_published","roles","admin_theme");
$form = $modules->get("InputfieldForm");
$form->method = 'post';
$form->action = './';
// get the collection of inputs that can populate this page's fields
$inputfields = $editpage->getInputfields();
// make all the fields required and add them to the form

foreach($inputfields as $inputfield) {
    if(in_array($inputfield->name, $ignorefields)) continue;
    $form->add($inputfield);
}
// the inputfields don't already have a submit button, so we'll add one.
$submit = $modules->get("InputfieldSubmit");
$submit->name = "submit";
$submit->value = 'Submit';
// add the submit button the the form
$form->add($submit);
// process the form


    var_dump($editpage->snippet_repeaterblock->first());
    echo '<hr>';
    var_dump($editpage->snippet_repeaterblock);
    echo '<hr>';
    $rpf_count = $editpage->snippet_repeaterblock->count();
    echo $rpf_count;

if($this->input->post->submit) {



    echo $firstRepeaterId;

    $n = 1;
    $codesnippet = "snippet_code_repeater$n";
    $codelanguage = "snippet_select_codelanguage_repeater$n";

    $snippet_repeaterblocks = $editpage->snippet_repeaterblock; // the repeaters
    foreach ($snippet_repeaterblocks as $item){

      #  $item = $pages->get("id=$snippet_repeaterblock->id"); // the repeater page we want to update
        $item->of(false);

        // update repeater fields
        $item->snippet_code_repeater = $input->post->$codesnippet;
        $item->snippet_select_codelanguage_repeater = $input->post->$codelanguage;

        // save the repeater page
        $item->save();

        // update counter etc
        $n++;
        $codesnippet = "snippet_code_repeater$n";
        $codelanguage = "snippet_select_codelanguage_repeater$n";
    }



    # New Code End
// now we assume the form has been submitted.
// tell the form to process input from the post vars.
    $form->processInput($this->input->post);
// see if any errors occurred
    if( count( $form->getErrors() )) {
// re-render the form, it will include the error messages
        $out .= $form->render();
    } else {
// successful form submission, so populate the page with the new values.
        foreach($form as $field) {
           $donotpopulate = array("snippet_repeaterblock");
          if(in_array($field->name, $donotpopulate)) continue;
            $editpage->set($field->name, $field->value);

            echo $field->name;
            echo ':';
            echo $field->value;
            echo '<hr />';
        }
// save it
        $editpage->of(false);
        $editpage->save();
        $out .= "Page saved.";
        $out .= $form->render();
        $content .= $out;
    }
}
else {
    $out .= $form->render();
    $content .= $out;
}


else:
?>

<?php /* -------------------- UserProfile */ ?>
<?php $cuser = $page->createdUser->id; ?>
<?php   $cusername =  $users->get($cuser)->name; ?>
<?php   $cusermail =  $users->get($cuser)->email;  ?>



<?php # print_r($page->createdUser); ?>

<?php /* -------------------- TAGS*/ ?>
<?php $snippet_tag_count = count($page->get("snippet_tag"));
$allsnippettags = $page->get("snippet_tag");
if ($snippet_tag_count > 0 ):
    $tagcontent ='<ul class="snippet_tags">';

    $tagcontent ='';
    $tagcontent .='<ul class="all-tags">';
    foreach ($allsnippettags as $allsnippettag) :
        $alltagtitle = $allsnippettag['title'];
        $alltagid = $allsnippettag['id'];
        $alltagpath = $allsnippettag['path'];
        $alltagurl = $baseurl.$alltagpath;
        $tagcontent .='<li class="all-snippet_tag">Tag: <a href="'.$alltagurl.'">'.$alltagtitle.'</a>';
        #  print_r($allsnippettag);
        ?>

        <?php $tag = $allsnippettag['name'];
        $matches = $pages->find("snippet_tag=$tag");
        $matchescount = count($matches);

        $tagcontent .='<ul class="tags">';
        foreach ($matches as $match) :

            $tagtitle = $match['title'];
            $tagid = $match['id'];
            $tagpath = $match['path'];
            $tagurl = $baseurl.$tagpath;
            $tagcontent .='<li class="snippet_tag "><a href="'.$tagurl.'">'.$tagtitle.'</a></li>';
        endforeach;
        $tagcontent .='</ul>';
        $tagcontent .='</li>';
    endforeach;
    $tagcontent .='</ul>';

endif;
?>

<?php $content .= "<div id='snippet' edit='snippet_repeaterblock,snippet_tag'>";
$content .= "<p>Create Snippet</p>";
foreach ($page->snippet_repeaterblock as $repeater_item) {
    if ($repeater_item->get("cb_desc_code")):
        $content .= "<div class='snippet_description'>" . $repeater_item->get("snippet_description") . "</div>";
    else :
        $content .= "<pre><code>" . $repeater_item->get("snippet_code") . "</code></pre>";
    endif;
}

$content .= '</div>';
$content .= $tagcontent;
$content .= '<div class="CreatedUser"><a href="'.$baseurl.'snippets/'.$page->createdUser.'" >'.$cusername.'</a></div>';

If someone has some ideas that would be great.

Best
Nico

Share this post


Link to post
Share on other sites

Hi Nico,

Welcome to the forums.

Just wondering why you don't want to use the backend to edit your pages. My take is this: the whole point of the frontend edit features is that you stay on the page being edited. If you are navigating to a separate page for editing then that might as well be "Edit Page" in the backend - no need to reinvent the wheel.

You can display a link to Edit Page in the frontend only to users who may edit the page:

if($page->editable()) {
    echo "<a target='_blank' href='{$page->editURL}'>Edit this page</a>";
}

Or if you wanted to keep the /url/to/page/edit/ scheme you could redirect to Edit Page:

if($input->urlSegment(1) == 'edit') {
    if($page->editable()) {
        $session->redirect($page->editURL);
    } else {
        throw new Wire404Exception();
    }
}

 

  • Like 2

Share this post


Link to post
Share on other sites
19 hours ago, Robin S said:

Hi Nico,

Welcome to the forums.

Just wondering why you don't want to use the backend to edit your pages. My take is this: the whole point of the frontend edit features is that you stay on the page being edited. If you are navigating to a separate page for editing then that might as well be "Edit Page" in the backend - no need to reinvent the wheel.

You can display a link to Edit Page in the frontend only to users who may edit the page:


if($page->editable()) {
    echo "<a target='_blank' href='{$page->editURL}'>Edit this page</a>";
}

Or if you wanted to keep the /url/to/page/edit/ scheme you could redirect to Edit Page:


if($input->urlSegment(1) == 'edit') {
    if($page->editable()) {
        $session->redirect($page->editURL);
    } else {
        throw new Wire404Exception();
    }
}

 

Will you redirected back the (frontend) page after backend edit and save?

Share this post


Link to post
Share on other sites

Hi Robin,

thank you, I'll try that.

what I try to do, is having a system where frontend user can create and maintain code snippets.
So in the frontend they create a new snippet page and then they are redirected to the page where they can edit all the fields.
Repeater, Tags, Images etc.

What, I did first and what works was to open the edit modal after getting to the newly created page.

But somehow I think it would be a little bit more elegant if the editing would happen in an extra page.
 

since I'm new to pw this project is just to get familiar with the system and the different possibilities.

 

 

Share this post


Link to post
Share on other sites

hi nico65,

welcome to the forum! seems you want to achieve something like this?

removed because i reached my attachment size limit

Have a read about FREDI and FEEL 

the screencast above is a simple module made by me and not officially released yet, called ALFRED: 

you can try it out if you want. the source is here: https://gitlab.com/baumrock/Alfred/tree/dev

  • Like 1

Share this post


Link to post
Share on other sites

Thank you Bernhard,

for your suggestions, but I think, since I use PW3, I think I don't need Fredi or Feel.

My intention is also to not have a modal popup.


Another idea is to redirect directly to the modal url e.g. "page/edit/?id=1115&s=1&modal=1&fields=snippet_repeaterblock,snippet_tag&changes=snippet_repeaterblock" 

But here I need to alter the template. Add Header/Footer maybe a css File and a "Back to Page" Button.

Has someone an Idea how to archieve that?

Share this post


Link to post
Share on other sites
13 minutes ago, nico65 said:

My intention is also to not have a modal popup.

may i ask why?

you can easily inject scripts and styles to your admin via  admin custom files and/or hooks

 

Share this post


Link to post
Share on other sites

@bernhard Maybe because modals can be quite shitty on mobile devices? 

I'm not sure if you can manage to keep the url but what about a simple session redirect to this url (no modal=1)?

page/edit/?id=1115&s=1&fields=snippet_repeaterblock,snippet_tag&changes=snippet_repeaterblock

Share this post


Link to post
Share on other sites

The main reason was actually, when creating the "Snippet" in frontend I redirected to the new page and opend the modal automatcly via jquery.
This just looked and felt a little weired. I thought it might look better beeing redirected directly to the edit page.

Another thing is that I try to have more the look and feel of the frontend instead of the backend, but this is something I can figure out later.

 

And LostKobrakai thanks for the tip without the modal template, but that would be too much backend for my taste

Share this post


Link to post
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.

  • Similar Content

    • By ridgedale
      Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.
      I've setup a hidden page and template (sitePreferences - with no associated template file) containing site-wide preferences/settings, however I can't get the field content to display.
      I've tried the following which either display nothing or break the site:
      <?php echo $item->siteChairperson; ?> <-- nothing gets displayed <?php echo $field->siteChairperson; ?> <-- nothing gets displayed <?php =page()->siteChairperson ?> <-- breaks site <?php echo $field = $fields->get('siteChairperson'); ?> <-- displays the text siteChairperson instead of the name. <?php =sitePreferences()->siteChairperson?> <-- breaks site <?php echo $field->get($siteChairperson); ?> <-- breaks site Any assistance would be greatly appreciated.
    • By ridgedale
      Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.
      I wonder if anyone has come across the problem of displaying images within the <figure> element before.
      When editing a page:
      If an image is added inside <p></p> tags without any align assigned, it displays normally at the size the user has specified. See screen grab example 1.
      If an image is placed inside the <figure> element and left or right alignment applied, the size the image is displayed as in the editing view is significantly reduced. See screen grab example 2.
      If an image is placed inside the <figure> element and center alignment applied, the size the image completely disappears in the editing view with only the caption text showing. See screen grab example 3.
      The code used to display an image in <p></p> tags without aligment assigned is standard:
      <p><img alt="" src="/<path-to-image>/image.jpg" width="128" /></p> Examples of the code automatically being generated by PW3/UiKit3 from within the image editing interface are:
      <figure class="align_left"><img alt="" src="/<path-to-image>/image.jpg>" width="128" /> <figcaption>Caption text</figcaption> </figure> <figure class="align_right"><img alt="" src="/<path-to-image>/image.jpg>" width="128" /> <figcaption>Caption text</figcaption> </figure> <figure class="align_center"><img alt="" src="/<path-to-image>/image.jpg>" width="128" /> <figcaption>Caption text</figcaption> </figure> Important Note: The images and and captions actually do display correctly when the website is browsed, but from the editing perspective it is not practical.
      Any thoughts or advice would be appreciated.



    • By FrancisChung
      Has anyone come across this issue where Amazon Cloudfront seems to refuse to cache a certain small number of static objects?
      I've tried invaliding the cache (root path) several times to no avail.
      I had a look at the file permissions of the objects in question, and they seemed all ok.
      I've also gone into the Amazon Console and there are no errors logged.
      You can see more details of this here :
      http://www.webpagetest.org/performance_optimization.php?test=171106_A4_be80c122489ae6fabf5e2caadcac8123&run=1#use_of_cdn
       
      I recently upgraded this test site to PW 3.062 from PW 2.8.x and noticed this was happening. I'm also running the latest version of Procache on this site.
    • By alan
      Sorry folks if this is obvious to most and I missed something in the docs or here in the forum, but, I have cheerfully used code such as:
      if($user->isLoggedin()) { echo " loggedIn"; } else { echo " notLoggedIn"; } in PW 2.x sites.
      Now on a v3 site I am finding even the most basic test to see if the viewer is logged in or `isSuperuser()` is not giving an error but simply doing nothing - not evaluating.
      For example, the top of a typical template reads:
      <?php namespace ProcessWire; if($user->isLoggedin()) { echo " loggedIn"; } else { echo " notLoggedIn"; } I have `debug` turned on.
      Is there something obvious I have missed, perhaps a step required for v3 that's not required for v2 to allow access to $user data?
      Thanks for any pointers.
    • By ridgedale
      I've been trying to work out how I can provide a frontend file upload (whatever file format the user chooses to upload - albeit not executables!) for registered users to be able to create pages/posts and upload any file they wish so they can create a link to the file so it can either be downloaded or displayed.
      Everything I've read so far appears to relate to just images and uploading and adding images is already covered using the images field.
      Any thoughts/guidance would be a appreciated.