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

@LostKobrakai CAN, but the built in modal is really nice on mobile. it gets 100% width/height and has a really native feeling. at least for standard page edits.

shitty.gif

  • Like 1

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 have a table that needs some of its content to be hidden. I've tried applying the following classes and styles to <tr>, <td> and <a> elements all without success:
      class="hidden" class="uk-hidden" class="uk-invisible" style="display:none" style="visibility:none" style="visibility:collapse" <-- only applicable to rows in this case Is there any way to allow a user to hide content? Any assistance would be appreciated.
    • By ridgedale
      Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.
      I was wondering if it is possible to create an upload method that is not directly associated with any particular Processwire page so that a custom folder can be used from within the admin frontend to upload for example newsletters so they are stored in one hierarchical location to allow the latest edition to be automatically displayed using a single code call.
      What I'd like to be able to do is provide an upload method that allows a user to create year folders and upload newsletters to the relevant folders, making sure the uploaded files are named as required.
      Any input would be greatly appreciated.
    • By ridgedale
      Reference: PW 3.0.62 and uikit3 based site using the Regular-Master profile.
      The issue is that blog posts for the particular site in question are automatically formatted as /blog/<blog-post-title>. It is evident the path format should have been configured as /blog/<year>/<month>/<blog-post-title>.
      Please could someone advise whether or not it is possible to change the path format for the blog posts of an existing active site that uses the regular profile?
      Any assitance would be greatly appreciated.
    • 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.