Jump to content
pwFoo

FrontendContentManager

Recommended Posts

FrontendContentManager

(unstable / testing)

FrontendContentManager is a module based on FormHelper to generate needed page edit / add form via form api. 

NO sanitizing of form values at the moment!!!

  • edit pages
  • create / add new pages
  • add, replace and remove images

Download

ProcessWire module page: http://modules.processwire.com/modules/frontend-content-manager

Bitbucket Repo: https://bitbucket.org/pwFoo/frontendcontentmanager

Version

0.2.0

Required

FormHelper (0.7.1+)

Usage

Example template file

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title><?php echo $page->title; ?></title>
<?php

// Load FormHelper module and also set wire('fh') variable
$fcm = $modules->get('FrontendContentManager');

// edit existing page
//$form = $fcm->edit($pages->get('1108'));

// add a new page based on a template and a parent object
$parent = $pages->get('name=test');
$form = $fcm->add($parent, $parent->template);

// jsConfig needed by ckeditor
echo $fcm->JsConfig(); 

// outpunt needed scripts for inputfield modules, ...
foreach ($config->styles as $file) { echo "<link type='text/css' href='$file' rel='stylesheet' />\n"; } 
foreach ($config->scripts as $file) { echo "<script type='text/javascript' src='$file'></script>\n"; }

?>
	</head>
	<body>
		<h1><?php echo $page->title; ?></h1>
<?php 

// output the forom
echo $form;

?>
	</body>
</html>

*UPDATED TO 0.1.0*

At the moment I have no usage for FCM module, but after FormHelper 0.5.2 is finished I've done a quick FCM rewrite. Only few tests done yet!

*UPDATED TO 0.2.0*

Updated to work with redesigned FormHelper 0.7

Edited by pwFoo
  • Like 5

Share this post


Link to post
Share on other sites

Hey pwFoo,

Just a couple of things - it isn't possible to install your module directly from the modules directory because the bitbucket link doesn't work properly. FormHelper did download and install automatically though, so maybe you just need to tweak something with the url to your module.

Next thing - I installed and put:

$fcm = $modules->get('FrontendContentManager');

// edit page (editable permission needed)
echo $fcm->edit($page);

in a template file, but nothing was output and I was logged in as a superuser. Am I missing something obvious?

Share this post


Link to post
Share on other sites

Hi Adrian,

is it a problem with the link or because the module isn't approved yet?

Sorry my bad! I have to update the documentation.

At current version I use url segments! But maybe I change this.

Module checks permissions, template isn't an admin template AND url segment /add or /edit.

What do you think. Should I remove the url segment check from module and move it to the template (in developers hand)?

Share this post


Link to post
Share on other sites

You're right - probably just because it isn't approved yet.

Adding edit to the url - with url segments enabled did the trick, but I am concerned that there will be issues with your module relying on segments if the dev also wants to use segments for controlling output on the frontend. It might be better to just go with: /?edit=1

Share this post


Link to post
Share on other sites

Ok, thanks for testing :)

I think it would be better to remove url segment check. So developer have the choice how to handle it (for example a simple if / else).

I try to build it as simple and flexible as possible...

Share this post


Link to post
Share on other sites

It's also possible to edit any page...

echo $fcm->edit($pages->get("/"));

Next update url segment check will be removed.

Share this post


Link to post
Share on other sites

Hi Marty,

Fredi use the backend interface in an overlay. So you should get a styled edit page (like backend admin).

FCM is based on FormHelper module (generate and process forms). You can use it inside the frontend page without an overlay and with your own styles.

At the moment it's tested with simple pages/ templates. 

  • create pages
  • edit page fields (it's also possible to skip fields and so remove from edit form)
  • upload, replace and remove images)

It's untested with multi language or repeater fields for example.

Share this post


Link to post
Share on other sites

I redesigned FCM to be more flexible.

New testing branch working like this (inside a demo module "conversation").

    public function add ($parent, $redirect = null, $options = array('clearValues' => true)) {
        $fcm = $this->modules->get('FrontendContentManager');
        
        $form = $fcm->createForm($parent, $options);
        
        if ($fcm->formProcess()) {
            $page = $fcm->add($parent);
            
            // Manipulate page object from outside...
            $page->name = $page->id . '-' . $this->sanitizer->pageName($page->title);
            
            $fcm->save();
            
            if ($redirect === null) $redirect = $page->url;
            $this->session->redirect($redirect);
        }
        return $form->render();
    }
    
    public function edit ($topic, $options = null) {
        $fcm = $this->modules->get('FrontendContentManager');
        
        $form = $fcm->createForm($topic, $options);
        
        if ($fcm->formProcess()) {
            $page = $fcm->edit($topic);
            
            // Manipulate page object outside...
            $page->name = $page->id . '-' . $this->sanitizer->pageName($page->title);
            
            $fcm->save();
            $this->session->redirect($topic->url);
        }
        return $form->render();
    }
  • Like 2

Share this post


Link to post
Share on other sites

Updated git and module repo to promised reworked version 0.0.3

FCM 0.0.2 isn't compatible to 0.0.3. It's redesigned.

Share this post


Link to post
Share on other sites

After some changes and improvements to FormHelper I'll start to update FCM too.

Most work to realize a page add / edit is done by FormHelper (create, modify, render, process form and also care about file / image upload). FCM brings FormHelper together with a create / save page functionality. 

Page save vs. field save 

Current version of FCM update all the fields and finally save the hole page. That's fine to save the all the changes done before.

But I think about a rewrite to a field save instead of a page save, because a "fieldSave" process module could be used stand alone to handle frontend page edit and also ajax based updates (an optional submodule...)? 

Any hints or suggestions about pro and cons?

Permission check

Access control was removed in the second dev version, but should be added optional to FCM again. It won't have it's one permission handling, but will use PW 

$page->editable() and $page->addable(). 

Your ideas and suggestions are welcome to improve the module ;)

Share this post


Link to post
Share on other sites

At the moment I have no usage for FCM module, but after FormHelper 0.5.2 is finished I've done a quick FCM rewrite. Only few tests done yet!

  • Like 3

Share this post


Link to post
Share on other sites

Updated to work with FormHelper 0.7.1 / FormHelperExtra after redesign.

FCM is NOT ready to use!!! No value sanitizing without additional code (set a sanitizer to each field.

Share this post


Link to post
Share on other sites

FCM release 0.5.0 (no documentation at the moment... sorry!)

  • requires FormHelper
  • add / edit pages
  • default sanitizer based on field type (textarea or text) if no sanitizer is set to the field
  • skip fields
  • optional use admin form styles
  • file / image upload during page add (check input, page pre-save, set field values and add files and again save the page...)

usage / example

// load FCM
$fcm = $modules->get('FrontendContentManager');

// ADD a page to given parent with parent template
$output = $fcm->renderAdd($parentPage);

// or EDIT given page
$output = $fcm->renderEdit($pageToEdit);

// echo jsConfig inside the html head element
echo $fcm->JsConfig(); 

// outpunt needed scripts for inputfield modules, ... inside your html head element
foreach ($config->styles as $file) { echo "<link type='text/css' href='$file' rel='stylesheet' />\n"; } 
foreach ($config->scripts as $file) { echo "<script type='text/javascript' src='$file'></script>\n"; }

// echo $output inside your template / html body element
echo $output;

PW module repo: http://modules.processwire.com/modules/frontend-content-manager

GIT repo: https://bitbucket.org/pwFoo/frontendcontentmanager/src/

  • Like 4

Share this post


Link to post
Share on other sites

Just had a look at this module and tried to make it work. The only thing I see is a submit button. If i click it a new page will be created or (if i uncommented that for edit) the given page will be edited (or u get redirected to the page 1015 for example). But there are no fields at all to change anything. What did I do wrong?

Installed formhelper and this is my template:

<?php // load FCM
$fcm = $modules->get('FrontendContentManager');

// ADD a page to given parent with parent template
//$output = $fcm->renderAdd($pages->get('1015'));

// or EDIT given page
$output = $fcm->renderEdit($pages->get('1015'));

// echo jsConfig inside the html head element
echo $fcm->JsConfig(); 

// outpunt needed scripts for inputfield modules, ... inside your html head element
foreach ($config->styles as $file) { echo "<link type='text/css' href='$file' rel='stylesheet' />\n"; } 
foreach ($config->scripts as $file) { echo "<script type='text/javascript' src='$file'></script>\n"; }

// echo $output inside your template / html body element
echo $output; ?>

As you can see, I am trying to edit the page number 1015, which has a different template only with title and textarea field. And I was expecting to see those fields on the edit page, with the template written above.

Appreciate your help!

Share this post


Link to post
Share on other sites

Could you post your complete template file, please?

With this simple line I get a form with all fields of the template.

$fcm->add($pages->get('title=my-page-title'));

// OR
//renderAdd is a shortcut for add() + process() + render()
$fcm->renderAdd($pages->get('title=gfh'));

Get page by ID should also work (it needs a page object). The other params are optional.

Short edit / add tests with my dev setup show all the form fields.

Form should be processed and rendered before you output the results.

Share this post


Link to post
Share on other sites

I made a template for add new page. Page is added under home page.

<?php include('./_header.php'); ?>
<?php

// Load FormHelper module and also set wire('fh') variable
$fcm = $modules->get('FrontendContentManager');

// add a new page based on a template and a parent object
$parent = $pages->get('name=home');
$form = $fcm->add($parent, $parent->template);

// jsConfig needed by ckeditor
echo $fcm->JsConfig();

// outpunt needed scripts for inputfield modules, ...
foreach ($config->styles as $file) { echo "<link type='text/css' href='$file' rel='stylesheet' />\n"; }
foreach ($config->scripts as $file) { echo "<script type='text/javascript' src='$file'></script>\n"; }

?>
    <div class="uk-container uk-container-center">
        <h1><?php echo $page->title; ?></h1>
        <?php

        // output the forom
        echo $form;

        ?>
    </div>

<?php include('./_footer.php'); ?>

and only result I get is this. Any help?

https://www.dropbox.com/s/2mwtksa20qxs5bk/Screen%20Shot%202016-03-10%20at%2011.52.48.png?dl=0

  • Like 1

Share this post


Link to post
Share on other sites

From my side with the new version on PW 3.0.12 I see only the Submit button!!!

***EDIT***

I resolve this issue by adding the FormHelperExtra (testing!) Module

Share this post


Link to post
Share on other sites

Thanks for posting this. I don't use it. Dependency seems missing, but FormHelperExtra is needed here...

  • create a form object with fields based on Template, Page, Form objects or field data array
  • form file upload handling (temp page uploads, creation of a hidden storage page)

Share this post


Link to post
Share on other sites

The only other problem for now are the textarea sanitizer.

Its like the sanitize do not recognize the good type and put a text sanitize on a textarea and pass only 255 characters and not the 16384 for the textarea.

*****EDIT******

I finally found the problem... the class type in the module are "FieldTypeTextarea" but with multi-language the class type are "FieldTypeTextareaLanguage".

I will add the other Field type in the condition and all work fine.

Share this post


Link to post
Share on other sites

I found solution for one problem and now a other problem... :)

For the Textarea the CKEditor doesn't appear...

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By gebeer
      Although the PW backend is really intuitive, ever so often my clients need some assistance. Be it they are not so tech savvy or they are not working in the backend often.
      For those cases it is nice to make some help videos available to editors. This is what this module does.
      ProcessHelpVideos Module
      A Process module to display help videos for the ProcessWire CMS. It can be used to make help videos (screencasts) available to content editors.
      This module adds a 'Help Videos" section to the ProcessWire backend. The help videos are accessible through an automatically created page in the Admin page tree. You can add your help videos as pages in the page tree. The module adds a hidden page to the page tree that acts as parent page for the help video pages. All necessary fields and templates will be installed automatically. If there are already a CKEditor field and/or a file field for mp4 files installed in the system, the module will use those. Otherwise it will create the necessary fields. Also the necessary templates for the parent help videos page and it's children are created on module install. The module installs a permission process-helpvideos. Every user role that should have access to the help video section, needs this permission. I use the help video approach on quite a few production sites. It is stable so far and well received by site owners/editors. Up until now I installed required fields, templates and pages manually and then added the module. Now I added all this logic to the install method of the module and it should be ready to share.
      The module and further description on how to use it is available on github: https://github.com/gebeer/ProcessHelpVideos
      If you like to give it a try, I am happy to receive your comments/suggestions here.
    • By Robin S
      A module created in response to the topic here:
      Page List Select Multiple Quickly
      Modifies PageListSelectMultiple to allow you to select multiple pages without the tree closing every time you select a page.
      The screencast says it all:

       
      https://github.com/Toutouwai/PageListSelectMultipleQuickly
      https://modules.processwire.com/modules/page-list-select-multiple-quickly/
    • By gebeer
      Hello all,
      sharing my new module FieldtypeImagePicker. It provides a configurable input field for choosing any type of image from a predefined folder.
      The need for it came up because a client had a custom SVG icon set and I wanted the editors to be able to choose an icon in the page editor.
      It can also be used to offer a choice of images that are used site-wide without having to upload them to individual pages.
      There are no image manipulation methods like with the native PW image field.
      Module and full description can be found on github https://github.com/gebeer/FieldtypeImagePicker
      Kudos to @Martijn Geerts. I used his module FieldTypeSelectFile as a base to build upon.
      Here's how the input field looks like in the page editor:

      Hope it can be of use to someone.
      If you like to give it a try, I'm happy to hear your comments or suggestions for improvement. Eventually this will go in the module directory soon, too.
    • By bernhard
      @Sergio asked about the pdf creation process in the showcase thread about my 360° feedback/survey tool and so I went ahead and set my little pdf helper module to public.
      Description from PW Weekly:
       
      Modules Directory: https://modules.processwire.com/modules/rock-pdf/
      Download & Docs: https://github.com/BernhardBaumrock/RockPDF
       
      You can combine it easily with RockReplacer: 
      See also a little showcase of the RockPdf module in this thread:
       
    • By ukyo
      FieldtypeFontIconPicker
      Supported Icon Libraries
      FontAwesome 4.7.0 Uikit 3.0.34 IonicIcons 2.0.1 Cahangelog
      NOTE: Module store data without prefix, you need to add "prefix" when you want to show your icon on front-end, because some of front-end frameworks using font-awesome with different "prefix".
      Module will search site/modules/**/configs/IconPicker.*.php and site/templates/IconPicker.*.php paths for FieldtypeFontIconPicker config files.
      All config files need to return a PHP ARRAY like examples.
      Example config file : create your own icon set.
      File location is site/configs/IconPicker.example.php
      <?php namespace ProcessWire; /** * IconPicker : Custom Icons */ return [ "name" => "my-custom-icons", "title" => "My Custom Icon Set", "version" => "1.0.0", "styles" => array( wire("config")->urls->templates . "dist/css/my-custom-icons.css" ), "scripts" => array( wire("config")->urls->templates . "dist/js/my-custom-icons.js" ), "categorized" => true, "attributes" => array(), "icons" => array( "brand-icons" => array( "title" => "Brand Icons", "icons" => array( "google", "facebook", "twitter", "instagram" ) ), "flag-icons" => array( "title" => "Flag Icons", "icons" => array( "tr", "gb", "us", "it", "de", "nl", "fr" ) ) ) ]; Example config file : use existing and extend it.
      File location is site/configs/IconPicker.altivebir.php
      <?php namespace ProcessWire; /** * IconPicker : Existing & Extend */ $resource = include wire("config")->paths->siteModules . "FieldtypeFontIconPicker/configs/IconPicker.uikit.php"; $url = wire("config")->urls->templates . "dist"; $resource["scripts"] = array_merge($resource["scripts"], ["{$url}/js/Altivebir.Icon.min.js"]); $resource["icons"]["flag-icons"] = [ "title" => "Flag Icons", "icons" => array("tr", "en", "fr", "us", "it", "de") ]; $resource["icons"]["brand-icons"]["icons"] = array_merge($resource["icons"]["brand-icons"]["icons"], array( "altivebir" )); return $resource; After you add your custom config file, you will see your config file on library select box. Library Title (Location Folder Name).

      If your library categorized and if you have categorized icons set like uikit and fontawesome libraries, you will have category limitation options per icon field or leave it empty for allow all categories (default).

      Example : output
      if ($icon = $page->get("iconField")) { echo "<i class='prefix-{$icon}' />"; } MarkupFontIconPicker Usage
      // MarkupFontIconPicker::render(YourIconField=string, Options=array) echo MarkupFontIconPicker::render($page->YourIconField, [ 'prefix' => 'uk-icon-', // Icon class prefix, if you have different prefix, default is : "fa fa-" 'tag' => 'span', // Icon tag default is : "i" 'class' => 'fa-lg', // If you have extra cutom classes, for example : icons sizes, Array or Sting value 'style' => 'your custom styles if you have' // Array or String Value ]); Theme support

      Search support

      Category support

       
×
×
  • Create New...