Building Dynamic Forms

Forms

Our advanced API gives the integrator the maximum level of flexibility; this is due to the method by which forms are generate and presented to the end user.

1. Portal Requests form (new user, income verification, asset verification, etc)
2. Accredify returns a JSON object that contains:
- a. Sections, a grouping of questions. (i.e tabs, or set of questions in a wizard)
- b. Elements, an array of nodes, one node for every question.
- c. Node, represents the property of the question field.
- i. Name
- ii. Class
- iii. Label (question)
- iv. Placeholder
- v. Value (we will pre-fill values if they already exist in our system)
- vi. Required (true or false)
- vii. Input, (type: text, email, password, select, checkbox, etc)
3. Portal Renders form (examples and helper functions described below).
4. Portal sends user response to Accredify API
5. Accredify acknowledges receipt of data

InvestReady then process the request; contact IRS, runs credit report, verify 3rd party credentials (bared lawyer, etc) or whatever verification action is needed. When it’s complete InvestReady will submit a webhook to the originating portal. The webhook signals the portal to request the latest information for said user.

Generating Forms

There are two helper libraries that are used to generate forms from the JSON objects, a PHP version that can be replicated in your language of choice, and a JavaScript one that can be leveraged as is.

The PHP version controls the majority of the form building, while the JavaScript version is used to dynamically add form fields and preform form validation.

Example : Create User Question Set

{
	success: 1,
	message: "User Question Set",
	data: {
		section: [
			{
			label: "Personal Information",
			notes: "",
			elements: [
					{
						name: "accredify[person][email]",
						class: "accredify_person_email",
						label: "Email",
						placeholder: "Email",
						value: "PREVIOUS_VALUE",
						required: true,
						input: "email"
					},
					{
						name: "accredify[person][first_name]",
						class: "accredify_person_first_name",
						label: "First Name",
						placeholder: "First Name",
						value: "PREVIOUS_VALUE",
						required: true,
						input: "text"
					},
					{
						name: "accredify[person][last_name]",
						class: "accredify_person_last_name",
						label: "Last Name",
						placeholder: "Last Name",
						value: "PREVIOUS_VALUE",
						required: true,
						input: "text"
					},
					{
						name: "accredify[person][dob]",
						class: "accredify_person_dob accredify_mask_date",
						label: "Date of Birth",
						placeholder: "01/23/1983",
						value: "PREVIOUS_VALUE",
						required: true,
						input: "text"
					},
					{
						name: "accredify[person][phone]",
						class: "accredify_person_phone accredify_mask_phone",
						label: "Phone",
						placeholder: "Phone Number",
						required: false,
						value: "PREVIOUS_VALUE",
						input: "text"
					}
				]
			}
		]
	}
}

Step 1

Loop through "data" attribute

Step 2

For each section, you'll find a "label" and "note" node, the label node is the title of the section and the note node is an explainer. Output these values.

Example

Step 3

Loop through each "element" node within the section, call the helper function InputBuilder (sample below).

//Pending completion of tutorial.

public function inputBuilder($inputObj,$with_wrapper=false,$custom_wrapper_classes=''){
		$domElement="";
		switch ($inputObj['input']) {
			case 'text':
				$domElement = ($with_wrapper)? $this->elementInputWrapper($inputObj,$custom_wrapper_classes) : $this->elementInput($inputObj);
			break;
			case 'password':
				$domElement = ($with_wrapper)? $this->elementInputWrapper($inputObj,$custom_wrapper_classes) : $this->elementInput($inputObj);
			break;
			case 'email':
				$domElement = ($with_wrapper)? $this->elementInputWrapper($inputObj,$custom_wrapper_classes) : $this->elementInput($inputObj);
			break;			
			case 'file':
				$domElement = ($with_wrapper)? $this->elementInputWrapper($inputObj,$custom_wrapper_classes) : $this->elementInput($inputObj);
			break;					
			case 'select':
				$domElement = ($with_wrapper)? $this->elementSelectWrapper($inputObj,$custom_wrapper_classes) : $this->elementSelect($inputObj);					
			break;
			case 'hidden':
				$domElement = $this->elementInput($inputObj);
			break;	
			case 'property':
				$domElement = $this->elementProperty($inputObj);
			break;
			case 'tabel':
				$domElement = $this->elementTable($inputObj);
			break;
			case 'container':
				$domElement = $this->elementContainer($inputObj);
			break;
			case 'canvas':
				$domElement = $this->elementCanvas($inputObj);
			break;

		}


		return $domElement;
	}