How to render the modified XML which comes from Server on success of AJAX call?

#1

I am sending the XML generated by bpmn io to server through ajax call where certain modifications are done in XML (changing ID). I am getting the XML back to client side and I need to render the changed XML to modeller.

I have integrated the “dist” folder generated after grunt build to my web application. Please suggest where the changes are required in the code to render the changed XML

How to set the value of the property panel programmatically?
#2

Hi,

Just re-import new XML into existing modeler instance:

...
var newXml = responseFromAjaxCall;
modeler.importXML(newXml, function (err, warnings)  {
  // new XML loaded
});

Hope this helps.

Cheers,
Vladimir

#3

Thanks for the answer.

How to use the XML sent back by server to drag and drop more elements. I should retain the changes sent back from server and then append the dragged elements to the next XML generated ?

#4

As one way - you should re-import new XML every time server sends an updated version:

Or… create some sort of sync between client custom bpmn-js module that would understand server side amendments. This would be most of the work, but should allow to keep history.

Hope this helps.

Cheers,
Vladimir

#5

I am getting ‘modeler not defined’ exception while using the above code. Please suggest any solution

#6

modeler is a bpmn-js instance, e.g.:

var BpmnModeler = require('bpmn-js/lib/Modeler');

var canvas = document.querySelector('#canvas');

// Create new Modeler
var modeler = new BpmnModeler({
  container: canvas,
  keyboard: { bindTo: document }
});
#7

Is there any possibility to change the color of the element which XML has been modified and came back to client from server ?

#8

There is no limit to what you can do with it :wink:. It really depends on what you are looking for.
Check out this diffing project. Together with something like overlays or element colors it should be doable.

Cheers,
Vladimir

#9

Hi sorry for reviving this post.
I’m having a problem after the ajax postback using asp page.

On load I do this:

var BpmnModeler = window.BpmnJS;
var bpmnModeler = new BpmnModeler({
	container: '#canvas'
});

function importXML(xml) {

	bpmnModeler.importXML(xml, function (err) {

		if (err) {
			return console.error('could not import BPMN 2.0 diagram', err);
		}
		else {
			var canvas = bpmnModeler.get('canvas');
			canvas.zoom('fit-viewport');
		}
	});
}

It works great, but after i save (server side, to save on sql server) the diagram disappears.

function SaveXml(txt) {
	$.ajax({
		type: "POST",
		url: 'WFModeler.aspx/SaveXml',
		data: '{xml: ' + JSON.stringify(txt) + '}',
		contentType: "application/json; charset=utf-8",
		dataType: "json",
		success: function (response) {

			importXML(txt);
		},
		failure: function (response) {
			alert(response.d);
		},
		error: function (response) {
			alert(response.d);
		}
	});
};

Is there a way to reload the diagram?

#10

Please do not necrobump old topics. Instead link to this thread from new topic.

#11