OLSA

Module: ConfigurationForm (multiple fields container)

Recommended Posts

Hello for all,

ConfigurationForm fieldtype module is one my experiment from 2016.
Main target to build this module was to store multiple setup and configuration values in just 1 field and avoid to use 1 db table to store just single "number of items on page", or another db table to store "layout type" etc. Thanks to JSON formatted storage this module can help you to reduce number of PW native fields in project, save DB space, and reduce number of queries at front-end.

Install and setup:

  1. Download (at the bottom ), unzip and install like any other PW module (site/modules/...).
  2. Create some filed using this type of field (ConfigurationForm Fieldtype)
  3. Go to field setup Input tab and drag some subfields to container area (demo).
  4. Set "Name" and other params for subfields
  5. Save and place field to templates ("Action tab")

How to use it:

In my case, I use it to store setup and configurations values, but also for contact details, small content blocks... (eg. "widgets").

Basic usage example:

ConfigForm fieldtype "setup" has subfields:

"limit", type select, option values: 5, 10, 15, 20
"sort", type select, option values: "-date", "date",  "-sort", "sort"

// get page children (items)
$limit = isset($page->setup->limit) ? $page->setup->limit : 10;
$sort = isset($page->setup->sort) ? $page->setup->sort : '-sort';
$items = $page->children("limit=$limit, sort=$sort");

 

Screenshots:

Field setupSome page setupVariant SEO and setups fieldsCompact view option

Contact details (none compact view)Services using repeater and configform fieldtypeRepeater label as subfield value

 

Notes:

  • Provide option to search inside subfields
  • Provide multilanguage inputs for text and textarea field types
  • Provide option for different field layout per-template basis
  • Do not place/use field type "Button" or "File input" because it won't works.
  • Please read README file for more details and examples

Module use JSON format to store values. Text and textarea field types are multilanguage compatible, but please note that main target for this module was to store setup values and small content blocks and save DB space. Search part inside JSON is still a relatively new in MySQL (>=5.77) and that's on you how and for what to use this module.

Thanks:

Initial point for this fieldtype was jQuery plugin FormBuiled and thanks to Kevin Chappel for this plugin.
In field type "link" I use javascript part from @marcostoll module and thanks to him for that part.

Download:

FieldtypeConfigForm.zip

Edit: 14. August 2018. please delete/uninstall previously downloaded zip

Regards.

   
  • Like 15
  • Thanks 2

Share this post


Link to post
Share on other sites

Here are more details and some news about this module.

What's new (14. August 2018.):
- fix small bug
- search by subfields
- different layouts per-template basis

Examples:

1) 1 single field for configuration and setup instead 7 PW native fields

On "Home" administration page want to have global config options (stylesheet, development or production mode), and SEO settings fields.
On category pages need to have options to change number of children in list, provide option to select different layouts, and SEO settings fields.
Conclusion, need to have 7 fields: stylesheet (select), development (select or check), SEO fields (eg. title, description and robots), limit, layout.

Create field "setup" with all needed subfields:

field-setup-1.thumb.png.cd83abe872c74a369f22dd5087871f7e.pngfield-setup-2.thumb.png.56b8dba113a9032baaaa389d48417cec.pngfield-setup-3.thumb.png.08dc69b43a6f630ea813835cbf76d1b8.png

But also want to have different field layout inside Home and category pages.
For that we use "Compact view" inside template setup.
Result, same field but with different inputs and layouts.

layout-1.thumb.png.7f139c6063d9069d3f11c8bfe7657c6e.pnglayout-2.thumb.png.01a23e9c942401a0d8de7f5a8a69a43d.png

 

On site are dozen of categories and want to find where are used grid and where list layout.
Or, website is in still development mode and want to find NOINDEX categories, etc...


search-by-subfields-1.thumb.png.5551d4d98c4d402c3227edf550d988f0.png

 

2) Multiple different textareas on "basic-page" and "basic-page-2" templates using 1 single field
Task:
 - textarea1, textarea2 and textarea3 on basic-page template
 - textarea1, textarea4, textarea5 on basic-page-2 template
 - all that with 1 PW field

 Create field "content" with 5 textarea field types (textarea1...textarea5)
 
 Set Visibility condition like this:
 basic-page=textarea1, textarea2, textarea3
 basic-page-2=textarea1, textarea4, textarea5
 
 Inside Action tab add field to templates basic-page and basic-page-2.
 Later in page administration are only desired textarea inputs.

text-areas-1.thumb.png.636c0e7fb746c7a30f36e9c3769eb256.pngtext-areas-2.thumb.png.2296d1ffed301e4a6f8a8de684d4ef43.png

 
Search: find all pages where textarea1 contain word "Toronto"

 $items = $pages->find('content.textarea1*=Toronto');

Or in admin backend using lister:

search-by-subfields-2.thumb.png.bcffc5304210ca7f7cf3beae009a1c5c.png

In front side:

$selector = 'content.textarea1*=Toronto';
$items = $pages->find($selector);

if($items->count){
	echo "<h2>Find items: {$items->count}</h2>";
	echo "Selector:<pre>$selector</pre>";	
	foreach($items as $item){		
		echo $item->title .', template: '. $item->template->name;
		echo '<br />';
		
	}
}

search-by-subfields-3.png.9bbca688f6e31d6d649a66da5069c7cb.png

Note: this example is only for demostrations and I didn't test this in case of few thousands pages.

 

  • Like 4

Share this post


Link to post
Share on other sites

Great work! Thanks for sharing.

Unfortunately, I didn't have time yet to try this out, but I'll give it a go in the next couple of days.

I can imagine quite a few real-world usage scenarios for this.

  • Like 2

Share this post


Link to post
Share on other sites

Zdravo Sasa, kako je sunce u Crnoj Gori?  😄

I installed your module and played around a bit. Looks good so far.

Only thing I spotted: the PW width settings are not being displayed as intended, when I choose "compact view". In normal view, it's working fine.

And also, some elements are a bit too close to each other, when choosing compact view: (checkbox and radio labels)

compact-view.thumb.PNG.251c03bf1af2c8c1ad2920dffd21efdf.PNG

  • Like 1

Share this post


Link to post
Share on other sites

Dragane, odlicno, samo da je malo manje vruce ;)

CompactView is html table view and idea for that type of layout was to use it in cases where are inputs closely related (eg. some contact details), and inside repeaters because don't take too much space (can open few repeater items, and at the same time, view fields in all of them).

I missed to write in notes that PW Width value is not used inside CompactView layout.
Sorry but it's possible that I skiped to write and some other notes, and feel free to ask me anything that is not clear or confusing.

Fields what I used in almost 90% are: select, text, textarea, page and link. Radio and checkboxes very, very rarely (can't remeber), and in that case I prefer to use select.

Please can you try to add to the end of module css file (module  directory... site/modules/FieldtypeConfigForm/assets/css/admin.css) this few lines:

.CompactView .InputfieldCheckboxesStacked, .CompactView .InputfieldRadiosStacked {list-style:none;padding-left:0;}
.CompactView .InputfieldCheckboxesStacked input, .CompactView .InputfieldRadiosStacked input {margin-right:10px;}

, and after it refresh browser page (CTRL+F5) and check if it will be better?

Thanks and regards!

  • Like 3

Share this post


Link to post
Share on other sites

Yep, much better. I also removed the 12px font-size for the compact view label, it somehow looks weird to me if it's smaller than the rest, but that's just personal preference.

Thanks for clarifying that the width is ignored in compact view on purpose.

  • Like 1

Share this post


Link to post
Share on other sites
On 8/10/2018 at 7:34 AM, OLSA said:

Notes:

  • Provide option to search inside subfields
  • Provide multilanguage inputs for text and textarea field types
  • Provide option for different field layout per-template basis
  • Do not place/use field type "Button" or "File input" because it won't works.
  • Please read README file for more details and examples

May I suggest to simply exclude button and file inputs - it's kinda pointless to see them there as available input fields, when in fact they don't (yet?) work.

And the mulitlanguage part would be really really awesome. Most sites we build are multilang, so this feature would be almost a must-have, rather than a nice-to-have.

Did you post your module to the official PW module directory? https://modules.processwire.com/add/
That way, it would be easier for other people to find your module. And (afaik) this is a pre-requisite if you want people to use the "check for updates" feature in the PW-backend.

Zelim ti lep vikend 🙂

 

  • Like 2

Share this post


Link to post
Share on other sites

Zdravo Dragane,

I totally agree with you, and I'm aware of all imperfections, but I use it last 2 years in all my projects (multilanguage) and it's play important role in all of them.
News is that I am started with development of different version of that module and it's possible that I will include all suggestion in that version, or will do that in next release of current version, and after it post it to Github and in PW module directory.

Inputs like text and textarea are multilanguage, but labels are not because that part depends on jQuery FormBuilder plugin (in my case, I write labels in administration default language).

I really appreciate all the suggestions to make this module better and thanks for that!

  • Like 1

Share this post


Link to post
Share on other sites
Posted (edited)

Evo me opet 🙂

I encountered a strange problem today when I wanted to setup something with required fields:

I first hit the module's save-button, then I hit the PW field-save button. And PW can't save the field, because I get errors from the first field that is required (I don't want to prepopulate the fields or use placeholders).

This is some kind of a Catch-22 problem I guess 🙂

And also, I see JS errors in Chrome console:

config-errors-JS.thumb.PNG.e714fe59eff1b04f6f756b2619818c17.PNG

 

When I want to edit a page where I have this field inside, Tracy reports this error:

ErrorException: count(): Parameter must be an array or an object that implements Countable in /home/sitecom/www/mysite/site/modules/FieldtypeConfigForm/FieldtypeConfigForm.module:69
Stack trace:
#0 [internal function]: Tracy\Bar->Tracy\{closure}(2, 'count(): Parame...', '/home/zeixcom/w...', 69, Array)
#1 /home/sitecom/www/mysite/site/modules/FieldtypeConfigForm/FieldtypeConfigForm.module(69): count(Object(stdClass))
#2 /home/sitecom/www/mysite/wire/core/Wire.php(389): ProcessWire\FieldtypeConfigForm->___formatValue(Object(ProcessWire\Page), Object(ProcessWire\Field), Object(ProcessWire\ConfigForm))
#3 /home/sitecom/www/mysite/wire/core/WireHooks.php(723): ProcessWire\Wire->_callMethod('___formatValue', Array)
#4 /home/sitecom/www/mysite/wire/core/Wire.php(413): ProcessWire\WireHooks->runHooks(Object(ProcessWire\FieldtypeConfigForm), 'formatValue', Array)
#5 /home/sitecom/www/mysite/wire/core/Page.php(1436): ProcessWire\Wire->_callHookMethod('formatValue', Array)
#6 /home/sitecom/www/mysite/wire/core/Page.php(1364): ProcessWire\Page->formatFieldValue(Object(ProcessWire\Field), Object(ProcessWire\ConfigForm))
#7 /home/sitecom/www/mysite/wire/core/Page.php(1116): ProcessWire\Page->getFieldValue('setup')
#8 /home/sitecom/www/mysite/wire/core/Page.php(1600): ProcessWire\Page->get('setup')
#9 /home/sitecom/www/mysite/site/assets/cache/FileCompiler/site/modules/TracyDebugger/panels/RequestInfoPanel.php(470): ProcessWire\Page->getFormatted('setup')
#10 /home/sitecom/www/mysite/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-master/src/Tracy/Bar.php(159): RequestInfoPanel->getPanel()
#11 /home/sitecom/www/mysite/site/assets/cache/FileCompiler/site/modules/TracyDebugger/tracy-master/src/Tracy/Bar.php(108): Tracy\Bar->renderPanels()
#12 /home/sitecom/www/mysite/site/assets/cache/FileCompiler/site/modules/TracyDebugger/TracyDebugger.module(1487): Tracy\Bar->render()
#13 /home/sitecom/www/mysite/wire/core/Wire.php(383): TracyDebugger->sessionHandlerDBAjaxFix(Object(ProcessWire\HookEvent))
#14 /home/sitecom/www/mysite/wire/core/WireHooks.php(825): ProcessWire\Wire->_callMethod('sessionHandlerD...', Array)
#15 /home/sitecom/www/mysite/wire/core/Wire.php(442): ProcessWire\WireHooks->runHooks(Object(ProcessWire\ProcessWire), 'finished', Array)
#16 /home/sitecom/www/mysite/wire/core/ProcessWire.php(603): ProcessWire\Wire->__call('finished', Array)
#17 /home/sitecom/www/mysite/wire/core/ProcessWire.php(499): ProcessWire\ProcessWire->__call('finished', Array)
#18 /home/sitecom/www/mysite/wire/modules/Process/ProcessPageView.module(254): ProcessWire\ProcessWire->setStatus(16)
#19 /home/sitecom/www/mysite/wire/core/Wire.php(380): ProcessWire\ProcessPageView->___finished()
#20 /home/sitecom/www/mysite/wire/core/WireHooks.php(723): ProcessWire\Wire->_callMethod('___finished', Array)
#21 /home/sitecom/www/mysite/wire/core/Wire.php(442): ProcessWire\WireHooks->runHooks(Object(ProcessWire\ProcessPageView), 'finished', Array)
#22 /home/sitecom/www/mysite/index.php(56): ProcessWire\Wire->__call('finished', Array)
#23 {main}

Any ideas? Did you ever stumble across such a situation?

Edited by dragan
added Tracy Debugger error msg

Share this post


Link to post
Share on other sites

Hi Dragane,

sorry for the delayed response (I am on vacation until September 1st).

If that's  JS errors are in Chrome console inside field setup, that might be in relation with required attribute and Chrome browser (here are more details), but if you insert any values in setup "form" fields maybe you can "skip" that and PW will save field and it's subfields? Also, as a result of the first , maybe you have "empty" field (without subfields), and that cause second error (never noticed before, but I'll investigate that).

Here is one important detail that you probably didn't notice, and my fault because I didn't mention, required attribute is not in use in current version.

There are few options and buttons what are not in use and I didn't remove because my first plan was to use them all for fields (eg. "Required",  "Limit access..." ) or for new features.

Share this post


Link to post
Share on other sites

This module is great, very useful and i'm using it on a project; I guess my PHP version (7.2.10 ) doesn't like this: (FieldtypeConfigForm, line 69)

if(count($values)){

but this works

if(wireCount($values)){

 

  • Like 2

Share this post


Link to post
Share on other sites

Hey!
Thank you for this great module, I use it as part of a repeater item (for settings, to save some white space and grouping the settings).

Now I tried to echo the Value of a select option (Dropdown) like this:
{$item->grid_settings->gridsize->title}

gridsize is the name of my select field. And grid_settings is the name of my ConfigurationForm field (which contain multiple select fields). Item is the repeater item.

But this is not working. What Iam missing here?
Also is it possible to preselect an option?

Share this post


Link to post
Share on other sites

Hello @jploch

in case of select field, you can get only selected option value (and not title/text) or in your case:

$grid_size = $item->grid_settings->gridsize;

Share this post


Link to post
Share on other sites
On 9/27/2018 at 2:22 PM, jploch said:

Also is it possible to preselect an option? 

Preselect option, currently, only in case when you have option value as null "0", as example your "gridsize" field:

Label: "Grid size"

-- option value: 0, option text: Default
-- option value: 1, option text: Grid size 1
-- option value: 2, option text: Grid size 2

In that case, preselected value in admin backend would be "Default".
Later in your code:

if ($item->grid_settings->gridsize){
// not default (not preselected value)
...
} else {
// default
...
}

But there is and "mix" variant, example, some select field with name background:

label: "Background color"

-- option value: 0, text: Default
-- option value: black, text: Black
-- option value: orange, text: Orange

* preselected text : "Default"

Later in code:

<?php
// configuration form field "settings" with select subfield "background"
$background = $page->settings->background ? '-' . $page->settings->background : '';
?>
<div class="bgn<?php echo $background;?>">

* div can have css class values: bgn, bgn-black, bgn-orange

Regards.

  • Like 1

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 BitPoet
      MediaLibrary
      Update: MediaLibrary can now be found in the official module list.
      Out of necessity, I've started to implement a simple media library module.
      The basic mechanism is that it adds a MediaLibrary template with file and image fields. Pages of this type can be added anywhere in the page tree.
      The link and image pickers in CKEditor are extended to allow quick selection of library pages from dropdowns. In the link picker this happens in the MediaLibrary tab, where you can also see a preview of the selected image. In the image picker, simply select a library from the dropdown at the top, everything else is handled by standard functionality.
      I've put the code onto github. This module is compatible with ProcessWire 3.
      Steps to usage:
      Download the module's zip from github (switch to the pw3 branche beforehand if you want to test on PW 3.x) and unpack it into site/modules Click "Modules" -> "Refresh" in the admin Click "Install" for MediaLibrary For testing, create a page with the MediaLibrary template under home (give it an expressive title like 'Global Media') and add some images and files Edit a differnt page with a CKEditor field and add a link and an image to see the MediaLibrary features in action (see the screencap for details) Optionally, go into the module settings for MediaLibrary Note: this module is far from being as elaborate as Kongondo's Media Manager (and doesn't plan to be). If you need a feature-rich solution for integrated media management, give it a look.
      Feel free to change the settings for MediaFiles and MediaImages fields, just keep the type as multiple.
      There are some not-so-pretty hacks for creating and inserting the correct markup, which could probably be changed to use standard input fields, though I'm a bit at a loss right now how to get it to work. I've also still got to take a look at error handling before I can call it fit for production. All feedback and pointers are appreciated (that's also why I post this in the development section).

      Edit 09.03.2016 / version 0.0.4: there's now also a "Media" admin page with a shortcut to quickly add a new library.

      Edit 01.05.2016:
      Version 0.0.8:
      - The module now supports nested media libraries (all descendants of eligible media libraries are also selectable in link/image picker).
      - There's a MediaLibrary::getPageMediaLibraries method you can hook after to modify the array of available libraries.
      - You can switch between (default) select dropdowns or radio boxes in the module configuration of MediaLIbrary to choose libraries.
      Edit 10.10.2018:
      Version 0.1.3:
      - Dropped compatibility for ProcessWire legacy versions by adding namespaces
      - Allow deletion of libraries from the Media overview admin page
      - Added an option to hide media libraries from the page tree (optionally also for superusers)
    • By Robin S
      This module corrects a few things that I find awkward about the "Add New Template" workflow in the PW admin. I opened a wishlist topic a while back because it would good to resolve some of these things in the core, but this module is a stopgap for now.
      Originally I was going to share these as a few standalone hooks, but decided to bundle them together in a configurable module instead.
      Add Template Enhancements
      A module for ProcessWire CMS/CMF. Adds some efficiency enhancements when adding or cloning templates via admin.

      Features
      Derive label from name when new template added: if you like to give each of your templates a label then this feature can save some time. The label can be added automatically when templates are added in admin, in admin/API, or not at all. There are options for underscore/hyphen replacement and capitalisation of the label. Edit template after add: when adding only a single template, the template is automatically opened for editing after it is added. Copy field contexts when cloning: this copies the field contexts (a.k.a. overrides such as column width, label and description) from the source template to the new template when using the "Duplicate/clone this template?" feature on the Advanced tab. Copy field contexts when duplicating fields: this copies the field contexts if you select the "Duplicate fields used by another template" option when adding a new template. Usage
      Install the Add Template Enhancements module.
      Configure the module settings according to what suits you.
       
      https://github.com/Toutouwai/AddTemplateEnhancements
      https://modules.processwire.com/modules/add-template-enhancements/
    • By Mike Rockett
      As I mentioned in this issue, I've create a new textformatter for ParsedownExtraPlugin, which adds some oomph to your markdown.
      Repo: Parsedown Extra Plugin
      Unlike the built-in textformatter for Parsedown and Parsedown Extra, this should be used when you want to use Extra with additional configuration/customisation.
      Some examples:
      ### Test {.heading} - A [external link](https://google.com/){.google} with `google` as a class that opens in a new tab if the config property is set. - [Another link](/page){target=_blank} that opens in a new tab even though it isn't external. ```html .html <p>Test</p> ``` There's some config options available to you, such as setting attributes on all/external images and links, setting table and table-cell alignment classes, adjusting footnote classes and IDs, adding <code> attributes to their parent <pre> elements, and changing the <code> class if your syntax highlighter does not use language-*.
      I was thinking about adding the ability to make links open in a new tab by appending a plus to the link syntax, but only external links should be opening in a new tab anyway. Further, this would add extra, unnecessary processing time.
      Please let me know if you bump into any problems. ☺️
    • By Mike Rockett
      TextformatterTypographer (0.4.0 Beta)
      A ProcessWire wrapper for the awesome PHP Typography class, originally authored by KINGdesk LLC and enhanced by Peter Putzer in wp-Typography. Like Smartypants, it supercharges text fields with enhanced typography and typesetting, such as smart quotations, hyphenation in 59 languages, ellipses, copyright-, trade-, and service-marks, math symbols, and more.
      Learn more on my blog
      It's based on the PHP-Typography library found over at wp-Typography, which is more frequently updated and feature rich that its original by KINGdesk LLC.
      The module itself is fully configurable. I haven't done extensive testing, but there is nothing complex about this, and so I only envisage a typographical bug here and there, if any.
      Please do test it out and let me know what you think.
      Also note that I have indicated support for PW 2.8, but I haven't tested there as yet. This was built on PW 3.0.42/62.
    • By Mike Rockett
      Jumplinks for ProcessWire
      Release: 1.5.50
      Jumplinks is an enhanced version of the original ProcessRedirects by Antti Peisa.
      The Process module manages your permanent and temporary redirects (we'll call these "jumplinks" from now on, unless in reference to redirects from another module), useful for when you're migrating over to ProcessWire from another system/platform. Each jumplink supports wildcards, shortening the time needed to create them.
      Unlike similar modules for other platforms, wildcards in Jumplinks are much easier to work with, as Regular Expressions are not fully exposed. Instead, parameters wrapped in curly braces are used - these are described in the documentation.
      Under Development: 2.0, to be powered by FastRoute
      As of version 1.5.0, Jumplinks requires at least ProcessWire 2.6.1 to run.
      View on GitLab
      Download via the Modules Directory
      Read the docs
      Features
      The most prominent features include:
      Basic jumplinks (from one fixed route to another) Parameter-based wildcards with "Smart" equivalents Mapping Collections (for converting ID-based routes to their named-equivalents without the need to create multiple jumplinks) Destination Selectors (for finding and redirecting to pages containing legacy location information) Timed Activation (activate and/or deactivate jumplinks at specific times) 404-Monitor (for creating jumplinks based on 404 hits) Additionally, the following features may come in handy:
      Stale jumplink management Legacy domain support for slow migrations An importer (from CSV or ProcessRedirects) Feedback & Feature Requests
      I’d love to know what you think of this module. Please provide some feedback on the module as a whole, or even regarding smaller things that make it whole. Also, please feel free to submit feature requests and their use-cases.
      Note: Features requested so far have been added to the to-do list, and will be added to 2.0, and not the current dev/master branches.
      Open Source

      Jumplinks is an open-source project, and is free to use. In fact, Jumplinks will always be open-source, and will always remain free to use. Forever. If you would like to support the development of Jumplinks, please consider making a small donation via PayPal.
      Enjoy!