Category Archives: ERP

Knockout JS, complex form and asp.net mvc

It is not a week I have got familiar with Knockout.js. First of all let me tell you that currentlyI spend most of my time developing a web application connected to abas ERP system using a java based web service. The web application is an asp.net mvc app, and to make it more like to abas windows client, I am trying my best, and as you know, to make a web app more usable, you HAVE TO use javascript, but use it with caution. Thanks to js libraries developed in last few years, writing a clean and maintainable js code has been more simple than before.

Ok telling story is enough. In my web app, for the first time I decided to use a MVVM js library!. In this phase I have to create a payment form which includes card lines as it items. So to make it easier for user to add items to payment, this time I used knockout to bind invoice items, which are editable. In the past I manually added line item to table and handling edition to any part of line item was a headache, because reflecting the changes made to table containing the items was a lot of hard code.

I am not going to describe the whole solution here, mainly I am going to tell you how to add this line items values to form, to have them as a list in server side (Here server side code is asp.net mvc). Before reading the rest of this article, I recommend reading this tutorial from knockoutjs.

Say our payment model is like below:

public class PayemntModel
{
public string Name{get;set;}
public List Items{get;set;}
}
public class Card
{
public decimal Amount{get;set;}
//... other properties
}

and this is our form handler in server side:

[HttpPost]
public ActionResult Form(PayemntModel model)
{
// handle the data
}

and lets go to client side.

In your clients side code, having form field for “Name” property is easy :

<input type="text" id="Name" name="Name">

but for your card list, can not have something like this:

//first item
<input type="text" id="Amount" value="5600" name="Amount">
//second item
<input type="text" id="Amount" value="2300" name="Amount">

why? first of all modelbinding in mvc side cant detect your list, and also if it find, it can not distingush first item from second.

So every line should have an index and also a unique Id, something like this:

<div data-bind="foreach: Cards">
<input type="hidden" name="Cards.index" value="0">
<inpu value="5600" id="Cards_0__Amount" name="Cards[0].Amount"><input type="hidden" name="Cards.index" value="1">
<inpu value="2300" id="Cards_1__Amount" name="Cards[1].Amount">
</div>

How you achieve this with knockout?! after some googling I found that you can easily change attributes of an HTML tag.!!

Here how it is done :

<div data-bind="foreach: Cards">
<input type="hidden" name="Cards.index" data-bind="value: $index()">
<input data-bind="value: Amount,attr: {'id': 'Cards_' + $index() + '__Amount','name':'Cards['+$index()+'].Amount'}" type="hidden">
</div>

you can use $index() to easily separate item lines and give them unique id. It is a function in knockout that return index of each item in an observablearray.

Thats it!

 

Enabling CORS on tomcat

Long time no post!

Hi

As i have already told, our Dynamic CRM Customizations deals with ABAS ERP software.

To respond some requirements of Service Processing subsystem, in a CASE form we want a button that by clicking on, product information get loaded to the form. User inputs a serial number, and by that SN, a request made to ERP server and products information get back as response.

ABAS ERP developing team already developed a SOAP web service which sync customer data between ERP and CRM. It works fine when it used as a service reference int a CRM plugin. But when it comes to use web service in a html client using Java Script, story changes. First of all I had to find a JS lib to parse SOAP messages. It was easy, I googled and found javascriptsoapclient. But as the origin of CRM and web service host are different, browser does not allow js to request the web service and throws “Access-Control-Allow-Origin” error.

I am new to Java developed web services and also to apache tomcat web. If it was a .net web service, I could solve problem by adding required headers. But the web service is a Java project and developed using Eclipse IDE. After a lots of research I found that I cand add CORS (Cross Origin resource sharing) to tomcat, but for versions higher than 7.0.41 !

I installed latest version and read lots of documents and questions around web. In official docs of tomcat, it says by adding some xml tags you can enable CORS for entire apps hosted in tomcat. As it seems it is not actually that easy.

What I had to do? I had to download two libraries mentioned in this  guideline and them to lib folder of tomcat. It is the best solution, but in addition to add those libraries to the lib folder of tomcat, you also  have to add them to lib folder of the application you want to have CORS enabled.

Regards.