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 Blank que va a ser llamada desde el Formulario

1 – En el evento OnExecute agregamos el siguiente código


?><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>MindMap</title>

<link rel="stylesheet" type="text/css" href="<?php echo sc_url_library('prj', 'mindmap_chart', 'jsmind.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php echo sc_url_library('prj', 'mindmap_chart', 'jsmind-index.css'); ?>" />
    
</head>
<body>

    <div id="mindmap">
    
    </div>

    
sc_include_lib("jquery");    
<script type="text/javascript" src="<?php echo sc_url_library('prj', 'mindmap_chart', 'jsmind.js'); ?>"></script>
<script type="text/javascript" src="<?php echo sc_url_library('prj', 'mindmap_chart', 'jsmind.draggable.js'); ?>"></script>
    <script>
        var 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":"easy3","topic":"Easy to store"},
                    {"id":"easy4","topic":"Easy to embed"},
                    {"id":"other3","background-image":"http://placehold.it/150/C0CCDA/", "width": "150", "height": "150"}
                ]},
                    {"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":"powerful3","topic":"Depends on you"}
                ]},
                    {"id":"other","topic":"test node","direction":"left","children":[
                    {"id":"other1","topic":"I'm from local variable"},
                    {"id":"other2","topic":"I can do everything"}
                ]}
            ]}
        }

        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();
                mind_tree = JSON.stringify(mind_tree.data);
            }
            
            // 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')
            })
        });

    </script>
</body>
</html>
<?php

2 – Luego guardamos y generamos la aplicación

3 – Luego creamos una aplicación del tipo formulario del tipo “Registro único”

4 – Dentro del evento onApplicationInit agregamos el siguiente código


?>
<style>
.scFormColorPaleteItem {
    border-color: #000 !important;
    border-width: 0.5px !important;
    margin-bottom: 2px;
}
.scFormPage {overflow: hidden;}
</style>
<?php

if(isset($_SERVER['HTTP_HOST']) && substr($_SERVER['HTTP_HOST'], 0, 14) == "www.scriptcase") {
    ?>
        <style type="text/css">.scFormHeader{display:none!important;}</style>
<?php
}

5 – Dentro del evento onScriptInit el siguiente código

sc_block_display(‘blsettings’, ‘off’);

6 – Por último dentro del evento onLoad se agrega el siguiente código

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

//{bt_upd} = "<a href='javascript:upd_all();' class='scButton_default' style='vertical-align: middle;display:inline-block;'>".{lang_mindmaps_update}."</a>";
//{bt_organize} = "<a href='javascript:layoutAll();' class='scButton_default' style='vertical-align: middle;display:inline-block;'>".{lang_mindmaps_layout}."</a>";

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) );

7 – Guardamos y ejecutamos la aplicación

Compartir este tutorial

Tutoriales en la misma categoria

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...

Enviar SMS con la macro sc_send_sms

Creando una aplicación de Control 1 - Creamos una aplicación del tipo Control. 2- Una v...

Comentar este post