Skip to Content

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.

/wp-content/uploads/2013/12/here_is_some_text_both_343144.gif

Let’s look a bit behind the scenes at how to code them. First in UI5 based on the OpenUI5 sap sdk example:/wp-content/uploads/2013/12/1_343160.png

Something similar in Angular can be done directly in the html:

/wp-content/uploads/2013/12/2_343162.png

There are similar templating options in OpenUI5 so we can do something almost the same without livebinding by using handlebars:

/wp-content/uploads/2013/12/handlebars_345503.png

Along with just a bit of model binding in javascript (see the live examples).

/wp-content/uploads/2013/12/handlebars_js_345504.png

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:

/wp-content/uploads/2013/12/3_343163.png

to produce an OpenUI5 datepicker and then just use the curly braces to show the information somewhere else:

/wp-content/uploads/2013/12/datepicker_343164.png

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:

/wp-content/uploads/2013/12/4_343165.png

Then we create an Angular directive and initialize the datepicker. The main steps are:

  1. Angular setup to tell it to link to an element and use the model passed into the element
  2. Setup the OpenUI5 datepicker and initialize with the model and some attribute tags
  3. Setup the binding on the change of the datepicker
  4. Setup the binding on the Angular change of a model

/wp-content/uploads/2013/12/5_343169.png

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.

/wp-content/uploads/2013/12/6_343170.png

This will give us:

/wp-content/uploads/2013/12/datepicker_example_343171.gif

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!

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Danielle Davis

    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.

    (0) 
    1. Alex Chan Post author

      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

      (0) 
    1. Alex Chan Post author

      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

      (0) 
  2. Shaun Enslin

    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?

    (0) 
    1. Alex Chan Post author

      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

      (0) 

Leave a Reply