Générer un diagramme / modèle métier par code côté front avec des objets sélectionnés par l'utilisateur

Support
4

Après quelques ajustements pour rendre le modeleur invisible en V4, voici comment créer un modèle métier et y insérer des objets via JavaScript sans interaction utilisateur :

L’exemple utilise le template DemoModel de la démo :

  • Créer une action de liste sur DemoProduct de type Front avec le code suivant :
    javascript:demoNewModel(obj);

  • Coder dans le SCRIPT front de l’objet :

function demoNewModel(obj) {
	var app = $ui.getAjax(),
		diagram, modelId,
		mt = app.getBusinessObject("ModelTemplate", "tmp_ajax_ModelTemplate"),
		mod = app.getBusinessObject("Model", "tmp_ajax_Model"),
		ids = obj.selectedIds;

	// Needs objects to insert
	if (!ids || !ids.length) {
		$ui.alert("no selection");
		return;
	}
	
	// Search the model template
	function getTemplate() {
		mt.search(function(list) {
			if (list && list.length>0)
				createModel(list[0]);
			else
				$ui.alert("no template");
		},{
			mtp_name: "DemoModel"
		});
	}
	// Create a new empty model
	function createModel(tpl) {
		mod.create(load, {
			row_id: "0",
			mod_name: 'Product-' + (new Date()).getTime(),
			mod_template_id: tpl.row_id
		});
	}
	function load() {
		modelId = mod.item.row_id;
		// Load SVG engine
		$ui.loadDiagramEngine(true, function() {
			// Load empty SVG file in object
			mod.get(function() {
				// instanciate in silent mode
				$ui.diagram.open(modelId, { svg:true, hidden:true }, build);
			}, modelId, {
				inlineDocs: true
			});
		});
	}
	// Insert objects in diagram
	function build(d) {
		diagram = d;
		var list = [];
		$(ids).each(function(i,id) {
			list.push({
				object: "DemoProduct", // node object
				id: id, // node row_id
				template: "DemoModel_Product", // node template name
				x: i*30 + 30, // dummy position
				y: i*70 + 30,
				container: null // no container
			});
		});
		// async loading with up-to-date data
		diagram.insertNodes(list, function(nodes) {
			// auto load sibling nodes thru links
			diagram.fetchRelatedNodes(nodes, save);
		});
	}
	function save() {
		diagram.save(function() {
			// Close hidden model
			diagram.close(false);
			// Re-open in a window
			$ui.displayModeler(null, modelId, { svg:true, docked:false });
		}, true); // silent
	}
	getTemplate();
}
  • Ensuite il suffit de sélectionner des produits et de cliquer sur l’action pour :
    • construire un nouveau model
      • lui insérer les objets séléctionnés
      • puis ajouter les objets relatifs (les commandes + clients) liés aux produits insérés
      • Enregistrer et fermer le model
    • réouvrir le model créé dans une fenêtre.

Attention tous les traitements sont asynchrones, donc il est important de bien chainer les callbacks de chaque méthode.