Tutorial: Mapas mentales en formularios

En este tutorial vamos a ver los pasos que se deben seguir para crear un formulario con un mapa mental.

Creación de una aplicación de Formulario

1 – Cree una aplicación de formulario de “Registro único“

2 – Agregue un nuevo campo al formulario. Este será del tipo “etiqueta”, el nombre será chart_mindmap.

3 – Acceda a “Layout >> Bloques” para colocar la posición de las etiquetas sobre los campos.

4 – Accede a “Editar campos” y organiza los campos según la imagen.

5 –Accede a la edición del campo “mindmap_jason”

6 – Marque la opción “campo oculto”

7 – Ahora vamos a crear una función de Javascript que se encargará de construir el mapa mental. Vaya a “Programación >> Métodos JavaScript >> Nuevo método”.

8 – El nombre de la función será “drawChart” y el código:

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 – Utilice la opción para ingresar parámetros en la llamada a la función.

10 – Usaremos 3 parámetros: jsonobj, strJsonFld y arrLangs

11 – Finalmente, dentro del evento onLoad, se agrega el siguiente código

{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 – Ahora guardamos y ejecutamos la aplicación