Recent Topics

Feature request: Dynamic Input Groups

Started by on Jan 02, 2018 – Contents updated: Mar 16, 2018

Jan 02, 2018 17:46    

I would like to put this feature on my wishlist and do believe it will be a great addition to b2evolution. Now I know we don't always get what we want, but hey, if you don't ask, you won't get...

As always, my request is to enhance settings (plugins, widgets, skins, col-settings, user-settings, ect...) and this is very similar to Dynamic Sets, except I would like for this NOT to be wrapped in a Fieldset, but rather in a group...

The idea here is to have dynamic settings which will add a few items only and in a group and that works very similar as that found in user profile preference settings:

Feature request: Dynamic Input Groups

It must have a selection select [#2], and an Add button [#1] and a DELETE button [#3] that will be added next to the input_group || input_input. The exception is how it is defined:

function GetDefaultSettings( & $params )
	{
		return array(
			
	
			
			'plugin_input_group' => array(
				'label' => T_('Set'),
				'note' => T_('Your note'),
				'multiple' => true, // or false .... Supported ...  ?
				'type' => 'NEW_TYPE',
				'options' => array( // Select List like $Form->select_input()
									/*
									 *	'type' => T_('LABEL'),
									 *	
									 *	TYPE can be: integer | color | checkbox | checklist | html_input | password | text | radio | fileselect (The most common types)
									*/	
			
									'integer' => T_('Your Numeric'),
									'color' => T_('Your Color'),
									'text' => T_('Your Text'),
									// ect, ect...
									'input_group' => T_('Your Inline Group'),
			
									),
				'entries' => array(
			
			
			/*
			*	We only specified 4 types for this example, 
			*	3 types are inputs
			*	1 type is a group with inline groups
			*	depending on what was selected is what will be added
			*	when the user clicks the ADD button
			*	if the user selected multiple values, it will add multiple values on click action
			*	each new dynamically field will have a REMOVE button/link/action next to it
			*	thus fields can be removed independently
			*	each time the add button is clicked, it will add more fields
			*
			*	THESE ARE INDPENDENT INPUTS
			*/
											'_color' => array(
																'label' => T_('Set Set Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'color',
															),
			
											'_integer' => array(
																'label' => T_('Set Set Item Color'),
																'note' => '1-9',
																'valid_range' => array( 'min'=>1, 'max'=>9 ),
																'type' => 'integer',
															),
			
											'_text' => array(
																'label' => T_('Set Set Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'text',
																'allow_empty' => false,
															),
			
			
			
			/*
			*	
			*	each time the add button is clicked, it will add the inline group fields
			*	each new dynamically group will have a REMOVE button/link/action next to it
			*	thus if clicked will remove the group
			*
			*	THESE ARE GROUPED INLINE INPUTS
			*/	
			
			'_input_group' => array(
					'label' 		=> T_('Group'),
					'type' 			=> 'input_group',
					'inputs' 		=> array(
			
											'_color' => array(
																'label' => T_('Set Set Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'color',
															),
			
											'_integer' => array(
																'label' => T_('Set Set Item Color'),
																'note' => '1-9',
																'valid_range' => array( 'min'=>1, 'max'=>9 ),
																'type' => 'integer',
															),
			
											'_text' => array(
																'label' => T_('Set Set Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'text',
																'allow_empty' => false,
															),
						),
			
															
			
			))));
	}

Jan 05, 2018 14:28

Please can i be updated on your thoughts re this pull request?

This pull request is incomplete and not yet ready for merging, but you are able to see what needs to happen and how this behaves.

https://github.com/b2evolution/b2evolution/pull/63/files

Here is the plugin code:


<?php
/**
 * -----------------------------------------------------------------------------------------
 * This file provides a skeleton to create a new {@link http://b2evolution.net/ b2evolution}
 * plugin quickly.
 * See also:
 *  - {@link http://b2evolution.net/man/creating-plugin}
 *  - {@link http://doc.b2evolution.net/stable/plugins/Plugin.html}
 * (Delete this first paragraph, of course)
 * -----------------------------------------------------------------------------------------
 *
 * This file implements the Foo Plugin for {@link http://b2evolution.net/}.
 *
 * @license GNU GPL v2 - {@link http://b2evolution.net/about/gnu-gpl-license}
 *
 * @copyright (c)2010 by Your NAME - {@link http://example.com/}.
 *
 * @package plugins
 *
 * @author Your NAME
 */
if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );


/**
 * Foo Plugin
 *
 * Your description
 *
 * @package plugins
 */
class development_plugin extends Plugin
{
	/**
	 * Variables below MUST be overriden by plugin implementations,
	 * either in the subclass declaration or in the subclass constructor.
	 */
	/**
	 * Human readable plugin name.
	 */
	var $name = 'Plugin Name';
	/**
	 * Code, if this is a renderer or pingback plugin.
	 */
	var $code = 'devplugin';
	var $priority = 50;
	var $version = '0.1-dev';
	var $author = 'http://example.com/';
	var $help_url = '';

	/**
	 * Group of the plugin, e.g. "widget", "rendering", "antispam"
	 */
	var $group = 'Test';


	/**
	 * Init: This gets called after a plugin has been registered/instantiated.
	 */
	function PluginInit( & $params )
	{
		$this->short_desc = $this->T_('Short description');
		$this->long_desc = $this->T_('Longer description. You may also remove this.');
	}


	/**
	 * Define the GLOBAL settings of the plugin here. These can then be edited in the backoffice in System > Plugins.
	 *
	 * @param array Associative array of parameters (since v1.9).
	 *    'for_editing': true, if the settings get queried for editing;
	 *                   false, if they get queried for instantiating {@link Plugin::$Settings}.
	 * @return array see {@link Plugin::GetDefaultSettings()}.
	 * The array to be returned should define the names of the settings as keys (max length is 30 chars)
	 * and assign an array with the following keys to them (only 'label' is required):
	 */
	
	function GetDefaultSettings( & $params )
	{
		return array(
			'plugin_input_group' => array(
				'label' => T_('Set'),
				'note' => T_('Your note'),
				'multiple' => true, // or false .... Supported ...  ?
				'defaultvalue' => 'input_group',
				'type' => 'select_input',
				'options' => array( // Select List like $Form->select_input()
									/*
									 *	'type' => T_('LABEL'),
									 *	
									 *	TYPE can be: integer | color | checkbox | checklist | html_input | password | text | radio | fileselect (The most common types)
									*/	
			
									'integer' => T_('Your Numeric'),
									'color' => T_('Your Color'),
									'text' => T_('Your Text'),
									// ect, ect...
									'input_group' => T_('Your Inline Group'),
			
									),
				'entries' => array(
			
			
			/*
			*	We only specified 4 types for this example, 
			*	3 types are inputs
			*	1 type is a group with inline groups
			*	depending on what was selected is what will be added
			*	when the user clicks the ADD button
			*	if the user selected multiple values, it will add multiple values on click action
			*	each new dynamically field will have a REMOVE button/link/action next to it
			*	thus fields can be removed independently
			*	each time the add button is clicked, it will add more fields
			*
			*	THESE ARE INDPENDENT INPUTS
			*/
											'_color' => array(
																'label' => T_('Single Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'color',
															),
			
											'_integer' => array(
																'label' => T_('Single Item Integer'),
																'note' => '1-9',
																'valid_range' => array( 'min'=>1, 'max'=>9 ),
																'type' => 'integer',
																'defaultvalue' => '0',
															),
			
											'_text' => array(
																'label' => T_('Single Item Text'),
																'defaultvalue' => 'blank text',
																'type' => 'text',
																'allow_empty' => false,
															),
			
			
			
			/*
			*	
			*	each time the add button is clicked, it will add the inline group fields
			*	each new dynamically group will have a REMOVE button/link/action next to it
			*	thus if clicked will remove the group
			*
			*	THESE ARE GROUPED INLINE INPUTS
			*/	
			
			'_input_group' => array(
					'label' 		=> T_('Group'),
					'type' 			=> 'input_group',
					'inputs' 		=> array(
			
											'_color' => array(
																'label' => T_('Group Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'color',
															),
			
											'_integer' => array(
																'label' => T_('Group Item Integer'),
																'note' => '1-9',
																'valid_range' => array( 'min'=>1, 'max'=>9 ),
																'type' => 'integer',
																'defaultvalue' => '0',
															),
			
											'_text' => array(
																'label' => T_('Group Item Text'),
																'defaultvalue' => 'blank text',
																'type' => 'text',
																'allow_empty' => false,
															),
						),
			
															
			
			))));
	}

	
}
?>

Jan 08, 2018 22:38

The type is: input_select
The options for the list is build from the 'entries' specified.
The item that is selected will be added when the user clicks the Add button.
Each added item has its own remove button
Each item can be added multiple times
The amount/number of items that can be added can be limited with: $parmeta['max_number']

Feb 25, 2018 22:21

for a working example https://github.com/b2evolution/b2evolution/pull/63

Tested: text | integer | color | input_group
NOT tested: checkbox | checklist | html_input | password | radio | fileselect
plugin settings example:

	function get_widget_param_definitions( $params )
	{
		$r = array_merge( array(
		
						 
			
			'select_input' => array(
				'label' => T_('Set'),
				'note' => T_('Your note'),
				'multiple' => true, 
				'defaultvalue' => '',
				'type' => 'select_input',
				'entries' => array(

									'_color' => array(
														'label' => T_('Single Item Color'),
														'defaultvalue' => '#fed136',
														'type' => 'color',
													),

									'_integer' => array(
														'label' => T_('Single Item Integer'),
														'note' => '1-9',
														'valid_range' => array( 'min'=>1, 'max'=>9 ),
														'type' => 'integer',
														'defaultvalue' => 1,
													),

									'_text' => array(
														'label' => T_('Single Item Text'),
														'defaultvalue' => 'blank text',
														'type' => 'text',
														'allow_empty' => false,
													),
			
			'input_group' => array(
					'label' 		=> T_('Group'),
					'type' 			=> 'input_group',
					'inputs' 		=> array(
			
											'_color' => array(
																'label' => T_('Group Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'color',
															),
			
											'_integer' => array(
																'label' => T_('Group Item Integer'),
																'note' => '1-9',
																'valid_range' => array( 'min'=>1, 'max'=>9 ),
																'type' => 'integer',
																'defaultvalue' => 1,
															),
			
											'_text' => array(
																'label' => T_('Group Item Text'),
																'defaultvalue' => 'blank text',
																'type' => 'text',
																'allow_empty' => false,
															),
						),
			
															
			
			))),
		
		), parent::get_widget_param_definitions( $params ) );

}

Mar 08, 2018 03:07

@achillis please help me get an entry point to this request. It would help me if you could phrase it like this:

The code we already have in XXX does YYY but does not allow to do ZZZ.

And my first problem is XXX because you write "user profile preference settings" and this doesn't match your screenshot... and I have literally zero time, even with the best intentions in the world, to enter a guessing game :]

Mar 08, 2018 07:49

@fplanque

The code we already have in b2evolution 6.10.0-beta does provide (Skin | Plugin | Widget ) settings with the ability to dynamically add Predefined Form Inputs in a grouped fieldset layout [See: Image 1] but does not allow to dynamically add a single inline Predefined Form Input [See: image 2] .

@fplanque please note: the reason why this request allows the user to "select" the desired "input" to be inserted, is to allow the user, to only add settings that are needed. For example: Imagine this input will allow the user to add an item to a custom form, the list offers three predefined items: checkbox, radio and text. but the user only wishes to add a checkbox, then it can be done by selecting the desired item from the list and adding it only.

Images:

Mar 08, 2018 23:51

Ok, thanks. We'll look at this.

Mar 16, 2018 21:14

Hi @fplanque and @yurabakh as per https://github.com/b2evolution/b2evolution/tree/feature/dynamic-input-groups please note that I added some additions and fixes to https://github.com/b2evolution/b2evolution/pull/63 and made it closer inline with your style.

  1. All form types are supported
  2. checkbox, checklist, radio types works
  3. can add and remove inputs independently
  4. each item can have defined max_number with warning alert to user if exceded

see screenshot

I tested it with test plugin using these params:

	/**
	 * Param definitions when added as a widget.
	 *
	 * Plugins used as widget need to implement the SkinTag hook.
	 *
	 * @return array
	 */
	function get_widget_param_definitions( $params )
	{
		
		global $app_version;
		
		$type = version_compare( $app_version, '6.6.5', '>' ) ? 'array:array:string' : 'array';
		$r = array_merge( array(

			'select_input' => array(
				'label' => T_('Set'),
				'note' => T_('Your note'),
				'multiple' => true, 
				'defaultvalue' => '',
				'type' => 'select_input',
				'entries' => array(
			
			
			
				'_html_textarea' => array(
						'label' => T_('HTML textarea'),
						'type' => 'html_textarea',
						'rows' => 15,
						'note' => '',
						'defaultvalue' => '',
					),
			
				'_html_input' => array(
						'label' => T_('HTML input'),
						'type' => 'html_input',
						'rows' => 15,
						'note' => '',
						'defaultvalue' => '',
					),
			
				'_acheckbox' => array(
					'label' => T_('Checkbox'),
					'type' => 'checkbox',
					'defaultvalue' => 1,
					'note' => '',
				),
			
					'_achecklist' => array(
							'label' => T_('Check List'),
							'note' => '',
							'type' => 'checklist',
							'options' => array(
									array( 'one', 	T_('First'), 0 ),
									array( 'two',	T_('Second'), 0 ),
									array( 'three', T_('Third'), 0 ),
								),
							),
			
			
							'_aradio' => array(
								'label' => T_('Radio buttons'),
								'note' => '',
								'type' => 'radio',
								'inline' => false,
								'options' => array(
										array( 'one', T_('First') ),
										array( 'two', T_('Second') ),
										array( 'three', T_('Third') )
									),
								),


							'_fileselect' => array(
								'label' => T_('File Select'),
								'note' => '',
								'defaultvalue' => '',
								'type' => 'fileselect',
								'thumbnail_size' => 'fit-320x320',
							),
			


									'_password' => array(
														'label' => T_('Password Item Text'),
														'defaultvalue' => 'blank text',
														'type' => 'password',
														'allow_empty' => false,
													),
									'_color' => array(
														'label' => T_('Single Item Color'),
														'defaultvalue' => '#fed136',
														'type' => 'color',
														'max_number' => 2,
			
													),

									'_integer' => array(
														'label' => T_('Single Item Integer'),
														'note' => '1-9',
														'valid_range' => array( 'min'=>1, 'max'=>9 ),
														'type' => 'integer',
														'defaultvalue' => 1,
													),

									'_text' => array(
														'label' => T_('Single Item Text'),
														'defaultvalue' => 'blank text',
														'type' => 'text',
														'allow_empty' => false,
													),
			
			'_input_group' => array(
					'label' 		=> T_('Group'),
					'type' 			=> 'input_group',
					'inputs' 		=> array(
			/*
							'_fileselect' => array(
								'label' => T_('File Select'),
								'note' => '',
								'defaultvalue' => '',
								'type' => 'fileselect',
								'thumbnail_size' => 'fit-320x320',
							),
							*/
			
											'_color' => array(
																'label' => T_('Group Item Color'),
																'defaultvalue' => '#fed136',
																'type' => 'color',
															),
			
											'_integer' => array(
																'label' => T_('Group Item Integer'),
																'note' => '1-9',
																'valid_range' => array( 'min'=>1, 'max'=>9 ),
																'type' => 'integer',
																'defaultvalue' => 1,
															),
			
											'_text' => array(
																'label' => T_('Group Item Text'),
																'defaultvalue' => 'blank text',
																'type' => 'text',
																'allow_empty' => false,
															),
						),
			
															
			
			))),
		
		), parent::get_widget_param_definitions( $params ) );

		return $r;
	
		
	}	


Form is loading...

b2 – This forum is powered by b2evolution CMS, a complete engine for your website.