CF7 Skins Field Rules – Code

Last Updated on July 25, 2020 by Neil Murray

CF7 Skins Field Rules define where a new, duplicated field can be placed inside CF7 Visual tree structure or it is allowed in the form or not. All these rules are defined in one file cf7sRules.js

Example:

  • Each List-Li can contain only one child CF7 Tag.
  • CF7 Tag much have List-Ol and List-Li as grandparent and parent respectively.
  • There can’t be more than one recaptcha field and submit button in a form.

The rules are divided into 3 major categories as follows

  • cf7sDropRules
  • cf7sSurroundingRules
  • cf7sDuplicateRules

1. Drop

These rules define where/whether new fields can be dropped/added. 
There are two methods to add a new file

  • Drag and drop the field inside the Visual tree structure. If the field is allowed to be dropped then it will be highlighted as blue else it will be highlighted as red.
  • If you simply click a CF7 tag from from sidebar then it automatically adds that field at the bottom of form. Before adding the field it is checked using cf7sDropRules and if its is allowed then it gets added else an error message is shown.

Parameters

  • prevPath (number/string) previous path
  • prevParent (object) previous parent object
  • prevTreeIndex (number) previous tree index
  • nextPath (number/string) next path
  • nextParent (object) next parent object
  • nextTreeIndex (number) next tree index
  • treeData (object) current tree data object

Return

Boolean true to enable drop, false to disable drop.

2. Surround

These rules define the surrounding elements (parents)  of fields. If a parent is not present then it will get automatically added when it gets checked by cf7SurroundingRules. 

Example: If a CF7 Tag (if not reCAPTCHA or Submit) is added into Form or Fieldset then it should be always surrounded by ol and li tags. If they are not present then they will be automatically added.

Parameters

  • node  {Object} current dropped/clicked node
  • nextParent {Object} next parent node to move

Returns

Modified node object.

3. Duplicate

These rules defines whether a node can be duplicated or not. If it can’t be duplicated then an error message will be shown.

Example: If you try to duplicate a submit button then an error message will be shown ‘Node has submit children. Only one submit allowed in a form‘ . The reason being that a form can’t have more than 1 submit button.

Parameters

rowInfo {Object} current tree data

Returns

Boolean, true to enable duplicate, false to disable.

Registering Rule for Addons

Addons can register their own drop, surround and duplicate rules 

To register a rule the addon have to use the following code

Code: 

window.cf7svisual.addons.register( 'cf7sRules', { drop: readyClassDropRules } );

Code Explanation:

  • window.cf7svisual.addons.register: It is used to register a new addon
  • Parameters
    • cf7sRules: This is the name of the hook. All the addons should use this hook name to register drop, surround and duplicate rules.
    • { drop: readyClassDropRules } : Here drop is the type of rule defined. It can have drop, surround and duplicate as values. 
      readyClassDropRules  is the name of callback function in which the rules for the addon are defined.

Complete Example Code:

const myDropFunc = ( obj ) => { // ES6 style
	// Do drop check
	return true; // or false
}

function mySurroundFunc( obj ) {
	// Do node modification
	return obj.node;
}

const myRules = { drop: myDropFunc, surround: readyClassRules };

window.cf7svisual.addons.register( 'cf7sRules', myRules );

Further Reading

Notes

Add notes here