Category Archives: SAP

ABAP URL shortener

Nowadays, everyone knows URL shortener services and even you don’t know it you are using it.

Twitter automatically translates every URL into a shorter URL, Google has is own service goo.gl and there are so many others…

In my last project I had to configure NWBC and I faced a problem. Do you know that URL for menu entries in PFCG is just 132 characters?

Usually this is enough, but in my case it was not…

I had to link Cognos reports, that believe me are really long URL and even more due to a bug with SAP Fiori Launchpad I had to apply a workaround to have my theme applied as described by note 2092412, and it generates long URLs.

Continue reading ABAP URL shortener

abap2xlsx – Business charts

In July 2010, SAP Mentor Ivan Femia released the first version of the open source project abap2xlsx that allowed ABAP developers to generate professional spreadsheets from scratch with all the advanced features that stand alone Excel editors provide like: style and cell data formats, drawings support, conditional formatting, formulas, and so on.

This project has improved the user experience compared to excel generated using SAP standard components (such as ABAP ALV, WebDynpro ALV, System menu, etc.) and it has made ABAP developers more freedom adding, for example, the ability to generate an excel from non dialog processes and to include the generated excel as email attachment. At last but not least, this framework allows the use of spreadsheets in an interactive way, making possible to read them via ABAP for further processing.

Time after time, more and more SDN community members joined into the project and improved its functionalities. The abap2xlsx project reaches a large number of contributors, so today it is almost time for the new release that will include many new features such as the use of template files for charts, very hidden sheet, many bug fixes and so on. In this blog we will focus on one of the most important news: the ability to create custom charts from scratch!

1.jpg

Yes, that’s right: with just a few simple ABAP code lines, you can create business graphics within the excel file and send it, for example, to many iPhone/iPad via a push notification or via an html email (as weekly summary for example).

2.jpg

3.jpg          4.jpg

Another interesting way to use abapxlsx charts is to generate them using abap and then catch them as an image in order to show the chart in a WebDynpro or to send it directly to a mobile device! You believe that this is not possible? It is not easy, but you can do it following these steps:

  1.      Generate the excel file with the chart as you wish via ABAP using abap2xlsx
  2.      Add a simple macro to the excel via ABAP using abap2xlsx in order to enable the excel to export the chart in an image file like this:
     
    5.jpg
     
  3.      Write a simple vbs file via ABAP in order to run the image generation like this:
     
    6.jpg
     
  4.      Save the excel file and the vbs on the SAP NetWeaver Application Server filesystem via ABAP 
     
    * Opening the File
    OPEN DATASET lv_filename FOR OUTPUT IN TEXT MODE
           MESSAGE lv_msgtxt.
    IF SY-SUBRC NE 0.
          WRITE: ‘File cannot be opened. Reason:’, lv_msgtxt.
          EXIT.
    ENDIF.* Transferring Data
    LOOP AT lt_table.
          TRANSFER lt_table-line TO FILENAME.
    ENDLOOP.* Closing the File
    CLOSE DATASET lv_filename.
     
  5.      Run the saved VBScript file via ABAP
     

    v_command = ‘cscript.exe test.vbs’.

     

    CALL ‘SYSTEM’ ID ‘COMMAND’ FIELD v_command.

     
  6.      The chart image has been generated! Get it from the Application Server filesystem via ABAP and display or send it!    
    7.jpg

#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