SAPUI5 has just been open sourced as OpenUI5 and provides a lot of features. AngularJS is a great javascript library that can also add a lot of power to your application.
Let’s compare some of the features of the two frameworks. Here’s two input fields beside some text. They both look similar.
Let’s look a bit behind the scenes at how to code them. First in UI5 based on the OpenUI5 sap sdk example:
Something similar in Angular can be done directly in the html:
There are similar templating options in OpenUI5 so we can do something almost the same without livebinding by using handlebars:
Along with just a bit of model binding in javascript (see the live examples).
Wouldn’t it be nice if we could use Angular model binding with OpenUI5 controls? What if we could also include OpenUI5 controls such as the datepicker directly in our html using some custom tags?
Imagine we could type the following:
to produce an OpenUI5 datepicker and then just use the curly braces to show the information somewhere else:
Angular can help us do this with its concept of directives. Directives are a way to extend html new tricks and is also how we can use Angular models to bind data. Once we have the directive we can re-use it very easily in our html.
First is the Angular controller. In the controller the model is plain old javascript:
Then we create an Angular directive and initialize the datepicker. The main steps are:
- Angular setup to tell it to link to an element and use the model passed into the element
- Setup the OpenUI5 datepicker and initialize with the model and some attribute tags
- Setup the binding on the change of the datepicker
- Setup the binding on the Angular change of a model
All that’s left is to add the datepicker to our html. We’ve even added a custom attribute to set the locale as shown for the start date.
This will give us:
Checkout the live example on jsbin. In the jsbin example I’ve also added a filter to format the date. Be sure to open in Chrome or Firefox since the cdn version of OpenUI5 doesn’t work well with IE.
While there is a bit of code for the setup of the control and the directive, we gain some nice things:
- the controller doesn’t need to know about the ids of the html. Placeat is done with a tag. Wherever the tag is placed, the new control is created.
- binding can be done in the html view just by having the same ng-model
I hope this shows some ways that Angular can be used along with OpenUI5. Now you don’t have to choose between the two, you can use both!
great post, very helpful. Have you tried to create a directive for any of the openUI5 layouts, like a MatrixLayout? This has been my biggest struggle with this approach.
Hello Danielle,
I haven’t really pushed this integration to it’s limits, as I was just testing to see what could be done with both.
I haven’t looked under the hood of layouts but I could see there being challenges. In the end it’s most likely best to use this method only for simple ui components as the layouts probably make larger changes to the dom and in those cases perhaps in the end you have to choose sap’s bindings and framework only, or angular and another ui set (bootstrap/jquery). I have wondered how well ui5 html views would also work with angular but I haven’t tested this yet either.
Regards,
Alex
Hi,
even I am not able to get through the mobile shell/ layout with this approach!
Can you help us here?
im working actually on a openui angular port
When we use both, can we integrate Kapsel plugins(Cordova)?
Hello Ady,
I don’t have experience integrating with Kaspel plugins but if both ui5 and angular work then I guess that the plugins could work as well. Unfortunately only someone else who has experience or testing would tell you for sure.
Good Luck,
Alex
Hi Ady
This may be a bit late, but yes you can. We have been using kapsel plugins and since they cordova based, thus javascript, any javascript framework is fine.
Hi Alex
Have you gone any further on this?
Our stuff is all Angular/Bootstrap based is it worth trying to port over to get the Fiori look n feel?
Hello Shaun,
I haven’t gone any further with this integration and continued to work more with angular/bootstrap as well as I found it more flexible for my use cases.
It may be easier to get your css from UI5 than to work on porting if you only need the look and feel rather than trying to get UI5 to work the way you want or expect it to.
Regards,
Alex
It would be great using two powerful JS framework as OpenUI5 and AngularJS in combination. Although, they are hard to compare, as OpenUI5 was made with the purpose of building Enterprise level Business Applications. Still, they have some features in common. They both are easy to learn and use and they both can be used for PC as well as for mobile apps. Also, Angular brings server- side to client-side web application. Still, many programmers prefer UI5, because SAPUI5 has more controls, fitted to the use case of SAP.