Mind maps on forms

In this tutorial we will see the steps that must be followed to create a form with a mind map.

Form application creation

1 – Create a “ Single Record ” form application

2 – Add a new field to the form. This will be of the “label” type, the name will be chart_mindmap.

3 – Access “Layout >> Blocks” to place the position of the labels above the fields.

4 – Access “Edit fields” and organize the fields according to the image.

5 – Access the edition of the “mindmap_jason” field

6 – Check the “hidden field” option

7 – Now we are going to create a Javascript function that will be in charge of building the mindmap. Go to “Programming >> JavaScript Methods >> New Method”.

8 – The function name will be “ drawChart ”, and the code:

ar_langs = arrLangs.split(";");
var mind_data = {};
if (jsonobj == 0 ){
	mind_data = {
					"meta":{
						"name":"jsMind remote",
						"author":"hizzgdev@163.com",
						"version":"0.2"
					},
					"format":"node_tree",
					"data":{"id":"root","topic":"jsMind","children":[
							{"id":"easy","topic":"Easy","direction":"left","children":[
							{"id":"easy1","topic":"Easy to show"},
							{"id":"easy2","topic":"Easy to edit"}
						]},
							{"id":"open","topic":"Open Source","direction":"right","children":[
							{"id":"open1","topic":"on GitHub", "background-color":"#eee", "foreground-color":"blue"},
							{"id":"open2","topic":"BSD License"}
						]},
							{"id":"powerful","topic":"Powerful","direction":"right","children":[
							{"id":"powerful1","topic":"Base on Javascript"},
							{"id":"powerful2","topic":"Base on HTML5"}
						]},
							{"id":"other","topic":"test node","direction":"left","children":[
							{"id":"other1","topic":"Im from local variable"},
							{"id":"other2","topic":"I can do everything"}
						]}
					]}
				}
}else{	
	mind_data = JSON.parse(jsonobj);
}


		var mind_options = {
			container: 'mindmap',
			theme: 'scriptcase',
			editable: true
		}

		var mind = jsMind.show(mind_options,mind_data);
		var mind_tree = {};

		$(document).ready(function(){
			// Actual items
			mind_tree = JSON.stringify(mind_tree.data);

			// Append menu
			$('jmnode').append('<div class="node-menu"><span></span><ul><li class="item-add"><a href="#">New node</a></li><li class="item-del"><a href="#">Remove node</a></li></ul></div>');
			
			// Open Menu
			$('jmnode .node-menu span').click(function(e){
				e.stopPropagation();
				$(this).parent().toggleClass('active');
			})

			// Refresh node tree
			function refreshMindTree() {
				mind_tree = jsMind.current.get_data();					
				var objstr = mind_tree;
				
				mind_tree = JSON.stringify(mind_tree.data);
				document.getElementById(strJsonFld).value = JSON.stringify(objstr);
				
				console.log(document.getElementById(strJsonFld).value);
			}
			
			// Add item
			$('.item-add a').click(function(e){
				e.preventDefault();

				var node_selected = mind.get_selected_node();
				var node_topic = 'test';
				var node_id = jsMind.util.uuid.newid();

				mind.add_node(node_selected, node_id, node_topic);
				
				// Refresh node tree
				refreshMindTree();
			})

			// Remove item
			$('.item-del a').click(function(e){
				e.preventDefault();

				var node_selected = mind.get_selected_node();
				node_selected = node_selected.id;

				mind.remove_node(node_selected);

				// Refresh node tree
				refreshMindTree();
			})

			// Click outside to hide menu
			$('html, body').click(function(){
				$('jmnode.selected .node-menu').removeClass('active')
			})
		});

9 – Use the option to enter parameters in the function call.

10 – We will use 3 parameters: jsonobj , strJsonFld and arrLangs

11 – Finally, within the onLoad event, the following code is added

{chart_mindmap} = '<div id="mindmap" style="width:98%;height:350px;"></div>';

if(empty({mindmap_json})){
	{mindmap_json} = 0;
}

?>
sc_include_lib("jsmind")
<?php

// Call javascript function
$langs = {lang_mindmaps_update}.";".{lang_mindmaps_layout}.";".{lang_mindmaps_undo}.";".{lang_mindmaps_redo}.";".{lang_mindmaps_save}.";".{lang_mindmaps_load};

sc_ajax_javascript( 'drawChart', array({mindmap_json}, 'id_sc_field_mindmap_json',$langs) );

12 – Now we save and run the application

Tutorials in the same category

Tutorial: Cloud File Management

Some of the data storage services are ready to securely read and store files and images from your S...

Integration with WhatsApp

To integrate WhatsApp with ScriptCase, we will be using a specific API called Chat-API, it is a...

Tutorial: Blank Application

In this example a Blank application will be created, using for example jquery code to create an acc...

Using the Paypal and Pagseguro API

1 - We create an application of the grid type 2 - We edit the following fields and create a ...

Comment this post