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.

TODO

• Explain every F3 component and configuration
• Add more examples
• Use less dependencies
• Add tests