Error handling with Telerik / openedge REST backend

Posted by papersoft on 19-Mar-2015 11:15

We've just begun to experiment with the Telerik UI connected to REST services on an appserver.  Almost every piece of the technology and terminology in this stack is new to me.  I have 17 years experience with ABL code, but every bit of that is in a character environment based on code that still runs against a version 9 database.  

For this experiment, I have a very simple template setup Business Entity with CRUD support.  My objective is to return and display (via JS alert) an application generated error message.  I'm currently using this mechanism on my appserver to cancel the transaction and return an error:

...UNDO, THROW NEW Progress.Lang.AppError("Department " + ttDepartment.DepartmentID + " already exists.").

Is this the way to handle application errors?  If so, how do I access the error text on the Telerik UI side?

Posted by egarcia on 20-Mar-2015 13:25

Hello,

I am glad to help on this.

The example that you are using is somewhat similar to the example KendoUIGridCRUD.html in the examples for the white paper.

The difference is than instead of having the code in "jsdoTransport.js", the transport code is in the "kendo.data.jsdo.js" file.

The change that you need to do is to update the code for onAfterSaveChanges to use request.batch.operations.

The change would look like the following:

	jsdo.onAfterSaveChanges = function onAfterSaveChanges(jsdo, success, request) {
		var data;
		var record;
		if (success) {
			if (jsdo._callbacks._id) {
				record = jsdo.findById(jsdo._callbacks._id);
				if (record)
					data = record.data;
			}
			jsdo._callbacks.success(data);
		}
        else {
            var xhr, status, exception;
            
            if (request.batch
                && request.batch.operations instanceof Array
                && request.batch.operations.length == 1) {
                    xhr = request.batch.operations[0].xhr;
                    status = request.batch.operations[0].xhr.status;
                    exception = request.batch.operations[0].exception;
                }
            jsdo._callbacks.error(xhr, status, exception);                
        }        
	};	


Please give it and try and let me know how it goes.

I hope this helps.

Posted by egarcia on 20-Mar-2015 13:43

You also need to change the code in the HTML file (kendoui-jsdo-CRUD.html).
It would look like the following code:

var dataSource = { type: "jsdo", transport: { jsdo: { serviceURI: "http://oemobiledemo.progress.com/CustomerService", catalogURI: "http://oemobiledemo.progress.com/CustomerService/static/mobile/CustomerService.json", resourceName: "Customer", autoSync: false, filter: "" } }, error: function(e) { var obj, error = ""; console.log('Error: ', e); if (e.xhr && e.xhr.response) { try { obj = JSON.parse(e.xhr.response); if (obj._retVal) { error = obj._retVal; } alert("Error returned from server: " + error); } catch(e) { alert("Error returned from server: " + xhr.response); } } } };



Please let me know if you get the value.

Thanks.

All Replies

Posted by egarcia on 20-Mar-2015 10:14

Hello,

Yes, your approach is correct.

You can also use RETURN ERROR from one of the methods an it would return the message text as well.

The examples in the white paper show how you could do use the JSDO with Kendo UI in your application today.

We are working on an integrated component that you would be able to use without having to write most of this code yourself.

The general idea to get this error on the Kendo UI side in JavaScript is by using the support provided by the Kendo UI DataSource.

The code in the example (jsdoTransport.js) has a call to the options.error() method using the information returned by the CRUD operation called by the JSDO.

The object returned via the options.error() method then is available to the error method in the DataSource. This is in the KendoUIGridCRUD.html example. In the example, the code is writing the exception to the console.

I noticed that the call to the options.error() method when performing a create, update or delete is incorrect (CUD operation).

The call is trying to access request.xhr to get the status and if defined an exception object.

The issue though is that when performing a CUD operation, the requests are grouped into a batch property.

Your code would need to access the following properties:

request.batch.operations[0].response (this response object contains the AppError as a JavaScript object)

also

request.batch.operations[0].xhr.status

request.batch.operations[0].xhr.response

I will update the examples to include this new code:

https://community.progress.com/community_groups/openedge_development/m/documents/1502.aspx

Here are some links to the documentation:

documentation.progress.com/.../openedge115

documentation.progress.com/.../openedge115

This example has code processing errors returned using an AfterCreate event. Please notice that code in the white paper use the AfterSave changes event and you would need to use access the batch object first.

documentation.progress.com/.../openedge115

Please let me know if you have questions.

Thank you and regards.

Posted by egarcia on 20-Mar-2015 10:47

Hello,

I want to let you know that I have updated the examples for the white paper:

community.progress.com/.../1502.aspx

In this version, you will see the code where options.error() in jsdoTransport.js returns the xhr object to the Kendo UI DataSource. The code in KendoUIGridCRUD.html now uses an alert-box in the error function of the datasource to show error messages returned from the server.

Thanks.

Posted by papersoft on 20-Mar-2015 12:57

This is the dataSource definition I was given...  The error function is what I added in an attempt to access the error.  Can you help me make the connection between the example that I was given and the changes that are needed?

var dataSource = {

type: "jsdo",

transport: {

jsdo: {

serviceURI: "http://localhost:8810/paper",

catalogURI: "http://localhost:8810/paper/static/mobile/paperService.json",

resourceName: "Department",

autoSync: false,

filter: ""

}

}

,

error: function(e) {

console.log(e._retVal);

alert(e._retVal);

}

,

schema: {

model: {

id: "DepartmentID",

fields: {

DepartmentID: {

editable: true,

nullable: false,

validation: {

required: true

}

},

Description: {

editable: true,

nullable: false,

validation: {

required: true

}

},

Active: {

editable: true,

nullable: false,

defaultValue: true,

type: "boolean",

validation: {

required: true

}

}

}

}

}

};

Posted by egarcia on 20-Mar-2015 13:25

Hello,

I am glad to help on this.

The example that you are using is somewhat similar to the example KendoUIGridCRUD.html in the examples for the white paper.

The difference is than instead of having the code in "jsdoTransport.js", the transport code is in the "kendo.data.jsdo.js" file.

The change that you need to do is to update the code for onAfterSaveChanges to use request.batch.operations.

The change would look like the following:

	jsdo.onAfterSaveChanges = function onAfterSaveChanges(jsdo, success, request) {
		var data;
		var record;
		if (success) {
			if (jsdo._callbacks._id) {
				record = jsdo.findById(jsdo._callbacks._id);
				if (record)
					data = record.data;
			}
			jsdo._callbacks.success(data);
		}
        else {
            var xhr, status, exception;
            
            if (request.batch
                && request.batch.operations instanceof Array
                && request.batch.operations.length == 1) {
                    xhr = request.batch.operations[0].xhr;
                    status = request.batch.operations[0].xhr.status;
                    exception = request.batch.operations[0].exception;
                }
            jsdo._callbacks.error(xhr, status, exception);                
        }        
	};	


Please give it and try and let me know how it goes.

I hope this helps.

Posted by papersoft on 20-Mar-2015 13:36

Do I need to change anything other than the jsdo.onAfterSaveChanges?  This change does not appear to have any impact.

Posted by papersoft on 20-Mar-2015 13:40

I found the change I overlooked, and my example is working now!  Thanks for your help.  Is changing the kendo.data.jsdo.js file safe / update proof?

Posted by egarcia on 20-Mar-2015 13:43

You also need to change the code in the HTML file (kendoui-jsdo-CRUD.html).
It would look like the following code:

var dataSource = { type: "jsdo", transport: { jsdo: { serviceURI: "http://oemobiledemo.progress.com/CustomerService", catalogURI: "http://oemobiledemo.progress.com/CustomerService/static/mobile/CustomerService.json", resourceName: "Customer", autoSync: false, filter: "" } }, error: function(e) { var obj, error = ""; console.log('Error: ', e); if (e.xhr && e.xhr.response) { try { obj = JSON.parse(e.xhr.response); if (obj._retVal) { error = obj._retVal; } alert("Error returned from server: " + error); } catch(e) { alert("Error returned from server: " + xhr.response); } } } };



Please let me know if you get the value.

Thanks.

Posted by egarcia on 20-Mar-2015 13:52

Great.

You are welcome.

The "kendo.data.jsdo.js" file that you have is from a very early sample.

It is ok for you to change it since it is your own copy.

In general, you should be able to use the version of integration code once it is released with having to modify your code much.

However, there are few things that have changed since then. For example, the "filter" parameter in your HTML example is now done in a different way.

Thanks.

Posted by papersoft on 20-Mar-2015 16:05

Is there a one-stop place for me to keep on top of changes like this?  It's unclear to me what pieces of the puzzle are openedge pieces and what pieces are telerik pieces.  I'm not sure what you mean by integration code, but it sounds like something that I need to understand.

Posted by egarcia on 23-Mar-2015 06:04

Hello,

The JSDO component (part of OpenEdge Mobile) can be used to access OpenEdge Mobile Services.

This architecture can be used not just for Mobile apps but also for Web apps.

On a client using HTML/JavaScript/CSS, you can use Kendo UI (Telerik) which is a framework with a large number of UI widgets and also includes a DataSource object (Kendo UI DataSource).

Based on the flexibility of these components, you can use the JSDO with Kendo UI to access the OpenEdge backend today.

You can use the approach described in the following white paper and examples (this approach is similar to the examples that you have been using):

   community.progress.com/.../1655.aspx

   community.progress.com/.../1502.aspx

We are working on a new component that that integrates the JSDO with the Kendo UI DataSource and makes the interaction even better.

There is an ESAP (Early Software Access Program) forum for the JSDO. Please let me know if you are interested and I can send you the details on how to join.

Thank you and regards.

Posted by papersoft on 23-Mar-2015 08:52

I believe I would like to have access to the ESAP, at least for now.  

Posted by egarcia on 23-Mar-2015 09:27

Hello,

Thank you for your interest on the ESAP for the JSDO.

I have sent you an email with the detail on how to join.

Best regards.

This thread is closed