#InnoJam Madrid @ #SAPTechEd – Develop like never before

After the great victory last year, I’m so happy to have attended the SAP InnoJam event in Madrid also this year.

Don’t you know what InnoJam is?

I suggest you to have a look to the wiki page to get more detail, but basically it is a innovation game where people, coming from different countries, join in different groups and in 30 hours no stop coding they try to solve thematic business cases using the latest SAP technologies such as SAP HANA, SAP NetWeaver Gateway, SUP 2.2, NetWeaver Cloud…

For me SAP InnoJam is one of the most valuable resource in the entire SAP TechEd week, you get in touch with your peers, that sometimes you know form the SCN Community or you’re never knew. You create a team combining different skills and expertise you try to create the most coolest application.

Each InnoJam has a theme, in Madrid it was Better Cities – Better Lives and we got 5 business cases:

  1. Pooling: Redesign the experience of cities and their inhabitants to setup and actively participate in polls.
  2. Education: Redesign the information and interaction experience for parents in the context of schools.
  3. Better my Journey. Redesign the service experience for commuters and city inhabitants in the context of getting around in the city.
  4. Free Parking ad-hoc. Redesign the service experience for visitors of the city or big events in the context of finding a parking lot.
  5. Neighborhood Care. Redesign the neighborhood experience for people in the context of helping each other.

photo 1.JPG

I chose to join the into the Education challenge and with my fellow SAP Mentor Fred Verheul, 3 SAP consultants and 1 SAP university student we formed theeKid team!

What we decided to build?

Most of the parents wants to know if their children are feeling good at school, if their mood is ok and also interact to teacher and other parents to help children to feel better at school/home. We created an application (eKid) that improves the interaction between the school/teacher and the parents; and we also had the opportunity to use some cool technologies such as: SAP HANA, SAP NetWeaver Cloud Portal and Windows Mobile 8.

This year, we didn’t start to code immediately, but we had the possibility to learn from SAP coach how to start using the Design Thinking!

I have to admit that I was really curious about, and now, I should say that Design Thinking is really something that helps developers (but not only, it covers the entire project phases) to create an application that fulfill customer needs.

If I look back to that hours collecting interviews, feedbacks, synthesizing information and prototyping solution I‘ll remember for sure the stickies.

This was our working area after few hours of design thinking  😀

photo 2-4.JPG

photo 2-3.JPG

And here we are, after creating a prototype we needed to start coding; some of us coded the entire night (I took 4 hours of sleep).

8175789598_399acf0233_b.jpg

Exactly at 3pm we finished our application and we were ready to get into the stage.

8179259687_ee691eee61_b.jpg

8179290648_1058e6205f_b.jpg

I’m really proud to receive from the Microsoft team their award, but more over they invited our team to present our application to the Microsoft Booth Camp at SAPphire! Is it cool?

8179254575_df141cc66d_b.jpg

photo 3.JPG

Finally I have to thank all the InnoJam Crew, Technical Experts and all the participants to transform this event in a great event.

Next year I’ll attend again the InnoJam, because you learn that you’ll develop like never before.

NOTE: After 30 hours, I’m still here at 1am writing this blog… This is the Power of sapteched  😉

abap2xlsx – half thousand of members and more…

In July 2010, I released the first version of the open source project abap2xlsx and it gets an incredible success from SDN members.

Today I would like to celebrate the overcoming of 500 members in SAP Code Exchange, thanks to Amarpreet Singh for being the 500th.

Time after time, more and more SDN community members joined into the project and improved its functionalities. There are a lot of great developers in SDN and as I always believed if some of them can join together can do incredible things.

I would like to give you some numbers:

  • more than 5000 donwloads in 2 year (without considering daily build)
  • more than 500 members
  • more than 250 workbench object
  • most popular project for 2 years in a row in Code Exchange

This is really incredible, it can be now considered as a real add-on for you SAP system and it would not possible without SAP Code Exchange contributors!

I would like you to know some of them and give them the deserved compliments.

What is planned in next releases?

  • Consolidate the code
  • Bugs fixing
  • Add unit tests in all the classes
  • Use Code Exchange /CEX/ namespace

So now, what are you waiting for? Join abap2xlsx project

Even if you are a young ABAPer you can join us, you have the possibility to learn ABAP-OO, Unit Tests, SAPLink and why not ABAP in Eclipse.

Consume NetWeaver Gateway services via SAPUI5 – Part 3

This is the last part of my trilogy (YES, finally I have a trilogy like Batman, Star Wars and Marty McFly ).

In part 1 and part 2 we saw how to consume Gateway services using SAPUI5 library, in this part I would like to focus on the advantage of using SAPUI5 combined with external javascript libraries.

We created an awesome UI using very few lines of HTML and Javascript, I repeat only HTML + JS…

So what does it mean? That we are absolutely free to change and customize our project also with external JS libraries for example.

This is the main advantage of SAPUI5!

So why not use the Google Maps API? We can display the flight trip in a maps inside our application.

Would it be simple?

Just a quick read to Google Direction Rendering documentation and we notice that it looks too simple 


index.html

First of all we need to import Google libraries in our project editing the head section of index.html file

<meta http-equiv="X-UA-Compatible" content="IE=edge">  

<!-- Begin GMaps -->   
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>  
<script type="text/javascript">  
          var geocoder;  
          var directionsDisplay;  
          var directionsService = new google.maps.DirectionsService();  
          var map;  
          function initialize() {  
                    directionsDisplay = new google.maps.DirectionsRenderer();  
                    var latlng = new google.maps.LatLng(-34.397, 150.644);  
                    var myOptions = {  
                              zoom : 15,  
                              center : latlng,  
                              mapTypeId : google.maps.MapTypeId.ROADMAP  
                    }  
                    map = new google.maps.Map($('#map_canvas').get(0), myOptions);  
                    directionsDisplay.setMap(map);  
          }  

          function calcRoute(departureCity,destinationCity) {  

                      var request = {  
                        origin:departureCity,  
                        destination:destinationCity,  
                        travelMode: google.maps.TravelMode.DRIVING  
                      };  
                      directionsService.route(request, function(result, status) {  
                        if (status == google.maps.DirectionsStatus.OK) {  
                          directionsDisplay.setDirections(result);  
                        }  
                      });  
          }  
</script>  
<!-- End GMaps -->   

<script src="./resources/sap-ui-core.js" type="text/javascript"  
  id="sap-ui-bootstrap"  
  data-sap-ui-libs="sap.ui.ux3, sap.ui.commons, sap.ui.table"  
  data-sap-ui-theme="sap_goldreflection">  
</script>

Function initialize just prepare our application to use GMaps library and identify the HTML block-content element with id “map-canvas” as container of the maps.

function initialize() {  
                    directionsDisplay = new google.maps.DirectionsRenderer();  
                    var latlng = new google.maps.LatLng(-34.397, 150.644);  
                    var myOptions = {  
                              zoom : 15,  
                              center : latlng,  
                              mapTypeId : google.maps.MapTypeId.ROADMAP  
                    }  
                    map = new google.maps.Map($('#map_canvas').get(0), myOptions);  
                    directionsDisplay.setMap(map);  
          }

Function calcRoute will be used to automatically change the maps based on the flight selected

function calcRoute(departureCity,destinationCity) {  

                      var request = {  
                        origin:departureCity,  
                        destination:destinationCity,  
                        travelMode: google.maps.TravelMode.DRIVING  
                      };  
                      directionsService.route(request, function(result, status) {  
                        if (status == google.maps.DirectionsStatus.OK) {  
                          directionsDisplay.setDirections(result);  
                        }  
                      });  
          }

index.html file is ready now let’s add some changes on our view file

retrieveFlight.view.js

First of all we need to create a Panel in our layout and the map_canvas HTML block element

var rTitle = new sap.ui.commons.Title('rTitle');     
          rTitle.setText('All - Flights');     
          rPannel.setTitle(rTitle);     

// GMaps start       
          var mapPannel = new sap.ui.commons.Panel('mapPanel');  

          mapPannel.addContent(new sap.ui.core.HTML(  
                                                  {  
                                                            content : "<div id='map_canvas' style='width: 100%; height: 400px;'></div>"  
                                                  }));  

        var mTitle = new sap.ui.commons.Title('mTitle');     
        mTitle.setText("Fligth Map");     
        mapPannel.setTitle(mTitle);  

// GMaps end    

var oTable = new sap.ui.table.DataTable();

In this example the maps will be refreshed each time a new flight will be selected, so in event “rowSelect” code we add few lines of code that retrieve the departure and destination city of the selected flight and invoke the method calcRouteadded in the previous step.

oTable.attachRowSelect(function(oEvent) {    

     var currentRowContext = oEvent.getParameter("rowContext");    
     var url = currentRowContext + "/FlightBookings";    
     oTitle.setText('Bookings');      
     bookingResultPanel.setTitle(oTitle);    
     rTable.setModel(oModel);     
     rTable.bindRows(url);    
     bookingResultPanel.addContent(rTable);     
     layout.createRow(bookingResultPanel);  

// GMaps start   

     var oFlightDetails = oModel.getProperty("FlightDetails", currentRowContext);   
     oFlightDetails['DepartureCity'];  
     oFlightDetails['DestinationCity'];  

     mTitle = mapPannel.getTitle();  
     mTitle.setText("From " + oFlightDetails['DepartureCity'] + " To " + oFlightDetails['DestinationCity']);     
     mapPannel.setTitle(mTitle);  

     initialize();  
     calcRoute(oFlightDetails['DepartureCity'],oFlightDetails['DestinationCity']);  
// GMaps end   

});

Final change, attach the map Panel to the main layout

rPannel.addContent(oTable);    
layout.createRow(rPannel);  

// GMap start  
layout.createRow(mapPannel);   
// GMap end   

this.addContent(layout);

Deploy and Execute

Now deploy on your HTTP Server and enjoy! Live demo is available here

Consume NetWeaver Gateway services via SAPUI5 – Part 2

In part 1 we created a simple example of SAPUI5 integration with gateway, in this blog we enhance the user interface leveraging on navigation property of oData.Just a short introduction to the Navigation Property from the official oData documentation: “A property of an Entry that represents a Link from the Entry to one or more related Entries. A Navigation Property is not a structural part of the Entry it belongs to.” (ref)What does it means basically? Having a look to our Gateway Service metadata, we can see that some of our entities are characterized by navigation properties tag elements, a Navigation Property describes the relation between different entities.

Continue reading “Consume NetWeaver Gateway services via SAPUI5 – Part 2”

Consume NetWeaver Gateway services via SAPUI5 – Part 1

At SAP Inside Track Milan 2012 I presented in a 6 minutes session (unfortuntely my friend, colleague and co-speaker Fabio Di Micco was unable to present) how you can easily consume NetWeaver Gateway services using SAPUI5 library, in this blog I will resume the concept and the code and share it with the SCN community.

Continue reading “Consume NetWeaver Gateway services via SAPUI5 – Part 1”
%d bloggers like this: