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

Compartir este tutorial

Tutoriales en la misma categoria

Tutorial: Gestión de archivos en la nube

Algunos de los servicios de almacenamiento de datos están listos para leer y almacenar de forma se...

Integración con WhatsApp

Para integrar WhastApp con ScriptCase, estaremos utilizando una API en específico que se llama...

Confirmación por Correo Electrónico

En este tutorial veremos cómo crear un formulario de confirmación de registro para programar curs...

Enviar múltiples SMS con la macro sc_send_sms

En este ejemplo estaremos viendo cómo podemos crear una aplicación que nos ayude  a enviar m...

Comentar este post