Mind maps on forms

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

Creation of a Blank application that will be called from the Form

1 – In the OnExecute event we add the following code


?><!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 – Then we save and generate the application

3 – Then we create an application of the form type of the “Single Registration” type

4 – Within the onApplicationInit event we add the following code


?>
<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 – Within the onScriptInit event the following code


sc_block_display(‘blsettings’, ‘off’);

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


{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 – We save and run the application

Tutorials in the same category

Using the Paypal and Pagseguro API

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

Send multiple SMS with the sc_send_sms macro

In this example we will be seeing how we can create an application that helps us send multiple mess...

Send SMS with the sc_send_sms macro

Creating a Control application 1 - We create an application of type Control. 2 - Once the...

Using the Mandrill API with macro sc_call_api

In this tutorial we will be showing how to use the sc_call_api macro with the Mandrill API. ...

Comment this post