F3 NPM | npm.io

F3

Form tree (AKA F3), is a module to create dynamic (client-side) decision trees (D3) with forms.

Dependencies

This first implementation of F3 has some several dependencies:

jQuery for DOM manipulation.
jQuery.dForm for dynamic form creation.
jQuery.validate for form validation.
PubSubJS: for pub/sub events.
Bootstrap: for form styles and utilities.
bootstrap-datepicker and moment: for date and time components.

Instalation

With NPM (using Browserify):

npm install f3 --save

Then, in your front-end module:

var formTree = require('f3')();

Standalone

Copy the file dist/f3.js or dist/f3.min.js in your project.

Then, in your .js:

var formTree = f3();

Finaly, to use the formTree variable, see the available methods, configurations and examples.

Methods

formTree.init(): This method load all F3 components/types, subscribers and validations.
formTree.render($target, tree): This method allow render an instance of F3 inside a specific jQuery selector ($target) using the description of the tree object.

Configuration

The tree object

This object has all the definitions for the creation of the decision tree. For example, the follow object create a F3 with 3 branches:

The first branch show a question with two options
If the user select Yes, another question/branch appears
Else, if the user select No, the user see the final branch to send the responses

var tree = {
	
	//Every branch is an object inside the array branches
	'branches': [
		
		//First visible branch
		{
			//Every branch need an ID
			'branch': '1',

			//Form components are inside the html array
			'html': [

				//A decision component 
				{

					//Component type
					'type': 'decision',

					//The question for the user
					'question': 'Do you like ice cream?',

					//The options to answer
					'options': [

						{
							//Label to show
							'text': 'Yes',
							//If the user select this option, show the branch 1.1
							'branch': '1.1'
						},

						{
							//Label to show
							'text': 'No',
							//If the user doen't like ice cream, show the branch 2
							'branch': '2'
						}

					]

				}

			]

		},

		//Branch 1.1
		{
			//The ID has to be in the format x.x
			'branch': '1.1',
			'html': [

				//This branch has a text component
				{

					'type': 'text',
					'question': 'What flavor do you like?',

					//Validation rules
					'validation': {
						'rules': {
							'required': true
						},
						'messages': {
							'required': 'You need write a flavor'
						}
					}

				},

				//And a next component
				{
					'type': 'next',

					//Label of the button
					'text': 'Next',

					//Go to the final branch
					'branch': '2',

					//But before validate if the user complete the flavor 
					'validate': true

				}

			]

		},

		//The final branch
		{
			'branch': '2',

			//This branch has only an send component
			'html':
			[

				//This component allow know when the user finish the F3
				{
					'type': 'send',
					'text': 'Send'
				}

			]

		}

	]

};

See this example working.