Tutorial: Organograma

Neste tutorial utilizaremos uma biblioteca Javascript para criar um organograma interativo.

Para este exemplo, utilizaremos 3 aplicações, a primeira, uma blank que exibirá o organograma, uma segunda blank que será executada via Ajax para executar as atualizações na base de dados, e finalmente, uma aplicação de formulário que será exibido em modal para edição dos dados de um funcionário.

1 Criando o Formulário

1.1 – Crie uma nova aplicação de Formulário baseado na tabela “employees”.

1.2 – Acesse a opção SQL e adicione uma cláusula WHERE à aplicação: employee_id = [empkey]

1.3 – Uma vez que vamos chamar esta aplicação para ser aberta em uma janela modal, utilizaremos um artifício para fechá-la automaticamente após a alteração dos dados, e recarregar a aplicação anterior. Para isso, acesse o menu “Programação>>Métodos Javascript>>Novo Método”, onde vamos criar uma função Javascript de nome “upd_parent”, com o código: 

window.parent.location.reload();

1.4 – Acesse agora o menu “Formulário>>Eventos>>onAfterUpdate” e faça a chamada da função Javascript que criamos, e repita o procedimento para o evento onAfterDelete.

sc_ajax_javascript(‘upd_parent’); 

1.5 – Acesse o evento onApplicationInit para incluir um código de validação da variável empkey.

if( isset($_GET[“empkey”]) ){ [empkey] = $_GET[“empkey”]; }

1.6 – Gere o código fonte da aplicação.

2 Criando a aplicação Ajax

Vamos criar agora mais uma aplicação secundária, que será complementar à nossa aplicação principal. Esta será uma aplicação apenas para executar comandos de insert, update e delete via Ajax.

2.1 – Crie uma nova aplicação do tipo Blank

2.2 – No evento OnExecute adicionamos o seguinte código:

// UPDATE NODES
if( $_POST['ajaxtp'] == 'save' ){
	
	$var_sql_upd = "UPDATE example_gojs SET ";
	
	if( $_POST['item_mode'] == "updtext" ){
		$var_sql_upd .= " employee_name = '".$_POST['item_value']."' ";
	}
	elseif( $_POST['item_mode'] == "updparent" ){
		$var_sql_upd .= " employee_boss = ".$_POST['item_value'];
	}
	$var_sql_upd .= " WHERE employee_id = ". $_POST['item_id'];
	echo $var_sql_upd;
	sc_exec_sql( $var_sql_upd );
}

//INSERT A NODE
elseif( $_POST['ajaxtp'] == 'insert' ){ 

	$today = date("Y-m-d");
	
	if( $_POST['empboss'] == 0 ) { 
		$sql_insert = "INSERT INTO example_gojs(employee_name, employee_title, employee_photo) VALUES ('(new person)', '(title)', 'grp__NM__img__NM__me.png')";
	}else{
		$sql_insert = "INSERT INTO example_gojs(employee_name, employee_title, employee_boss, employee_photo) VALUES ('(new person)', '(title)', ".$_POST['empboss'].", 'grp__NM__img__NM__me.png')";
	}
	sc_exec_sql($sql_insert);
			
	sc_lookup(rs,"SELECT employee_id FROM example_gojs ORDER BY employee_id DESC LIMIT 1");
	$result = {rs[0][0]};
	echo $result;

}

//DELETE A NODE
elseif( $_POST['ajaxtp'] == 'delete' ){ 
	$sql_delete = "DELETE FROM example_gojs WHERE employee_id = ".$_POST['empkey'];
	sc_exec_sql($sql_delete);
}

2.3 – Gere o código fonte da aplicação.

3 Criando o Organograma

Finalmente vamos criar nossa aplicação principal onde construiremos e exibiremos o organograma.

3.1 – Crie uma nova aplicação do tipo Blank

3.2 – No evento OnExecute adicionamos o seguinte código

function chkChildren($empkey){
	$chk_sql = "SELECT COUNT(*) FROM example_gojs WHERE employee_boss=".$empkey;
	sc_lookup(rs, $chk_sql);	
	return {rs[0][0]};
}
function getChildren($empid, $str_ret, $level){
	
	if($empid==0){
		$check_sql = "SELECT employee_id, employee_name, employee_title, employee_boss, employee_photo FROM example_gojs WHERE employee_boss IS NULL OR employee_boss = 0";
	}else{
		$check_sql = "SELECT employee_id, employee_name, employee_title, employee_boss, employee_photo FROM example_gojs WHERE employee_boss=".$empid;
	}	
    sc_lookup(result, $check_sql);	
	$counter = count({result});	
	
    for($i=0;$i<$counter;$i++){ 
		if ( substr({result[$i][4]}, 0, 7) == 'grp__NM'){ 
			$urlimg =  "../_lib/img/".{result[$i][4]}; // Just for the purpose of example. Gets the project directory path
		}else{
			$urlimg = "../../../file/img/" .{result[$i][4]}; // Image upload. It gets from the images directory path
		}
		if( $level>4 ) { $level = 4; }
		
		$str_ret .= " { 'key': '".{result[$i][0]}."', 'title': '".{result[$i][1]}."',	'content': '".{result[$i][2]}."', 'picture': '".$urlimg."',	'className': 'level-".$level."' ";
		
		$haschildren = chkChildren({result[$i][0]});		
		
		if($haschildren > 0 ){ 
			$str_ret .=  ",	'children': [";	
			$level++;
			$str_ret = getChildren({result[$i][0]}, $str_ret, $level);
			$level--;
			$str_ret = substr($str_ret, 0, -1);
			$str_ret .=  "]";
		}
		
		$str_ret .=  "},";
	}	
	return $str_ret;
}

$var_nodes_array = 'var datasource = ';
$nodes = '';
$nodes = getChildren(0,$nodes,1);

$var_nodes_array .= substr($nodes, 0, -1);
 
$var_nodes_array .= ';';
//echo $var_nodes_array;
?>
<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>Organogram</title>
	
	sc_include_lib("Jquery");
	sc_include_lib("jquery_thickbox");
	sc_include_lib("orgchart");
	
	<style> html, body{ background-color: #F9FAFC; } </style> 
	
	
	
</head>
<body>
	<div id="organogram"> </div>		
	<script type="text/javascript">
		$(function() {

		var getId = function() {
			return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
		};

		var nodeSelected = null;
					
		<?php echo $var_nodes_array; ?>

		var nodeTemplate = function(data) {
			return '<div class="node-picture"><img width="50px" src="' + (data.picture ? data.picture : 'http://placehold.it/48/?text=%')  + '"></div><div class="node-content"><div class="node-title">' + data.title + '</div>' + data.content + '</div>';
		};

		var template = [];

		var oc = $('#organogram').orgchart({
			'data' : datasource,
			'nodeTemplate': nodeTemplate,
			'draggable': true,
			'createNode': function(nodeSelected, data) {
				nodeSelected[0].id = data.key; //getId();
			},
			  'dropCriteria': function($draggedNode, $dragZone, $dropZone) {
				
				return true;
			  }
		}); 
		
		oc.$chart.on('nodedrop.orgchart', function(event, nodeSelected) {
			var droppednode = nodeSelected.draggedNode[0].id;
			var parentnode =  nodeSelected.dropZone.parent().closest('table').find('.node')[0].id;
			console.log('draggedNode:' + droppednode + ', Parent:' + parentnode
			//+ ', dragZone:' + event.dragZone.children('.title').text()
			//+ ', dropZone:' + event.dropZone.children('.title').text()
		  );
			save(droppednode, 'updparent', parentnode);
		});

		$('.node').append('<div class="node-menu"><em></em><em></em><em></em><ul><li class="edit-item"><a href="#"><?php echo {lang_context_menu_edit}; ?></a></li><li class="divider"></li><li class="add-children"><a href="#"><?php echo {lang_context_menu_add_child}; ?></a></li><li class="add-sibling"><a href="#"><?php echo {lang_context_menu_add_sibling}; ?></a></li><li class="divider"></li><li class="del-item"><a href="#"><?php echo {lang_context_menu_rem}; ?></a></li></ul></div>');

		$('.node-menu').click(function(){
			$(this).toggleClass('active');
			nodeSelected = $(this).parent();
		});

		$('.add-children a').click(function(e){
			e.preventDefault();

			var hasChild = nodeSelected.parent().attr('colspan') > 0 ? true : false;
			var nodeVals = [];
			var template = [{'title': ' ', 'content': ' ', 'className': 'level-2', 'relationship': rel, 'id': getId()}]

			if (!hasChild) {
				var rel = nodeVals.length > 1 ? '110' : '100';
				oc.addChildren(nodeSelected, template);
			} else {
				oc.addSiblings(nodeSelected.closest('tr').siblings('.nodes').find('.node:first'), template);
			}
			
			insertNode(nodeSelected[0].id);
		})

		$('.add-sibling a').click(function(e){
			e.preventDefault();

			var template = [{'title': ' ', 'content': ' ', 'className': 'level-2', 'id': getId()}]

			oc.addSiblings(nodeSelected, template); 
			
			insertNode(nodeSelected.parent().closest('table').parent().closest('table').find('.node')[0].id);
		})
			
		$('.edit-item a').click(function(e){
			var strAppEdit = 'org_chart_form';
			tb_show('', '../'+ strAppEdit +'/?empkey='+nodeSelected[0].id+'&KeepThis=true&TB_iframe=true&height=600&width=600', null);
		})

		$('.del-item a').click(function(e){
			e.preventDefault();
			oc.removeNodes(nodeSelected);
			
			deleteNode(nodeSelected[0].id);
		})
		
			
		function insertNode(node_id) { 	
		  $.post( "../org_chart_ajax/index.php",
				{ ajaxtp: "insert", empboss: node_id })
				.done(function(response,status){			
					return response;	  		
				});
			window.location.reload(); 
		}
			
		function save(v_id, v_mode, v_value) { 
			var val = v_value;
			if ( v_mode == "updstep") { val = v_value.substring(5); }
			$.post( "../org_chart_ajax/index.php",
				{ ajaxtp: "save", item_id: v_id, item_mode: v_mode, item_value: val },
				function(response, status){
					return response;
				}
			);
		}	
			
		function deleteNode(node_id) { 	
		  $.post( "../org_chart_ajax/index.php",
				{ ajaxtp: "delete", empkey: nodeSelected[0].id },
				function(response, status){
					return response;
				}
			);
		}

	});
	</script>
</body>
</html>
<?php

Obs1: Perceba que no código estamos incluindo bibliotecas nativas do Scriptcase. Especificamente para a construção do Organograma, precisamos da biblioteca “orgchart”.


	sc_include_lib("Jquery");
	sc_include_lib("jquery_thickbox");
	sc_include_lib("orgchart");
	

Obs2: Perceba também as chamadas para as aplicações de formulário e Ajax.

3.3 – Finalmente executamos a aplicação

Compartilhe este tutorial

Tutoriais na mesma categoria

Gerenciamento de Arquivos na Nuvem

Alguns dos serviços de armazenamento de dados estão prontos para ler e armazenar com segurança ...

Enviar SMS com a macro sc_send_sms

Neste exemplo, veremos como podemos criar uma aplicação que nos ajuda a enviar mensagens por meio...

Integração com WhatsApp

Para integrar o WhatsApp ao ScriptCase, estaremos utilizando uma API específica chamada Chat...

Enviar multiplos SMS com a macro sc_send_sms

Neste exemplo, veremos como podemos criar uma aplicação que nos ajuda a enviar várias mensagens ...

Comente este post