Jump to content
gebeer

New module InputfieldDependentCheckboxes

Recommended Posts

Happy New Year to everyone!

For a project that I'm working on, I needed to have dependent checkboxes on page edit forms in the admin. Just like dependent selects but for checkboxes. I couln't find anything and decided to write my first Inputfield module.

I have only tried it on PW > 3.0. But it should also work on the 2.x branch. Would be great if some of you could try it out and give some feedback.

You can find the module InputfieldDependentCheckboxes at github

Here's some screenshots of the module in action and instructions on how to use it.

##An Inputfield for ProcessWire admin interface that handles the display of dependent checkboxes in page fields
Sometimes we need checkboxes to depend on other checkboxes in our page edit forms. This module adds this functionality to standard page field checkboxes for 2 or more checkbox fields.
demo-1.gif

## Installation
1. Copy all of the files for this module into /site/modules/InputfieldDependentCheckboxes/
2. In your admin, go to the Modules screen and click "Refresh". Under the 'Inputfield' section, install the 'InputfieldDependentCheckboxes' module.
3. Open Modules->Configure->InputfieldPage. Under 'Inputfield modules available for page selection' add 'DependentCheckboxes' from the select dropdown and submit

install-1.png

##Field Setup
This inputfield extends the standard checkboxes for page fields. Therefore you need to have page fields configured already that you can extend with this Inputfield type.

###Prerequisites
You need to have at least 2 fields of type page that have 'Checkboxes' defined as Input field type and live on the same template.

A real world example:

There are different types of instructors. Each instructor type can have multiple different certifications.
For this to happen, we need 2 page fields (multiple):

A) instructor_types: lists pages with template 'instructor_type'
B) certifications: lists pages with template 'certification'

The certification template needs to have the instructor_types page field to assign one or more instructor_types to a certification.

###Setup (link checkbox fields)
1. Edit your page field A and go to the 'Input' Tab. Under 'Input field type' choose 'DependentCheckboxes'. Hit save. Now under 'Choose the target checkboxes field' choose the name of your field B. Hit save again.
setup-1.png

2. In your page field b make sure to choose a template under 'Input' Tab under 'Selectable Pages'->'Template of selectable page(s)'.

setup-2.png
Your fields should be setup. If you now edit a page that contains the 2 fields, the dependent checkboxes should be working. 

EDIT: And yes, this is working for multiple dependent checkboxes, too. (I have tried it with 3 so far)

 

Some notes on how the module works behind the scenes:

- parent checkboxes (actors) that have dependent checkboxes (targets) get custom data attributes applied which contain arrays of the targets' IDs

- some Javascript is initiated on acxtors and targets to handle the display based on the id arrays in the data attributes.

EDIT: since this module's mention in ProcessWire Weekly it might get some more attention. I just wanted to point out that it is still in alpha state. I will continue development and more thorough testing while implementing it in an ongoing project within the next 3-5 months or so. I will eventually release a stable version then.
If you use the module with only 2 dependent checkbox fields, it should work smoothly. There are still some quirks when using 3 or more and I need to figure out how to best resolve them. So please be patient (or jump in with ideas ;) ).

  • Like 25

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 carlitoselmago
      It's been twice this year as a PW developer where clients have asqued me to have a way to put content on specific coordinates of a picture. Something like what image maps are made of. But not necesarly on links, sometimes text, sometimes images and links. 
      So I've been thinking to build an inputfield for that purpose. But I'm not sure how could it be the most flexible so I can share it in github/modules page.
      Ideally it would need to work like a repeater field where you start uploading an image and then adding any custom field like title, url etc. So the user could add multiple elements floating over that image.
      Does anybody here know the ideal way to start the arquitecture of something like that? I could just hardcode the fields I need for the website I have to code this month but it would be nice to be something more flexible.
    • By theoretic
      Hi there! And thanks for Processwire!
      It appears there's a possible bug in Processwire 3.0.170 concerning file and/or image inputfield. Creating such a field results in the following error:

      Fatal Error: Uncaught Error: Call to a member function get() on null
      The inputfield is created however. The closer look reveals a problem at line 60 in wire\modules\Fieldtype\FieldtypeFile\config.php:
      if(!$value) $value = $fieldtype->get('defaultFileExtensions'); Commenting this line removes the problem, but the newly created inputfield requires 'Allowed file extensions' config option to be set (which is rather expectable since i commented the above-cited line of code). Never faced this problem before, hope it can be resolved.
    • By Lewis Newson
      Hi All,
      Im working on streamlining my email sending setup for SMTP. I have a page where the user of the website can input the SMTP host, port, connection type email and password etc but the password field has an additional box underneath it for 'Confirming' it as if it were a new password. The placeholder text also says 'New Password' but I want to be able to change that. I just need an input field where they can enter their SMTP password without it being plain text.
      Thanks for your help!
    • By Robin S
      An inputfield module that brings EasyMDE Markdown editor to ProcessWire.
      EasyMDE is a fork of SimpleMDE, for which there is an existing PW module. Inputfield EasyMDE has a few advantages though:
      EasyMDE seems to be more actively developed than SimpleMDE, which hasn't seen any updates for several years. You can define options for Inputfield EasyMDE. Inputfield EasyMDE can be used in Repeater fields and in custom fields for File/Image fields.  
      Inputfield EasyMDE
      EasyMDE (Easy Markdown Editor) as an inputfield for ProcessWire.
      EasyMDE is a Markdown editor with some nice features, allowing users who may be less experienced with Markdown to use familiar toolbar buttons and shortcuts. More information is at the EasyMDE website.

      Installation
      Install the Inputfield EasyMDE module.
      Usage
      Create a new textarea field, and in the "Inputfield Type" dropdown choose "EasyMDE". Save the field and if you like you can then configure the EasyMDE options for the field as described below.
      To convert Markdown to HTML you can install the core TextformatterMarkdownExtra module and apply the textformatter to the field. Alternatively you can use $sanitizer->entitiesMarkdown() on the field value, e.g.
      echo $sanitizer->entitiesMarkdown($page->your_field_name, ['fullMarkdown' => true]); Configuration
      On the "Input" tab of the field settings you can define EasyMDE options for the field in JSON format. Refer to the EasyMDE documentation for the available options. Keys in the JSON must be surrounded with double quotes.
      Example:
      "toolbar": ["bold", "italic", "heading", "|", "side-by-side"], "sideBySideFullscreen": false  
      https://github.com/Toutouwai/InputfieldEasyMDE
      https://processwire.com/modules/inputfield-easy-mde/
    • By jploch
      Hey folks,
      Iam working on a module that extends InputfieldPageTable. I use PageTableExtended as a starting point and all went well so far, except I can't access my config values outside of the module file. The config values allways return the defaults, and not the values in the pw field settings. 

      Here is the code that sets the defaults inside my inputfield module file:
      public function init() { parent::init(); // defaults $this->set('gridMaxWidth', '1600'); $this->set('gridColumns', '12'); } Here is how I add the config field:
      public function ___getConfigInputfields() { $inputfields = parent::___getConfigInputfields(); $fieldsetGrid = $this->modules->get('InputfieldFieldset'); $fieldsetGrid->label = $this->_('Default Grid Settings'); $f = $this->wire('modules')->get('InputfieldText'); $f->attr('name', 'gridMaxWidth'); $f->attr('value', $this->gridMaxWidth); $f->label = $this->_('Container max width'); $f->description = $this->_('Grid container max width in px'); // page name format description $f->notes = $this->_('default is 1600'); // page name format notes $fieldsetGrid->append($f); $inputfields->append($fieldsetGrid); return $inputfields; } Accessing the values outside my module files like this (this gives me the default: 1600, even if I insert another value in the backend field settings):
      $default = $this->wire('modules')->get('InputfieldPageGrid'); $default->gridMaxWidth; Any Ideas?
×
×
  • Create New...