nico65

Frontend editing in extra Page

Recommended Posts

nico65    4

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
Robin S    2,527

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
pwFoo    276
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
nico65    4

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
bernhard    1,322

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
nico65    4

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
bernhard    1,322
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
LostKobrakai    4,313

@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
nico65    4

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 Lenz
      Hello all,
      i have a question regarding the following scenario:
      My customer wants to edit a menu card of a restaurant website directly in the frontend.
      Each dish / menu is displayed in a row with 4 simple textfields (position nmbr, name, quantity (optional, for drinks) , price).
      My customer preferably not only wishes to edit/update existing fields/rows, but also add a new one, delete one, or move an existing one up or down to a new position in the card.
      Would these actions be possible per default in the frontend edit mode, if i'd have e.g. a table profield storing the 4 textfields per dish? Or is this only functional in the backend?
      In a demo video of a Profield (-> fieldtype table) i saw the requested edit functionality (edit or add a row of fields, drag a row up/down, delete a row, safe) in the backend...
      Btw., regarding this concrete use case of a menu card: Would i have to use at all a Profield like table or could i accomplish the task also with a Repeater Field or a Pagetable fieldtype?
      In any case at least i don't want to let my customer mess around with a richtext field / inserting a table within CKEditor in the backend...
      Maybe there are better approaches than the above mentioned.
       
      Edit: I should add, that the site is a static one, equipped with an meanwhile dysfunctional inline frontend editor (that had the capabilitiy of editing, moving, deleting such rows directly inline in the frontend).  Now i want to replace this editor with processwire.

      Thanks in advance
    • By CarloC
      Hi everyone!
      this is my first topic and I need to say thanks to @ryan and all the other contributors for this incredible framework that changed my life as a web dev!
      But now I go to the point. I developed a project with pw 2.7 and it worked like a charm.
      Today i'm trying to update the project to pw3 on a local environment, to test that everything will continue working after the upgrade, and that's not the case.
      The major bug I'm encountering is that repeater field doesn't work properly.
      Existing Repeater field
      This is what I see when I try to edit a page that already has a repeater field (Brand concepts) with some elements:

      If I click on one of the "... blocks" nothing appens.
      New repeater field
      If I create a new repeater field and assing it to a template, when I open a page with that template I see the new repeater field, but the "Add new" link, to add a new element, doesn't work. I click it and nothing appens.

      I never had this kind of strange behaviours in PW, and this is one of the reasons why I consider it the best cms/framework I've ever used.
      I hope you can help me.
      Thank you!
    • By ridgedale
      I'm using Processwire 3.0.61 with the site-regular profile and am in the process of browser/device testing for the template I'm working on.
      I've managed to get a consistent displaying of the site across Firefox, Google Chrome, Internet Explorer, Opera, Safari (both Windows and Mac checked but not Linux, yet) and Android (portrait orientation on SIII Mini).
      When I initially switch to landscape orientation on the SIII Mini the layout is consistently retained. I'm assuming that is because the device initially zooms the page rather than redraws the screen. However, as soon as I click on the menu icon the screen is redrawn in such a manner that the body of the template is offset by what looks like +10px or so (right and down) pushing the whole of the content off the screen to the right as well as down. Interestingly the shadow on the banner background image (set to fill width of screen using the cover attribute) remains in place where it should be. But there is also the wierd artifact that any horizontal rules appear twice (once where they should be and once offset again by what looks like the same amount as mentioned above).
      Nothing I've tried in terms of CSS3 has any effect so far. I'm wondering if anyone else has come across this issue. If so, could it be related to the UiKit3 css/js code?
      Any help would be appreciated.
    • By ridgedale
      I was wondering if anyone has successfully integrated Securimage with Processwire 3.
      I've tried the suggested fixes posted here, but I haven't managed to get the captcha image to display. This might be because the instructions relate to Processwire version 2.x where I am working with version 3.
      Any ideas/steps what to do would be appreciated.
       
    • By ridgedale
      Hi,
      I've separated the header and footer information from the _main.php (_header.php and _footer.php). This works fine with any top level page but any page children are rendered without the header and footer information. When I add includes to the blog-post.php, for example, and try refreshing the page the following error is returned:
      The line of code being referred to is:
      echo ukBlogPost(page()); Could this error be being generated because I am working locally using MAMP?
      Any assistance would be greatly appreciated.