First impressions on OpenUI5

Working at Netlife has its perks even if we take away the awesome team and the cool projects. We are always reminded to push ourselves beyond our limits and learn new ideas and technologies.Last week I had the time to try out the newest SAP venture into modern web development: OpenUI5. Accompanied by our intern Dávid Tóth, we dove into the mysterious world of this MVP  HTML5 framework.

Productivity++

The first thing that we noticed is the ‘P’ is very different from the ‘C’ or ‘VM’ that we had worked with in other frameworks. The main strength that I see in this framework, that the presentation is completely cut off from the model, we just need to create pseudo-HTML elements in Javascript and the built-in theming take care of the rest. Despite the hard to understand and deficient documentation, we could create a functional mobile and desktop-friendly contact list application in just two hours!

The result:

Such a beautiful app from so few lines!
To take an excerpt from the source, this is all we need to create the table object:

var oTable = new sap.ui.table.Table( "ID_BusinessPartnerTable", { visibleRowCount : 20 }); 

The content is brought in via an oData service in an elegant way, and again, we don’t need to think about the presentation of the table, just put the data to the right place.

Integration with other tools

I use Yeoman extensively in my day-to-day work and I was pleased to find a good generator for this newcomer framework.
Because of this, Grunt and Bower integrate with the framework flawlessly and there is no overhead to manage dependencies.

Conclusion

All-in-all, we will continue to play with this new way of approaching enterprise problems, even if it has some issues on the support side of things. The next step is to integrate this with our test SAP server and create a full-fledged application!

 

Posted in Uncategorized | Leave a comment

Breaking news: Netlife at the Hungarian Dancing Sport Championship!

Last weekend, Netlife was represented as a main sponsor of the Hungarian Dancing Sport Championship!

http://tancsportmb-com.webs.com/

Posted in Uncategorized | Leave a comment

New horizons for Firefox OS

New horizons for Firefox OS

Since I joined Netlife, I tackled many interesting problems and completed several projects, but none of them were as astounding and revolutinary as Firefox OS application development. You may know that we’re developing a CRM solution for small businesses, called BeeCRM. When I got to know of the system, I’ve seen a possible use case for mobile users: Having an easily accessible interface to call/message customers with every relevant information displayed in front of them, like meetings/tasks and prior events, seemed invaluable. Me being mainly a web developer, I welcomed Firefox OS with open arms because I knew Javascript much better than Java or Objective-C, and needed rapid prototyping, while realizing all of the features that were needed to the initial 1.0 version that would be later ported to the more popular platforms.

I was very happy with the fast (nearly non-existent) learning curve:

I could push my application with ease to our phone, while developing in my well-known, productive environment. I think this is the main selling point of FFOS: making a plaftorm accessible to millions of web developers around the world. So I made a JSON REST API in Go to our database with goweb. On the client-side I used plain old jQuery + knockout.js. This was my first experience with Knockout, and it really peaked my interest in MV* frameworks. But there were some problems, that frustrated me to no end while developing:

  • Offline Storage. MDN mentions IndexedDB and localStorage. IndexedDB is complicated beyond human understanding if you don’t use a full-fledged storage library. In contrast localStorage has a very nice interface, the downside is, it’s synchronous and it can only store string objects (there are JSON hacks of course, but we don’t do “hacks” at this company ;) ). After half a week I found asyncStorage, which was nearly identitical to what I developed until then, to ease my frustration. This should be promoted as the #1 offline storage solution, because it wraps the aforementioned IndexedDB in the localStorage interface, just asynchronically and it can also store any kind of JS objects. Neat!
  • Too much restriction. I think the WebAPI limits the developers too much in the protection of the user. I know after recent events this sounds reasonable, but when I can’t determine from a call launched from my app if it’s finished or the duration of it… It frustates me to no end. The devs at Mozilla are working on this, but I can’t even imagine why this hasn’t been implemented in the first place. Automatic logging of calls are a no-no for now.
  • Breaking HTML standards. Building Blocks features multiple best-practices and code samples to achieve native looking effects in your own apps. These “samples” are done in deeply nested HTML tags with non-standard attributes. (Abusing the “role” attr this way is against every HTML standard I know!) Also CSS styles rely on eachother too much and on this abomination of a structure.

Otherwise my experience has been great. When Android was this old it was much-much worse in UI and UX terms, so props to all the great work for every contributor on the project! Of course the OS and the WebAPI ecosystem needs to mature, but we’re working on it with the awesome Mozilla team. I’m looking forward watching the wave of the Web Dev Community making the cheap chinese Android knock-offs fall!

Posted in Programming | Leave a comment

Dymanically sized spans for bootstrap

http://padam87.github.io/bootstrap-dynamicSpan/

Posted in Uncategorized | Leave a comment

SAP CRM: SEPA is coming…

From 1 February 2014, there is a new European payment standard: Single Euro Payments Area (SEPA). SEPA is a European Union (EU) integration initiative in the area of payments that ensures that there is no difference between domestic and cross-border payments in the 32 participating European countries. 

As of February 2014 we will only be using IBAN instead of our traditional bank account number. The goal is to make it easier for organizations and consumers to make cross-border payments and to save costs.

SEPA currently consists of the 27 EU Member States plus Iceland, Norway, Liechtenstein, Switzerland and Monaco. 

Time is ticking….

Is your CRM system SEPA proof?

The introduction of SEPA has a lot of impact for organizations and the systems that contain payment transaction data (e.g. SAP ERP, CRM, HR, and payroll). Also web services, interfaces, forms etc. may be affected by the introduction of SEPA.

When you start with the implementation of SEPA, you will see that SAP is still working hard to fine tune the SEPA setup to meet all the SEPA requirements. New OSS notes regarding SEPA are released on a daily basis.

This blog will focus on how you can make your SAP CRM system SEPA proof. In the blog we have combined some of our findings and experiences of recent SEPA projects involving CRM 7.0 (or higher).

SEPA, we no longer need a bank account number

In SAP_ABA releases 7.1 and 7.0, new functionality is introduced to be able to handle IBAN without entering a Bank Account number. By activating the IBAN ONLY switch, the IBAN only Bank details can be maintained along with normal Bank details within the Business partner.

The IBAN ONLY option can be activated in SPRO via the path:

IMG -> Cross-Application Components -> SAP Business Partner -> Activation Switch for functions -> IBANONLY.

By default, the IBAN Only switch will not be set, implying that the default behaviour shall be that of normal Bank details as in the existing releases.

For more details see OSS note:

SAP Note 1031641 – Introducing IBAN ONLY functionality for Bank Details of BP

Because this functionality was not considered for the WEB UI you will have to implement:

SAP Note 1539788 – WEB UI: IBAN ONLY functionality w/o bank number not possible

NOTE: The IBAN ONLY option is currently only supported in the integration scenario CRM Business partner -> ECC Business partner. In the scenario CRM BP -> ECC customer you will run into replication issues and the IBAN is not replicated to ECC.

We are currently looking for a solution, together wit SAP, for the CRM BP -> ECC Customer scenario. I will post an update on this BLOG when the issue is solved.


BIC or no BIC that’s the question


IBAN with BIC

When you maintain the bank details on a business partner, the SWIFT-code (BIC) is  a mandatory field. When the bank master data is maintained correctly in transaction FI01 (table BNKA), the system will automatically derive the Bank Key and SWIFT-code from the entered IBAN number.

Via transaction BIC2 you can do a mass upload of bank master data. You can purchase files with BIC reference data at http://swiftref.swift.com/bank-data.

IBAN without BIC

One of our customers didn’t want to upload and maintain the bank master data for 32 EER countries.  Since the SWIFT-code (BIC) is a mandatory field, the field can’t be left empty. SAP provides a work around solution to be able to use IBAN without BIC/SWIFT.

By implementing the following notes a new customizing transaction is introduced in CRM (or ECC) that enables you to enter IBAN’s with a dummy BIC code.

OSS Notes:

SAP Note 1726191 – SEPA country settings

SAP Note 1766385 – Basic function: IBAN without BIC

After implementing the ABAP coding from the notes you have to create a fictitious internal bank using the new transaction FISEPA. It is sufficient to create one internal bank per country.

For example:

Bank country: FR

Bank key: SEPA

Name of the bank: SEPA

Then you can activate the indicator “IBAN w/o BIC” for country XX in transaction OY13.

Now when you enter an IBAN for country FR, the system will automatically fill the Bank Key with SEPA.

NOTE: In case of integration with ECC you will need to repeat the above steps in your ECC system.


Mandates in CRM?

In our current projects the mandates are maintained in ECC and will not be replicated to CRM but in case you want to setup the integration of mandates in CRM you can take a look at OSS Note:

SAP Note 1749231 – SEPA mandate: Basis for CRM/BP

IBAN replication to ECC

When the option IBAN ONLY is not activated (see OSS Note 1031641 for more info) in your system, the IBAN’s will be stored in the table TIBAN. This table is not part of the BDOC synchronization with ECC. So if you maintain an IBAN for a Business partner, the IBAN will not be visible on ECC side.

In this scenario the IBANs will be replicated via IDOCS (don’t ask me why).  The following note describes the required settings to setup IDOC replication:

SAP Note 1097088 – Using ALE to distribute the IBAN: Documentation

Also for the replication of the bank master data you can use IDOC’s. In that case you can follow the steps described in the above note but this time use object type BANK.


Additional notes which can be helpful

The following OSS note gives an overview of the recommended settings for countries in which the IBAN is already used:

SAP Note 1012293 – IBAN and maintenance of bank master data

To improve the search on bank details you can implement the following SAP Notes:

SAP Note 1481198 – Search accounts by bank detail

SAP Note 1507448 – Performance issue on bank key search help

Are you ready to start with SEPA?

I hope that we have given you some input to make your CRM system SEPA proof.  This blog only covers SAP CRM but don’t underestimate the impact of SEPA on your IT landscape. The deadline is 1 February 2014 so start now!

With the SEPA changeover you will also have to convert the bank account numbers to IBAN numbers (and BIC) in the SAP master data. SAP has provided a migration program to support this IBAN conversion.

Source: http://blog.acorel.nl/

Posted in Uncategorized | Leave a comment

Airplanes, Rovers and K.I.T.T.

The X. Simonyi Konferencia (10th Simonyi Conference), named after Karoly Simonyi was held at Budapest University of Technology and Economics last Tuesday. I was there, attending various presentations, and I’d like to share some of the things I’ve learned. Continue reading

Posted in Uncategorized | Tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , | Comments Off

Introducing jQuery SmartSearch

Hey guys!

This week I was working on our latest CRM application, and I was really dissatisfied with the searching component, mainly the UI of the search form.

We had a huge form, with ~20 inputs, including selects. That left us with no choice but to hide the search form initially, and only show it after the user clicked on a button, and even after that, it was very hard to use, the fields were in bad order, the form filled the whole screen, and all the major UX problems you can expect with a large search form have occurred at some capacity.

After some time trying to fix the issues, I’ve decided to scrap the whole thing, and go with a new approach. I always liked the way Google Drive let’s you search, so I have decided to try to make something similar.

Hopefully you will like the result as much as I do. :)
Here you go:

http://padam87.github.com/jquery-smartSearch/

As always, contributions are more than welcome.

Sidenote

Also, being a backend developer mainly, it was my first time to write a full-on jQuery extension. I was plesently surprised, because it went so smoothly, but nevertheless it was a great learning experience. I encourage everyone to try it some time, just for the fun of it ;)

Posted in Programming | Tagged , , , | Comments Off

Javascript: a right way

Backend developers – including me – tend to underestimate the importance of javascript, or somethimes even say things like:

Who cares about js? It’s like two lines anyway.

Some people say javascript is just unmaintainable, forget about it, and learn CoffeeScript… or TypeScript or whatever is the most popular library / language that week. I’m not saying that is the wrong approach, but on the other hand I’m not comfortable with a language that compiles to javascript, the very thing it tries to replace. I guess I’m not a glass half full kind of guy.

In my opinion, it is up to us, developers to create good code, not the language itself.

So what can we do to get better code, better results?

Do it right

Hurrying is the root of the problem. We pay a lot of attention to the backend part, why should we get lazy when it comes to the frontend? Unfortunately it happens often. Yes, it can be done fast, but those few minutes that can be shaved off will come back to bite us later.

Spend some more time for each task that requires js, and do it right.

Limit the number of inline scripts

Inline scripts make maintainance nearly impossible, and there is no real reason to do it.

For example, declaring variables is a common usage of inline javascript.

<script> var url = <?php echo $url; ?>; </script> 

Use the HTML custom data attributes instead:

<div id="listContainer" data-url="<?php echo $url; ?>"> 

.js file using jQuery:

var url = $("#listContainer").attr('data-url'); // or .data('url'); 

This way, you have a better picture of the origins of the data, and you know exactly which dom element is going to need that data.

OO

Athough javascript does not have the best OO solution, you have options to create objects and keep your code separated.

My favourite is to create object literals, and use them like singletons, like so:

List = {
    goToPage: function(page) {
        $.get($("#listContainer").data('url') + '/' + page, function(data) {
            $("#listContainer").html(data);
        })
    },

    ...
}

Dependency Injection

10 milligrams of EntityManager, STAT!

 

Wait, what? You must think that this guy is a Symfony2 dev gone crazy… well you are right! Don’t worry, I’m not suggesting anything serious.
Most javascript functions depend on dom elements, or selectors for dom elements. Therefore reusability is limited. The above mentioned List object would fail us, if we had two or more lists on the page.

Let’s modify our code, and inject the dependency:

List = {
    goToPage: function(page, $container) {
        $.get($container.data('url') + '/' + page, function(data) {
            $container.html(data);
        })
    },

    ...
}

If you are working with object constructors, and instanciate objects, you can inject the dependencies in the constructor.

Note: The $container is not a mistake, it’s a common naming convention in jquery, it means the variable is jquery object. (Hungarian notation)

Model-View-View Model (MVVM)


Following the above mentioned rules will get us halfway there. We have a maintainable, scaleable code, but we still have to do a lot of work on the frontend, and in fact we got even slower than before, because of the rules. Clients will not like that.

MVVM is a great pattern, it can make the development process much faster. Every serious web application should consider using it.

This being a common problem, you don’t have to re-invent the wheel, there are many awesome libraries which you can use.

My personal favourites are AngularJS and KnockoutJS. They both have great tutorials, including videos, and the learning curve is virtually non-existent: you can start using them after a 20 minute video!

 

 

Posted in Programming | Tagged , , | Comments Off

Netlife Knowledge Center

At Netlife we are fond of learning, improving ourselves whenever we get a chance. We also believe that sharing and giving back is indispensable and a responsibility. That’s why we started a new project.

Netlife Knowledge Center is our new project where we go public with our inside training and personal development sessions. These training,  workshops and presentations are available for our partners and close friends but if you are interested contact us and we will invite you for the next event of Netlife Knowledge Center. Past event were about topics from Android application development to the logic of webshops and presentation techniques.

We are happy to invite you to our first symposium held by Michael Fuchs. You can register HERE.

 

Posted in Uncategorized | Comments Off