Creating virtual fields using Client Class in the Openbravo ERP Platform

Client class is one among the options available to show a virtual field in the Openbravo ERP Platform. A Virtual Field is a field which does not have a column in the backend, so its value cannot be stored. The uses of a virtual field in an ERP application are numerous. You may want to highlight a particular record in the grid if, say, a payment is pending from the Customer for a long time. If you just want to compute a collection and show the summation or if you just want to show a related information like a customer’s credit balance when showing the customer when creating Sales Invoices. There are many ways to create virtual columns in the Openbravo ERP Platform.

  1. Client Class
  2. Computed Column
  3. Property Fields

In this post, we will see how to use Client Class to define a virtual field. The basic concept when using client class is that we will attach a Smartclient class to a field and in this Smartclient class we will define the properties of the field. Let’s see this through a simple use case.

Use Case: Highlight records in Sales Invoice where Total Outstanding is greater than zero.
Note: The example provided here is available as a module here.

Definition: Here is the screenshot of the definition of the new virtual field in the Field tab in Windows tabs and fields.

Client Class Definition

Code:  If you see the screenshot above, in the client class we have defined a class called ClientClassExample_Field. Now we will define this class in a javascript file in our module. In the example module provided, it is available in com.kailao.examples/web/com.kailao.examples/js/clientClassExample.js file.

isc.defineClass('ClientClassExample_Field', isc.Label);

 height: 1,
 width: 100,
 initWidget: function () {
 if (this.record && this.record.dueAmount) {
 return this.Super('initWidget', arguments);

createField: function (dueAmount) {
 var backgroundColor,
 text, align = 'center';
 if(!isNaN(dueAmount) && parseFloat(dueAmount) > 0 ){
 backgroundColor = '#FF0000';

First, we define a class inheriting the type isc.Label which displays text as a Label.
Next we set the properties for the field. The height and width are basic properties. For more properties visit the Smartclient documentation.

The initWidget method is called up, every time the field is drawn, like when the grid is first opened, when switching between form and grid view, etc. So just be careful not to add more computing logic here as it may slow down the grid loading process.
In the createField method, we check whether the dueAmount field (Total Outstanding) value is greater than zero. If this is the case, we set the background colour of the field to Red.

The next step is to add this resource to the existing smart client code. We do that by extending the BaseComponentProvider class. In the example module, this is available in src/com/kailao/examples/KailaoComponentProvider.java file. The main code here is in the method getGlobalComponentResources method that we have to override.

globalResources.add(createStaticResource((prefix + resource + “.js”), true, true));

Compile the application and rebuild tomcat.


highlighting the records

Our purpose of highlighting the records where payments are due is complete. Another similar example is available in the Open/Close period control window. But I thought it would be good to show-case the code from the external module, so that it is easier for the developers to follow the same rule.

If you have any doubts, let us know in the comments.

Previous post

Dissecting and Customizing the Toolbar Component in Openbravo ERP

Next post

How to locate a performance problem with AppDynamics


  1. Subramaniam
    April 7, 2015 at 2:56 PM

    Is it possible to change the color of the fields name alone(not the whole background of field), based on the value entered into it.

  2. Shankar Balachandran
    April 8, 2015 at 8:14 AM

    You can change the colour of the text in the value of the field. Let’s take the example that I have provided in the blog. If we set the value of the Priority column to any text, then that text colour can be customized.

  3. Subramaniam
    April 8, 2015 at 9:01 AM

    thank you sir. Its working and clear for me now.

  4. […] our previous blog post, we looked at how to create virtual columns using Client Class. In this one, we will see how to […]

  5. […] an additional field. In our earlier blogs, we saw how to create virtual fields using Client Class (here) and using Property Fields (here). In this blog, we will see one more variety that can be used to […]

Leave a reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>