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

#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?