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

Developers Modeler
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

1 Like
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.