Git HANA – A free, open-source Github client for SAP HANA

Git-HANA-Screenshot.jpg

Over the last few months, working on the metric² open source project, I have been frequently updating the GitHub repo. As a heavy XS Web IDE user, this entailed exporting or copying the contents of the files from the package into my local GitHub repository for the project and subsequently committing the files from there. Since there is a small disconnect between the source (my HANA packages) and the destination (GitHub) I like to often see what changes which are due to be committed, the differences between the files, or just compare the files between the 2 systems.

Being over dedicated to building solutions to some of my workflow challenges (see herehere and here), I created yet another small HANA native app called Git <> HANA. The application allows you to compare files between your local HANA package and your (or any other) GitHub repo, and it also lets you commit files directly from the UI to GitHub, and vice-versa. If a file does not exists, it will create it for you (on either side). There are a couple other cool features which you can read about below, or watch the little video I created. read more

Open Source Project: Metric² for SAP HANA – v2.0

After releasing metric² at TechEd Las Vegas last year it has had well over a hundred downloads, and has a couple loyal followers always offering advice and feedback (which I am truly thankful for). Last week we released version 2.0 of the free and open source app and subsequently put it onto GitHub under the MIT license which you can find here.

The biggest changes of the new version of metric² include:

  • A new UI (Twitter bootstrap based)
  • The ability for users to create their own account
  • A few new metrics
  • No longer uses SAPUI5 (a blog post in itself!)
  • The biggest change was the front-end/UI and the code has been refactored and split up into multiple library files (XSJSLib) and is simplified for easier reading.

The primary goal of the app is, and always has been to try and visualize your big data. Along with providing a self service tool to monitor and provide insights on the data you have in, and around your HANA system, while using it to the fullest.

Short Survey

I am in the process of trying to understand where to take the app in terms of use and direction and if you are interested in helping guide the discussion, if you have downloaded, used or seen the app I would greatly appreciate if you took 1 minute to complete a short 5 question, multiple choice survey here. read more

Open Source Project: XSOData Service Browser

Introduction

I was recently working on developing a couple of XSOData services for Metric² when I realized that it would be pretty helpful to have a way to develop, test, explore services and queries. I wrote a similar tool for SAP Netweaver Gateway and the iPad a couple years ago, and decided to model it with some similarities, but having the ability to build it directly into HANA using XS, would add some nice integration benefits.

About the App

Some selectable options:

Generated Query: read more

Open Source: Node.js dashboard for SAP HANA

This is what we will be developing in this blog ….

Over the past few years Node.js has really caught my attention. The simplicity of Javascript with server side processing, Non-blocking-IO, Event Driven, and simple integration always intrigued me as a great combination for enterprise applications. (Somehow it sounds similar to HANA XS Engine 😉 )

A couple months ago I ran into a similar problem to Jon-Paul Boyd (HANA Forum Post) in which I wanted to use XS Engine for websocket/persistant connections to my HANA Instance, but due to the support not being included in SPS6, I decided to look elsewhere, and ended up using Node.js to fulfill this requirement.

In the past, while developing HANA/Node apps, I resorted to creating a XSJS App which really just acted as a middleware layer to push and pull data from my HANA DB, until recently I noticed a great blog post from Ingo Sauerzapf which piqued my interest. The blog mentioned that Holger Koser had created a HANA DB Client for Nodemaking life extremely easy to connect to HANA directly from Node. I thought it would be good share the small project I developed using Node.js and this new client with the community in the hopes that others will share their experiences with the technology.

This blog is not necessarily an introduction to Node.js development as there are some nice tutorials and examples out there from Tobias Hoffman and Alessandro Spadoni. The blog is intended to cover a small app developed in Node.js and shows the development process behind it, taking it from conception through to reality. I encourage you to download a few of these components, and also the example out. This app, similar to another app I developed called Metric² (which you can read about here), it is a web based widget showing some friendly KPI’s on the performance of your HANA Instance. The app gets streaming data from our HANA backend displaying this in a friendly, simple dashboard. The dashboard is designed to be shown on a large format monitor in a Ops or IT center and can also very easily be modified to show any KPI’s relevant to your business or needs.

Requirements:

SAP HANA Instance (e.g. AWS Developer Image)

Node.js installed (this does not need to be on the HANA box but same network with access to the HANA port – normally 30015).

Node Dependencies

We will also use a couple of helpful dependencies from the node community including Socket.ioExpress and obviously hdb. Installing these packages is as simple as running “npm install hdb”. Once you have the dependencies installed we can start creating our app.

https://paulaschmann.com/wp-content/uploads/2023/10/hdb.png

App Design

For me, I always start mocking up in my favorite Image IDE (Photoshop), I used this image as inspiration for my app. I liked the simplicity, clean layout with focus on the numbers at the bottom. In our case, we will add a small chart in the center, giving us a basic visual representation of the numbers being displayed:

PhotoshopHTML Mockup
Download the PSD

App Development

Index.html

In this case I decided to use Twitter Bootstrap to help with some of the layout/formatting of the page as well as some mundane tasks like Modal popups. From a coding perspective I started out developing the Single paged “index.html” file, doing my best to stick with my mockup which I previously created. I was sure to “id” all of my elements on this page as we will be updating these values from our node.js backend. This aspect of node development is strictly “traditional” web based development. No need to work with Node or any server for that matter. Once you have your page rendering the way you want, we can move on.

<html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta charset="UTF-8"/> <meta name="viewport" content="width=device-width, maximum-scale=1.0" /> <title>Metric²</title> <!-- jQuery --> <script src="https://code.jquery.com/jquery.js"></script> <!-- Socket.IO --> <script src='/socket.io/socket.io.js'></script> <!-- Peity - a lightweight sparkline package for jQuery --> <script src='js/jquery.peity.min.js'></script> <!-- Client side code needed --> <script src='js/client.js'></script> <!-- Bootstrap CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- Latest compiled and minified JavaScript --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script> <!-- CSS --> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="top" class="background"> <div class="centercontainer"> <div class="container shadow"> <div class="containerheader"> <table class="heading"> <tr> <td rowspan="2" style="text-align: center; width: 10%;" > <img id="statusicon" src="img/OKIcon.png"/> </td> <td style="vertical-align: top;"> <h1><span id="info-name">SAP HANA Instance</span> <button class="btn btn-link" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-cog settingsicon"></span> </button> </h1> </td> </tr> <tr> <td class="h3" style="padding-top: 20px;"> <span class="glyphicon glyphicon-flag icon" style="margin-left: 0px;" /></span><span id="info-alerts">0</span> Alerts <span class="glyphicon glyphicon-repeat icon"></span><span id="info-version">1.0</span> <span class="glyphicon glyphicon-map-marker icon"></span><span id="info-detail">Server Location</span> </td> </tr> </table> </div> <div class="containerbody"> <span class="history">0</span> </div> <div class="containerfooter"> <table class="info"> <tr> <td id="infoUSERS" class="td-info" onClick="setChart('USERS');"> <!-- The ID of each of our <SPAN> tags is important for updating the data being returned from the server --> <span id="info-users" class="h1">0</span><br /> <span class="h3">Users</span> </td> <td class="td-info"> </td> <td id="infoDISK" class="td-info" onClick="setChart('DISK');"> <span id="info-disk" class="h1">0</span> <sup>GB</sup><br /> <span class="h3">Free Disk</span> </td> <td id="infoMEM" class="td-info" onClick="setChart('MEM');"> <span id="info-mem" class="h1">0</span> <sup>GB</sup><br /> <span class="h3">Free Memory</span> </td> <td id="infoCPU" class="td-info selected" onClick="setChart('CPU');"> <span id="info-cpu" class="h1">0</span> <sup>%</sup><br /> <span class="h3">CPU</span> </td> </tr> </table> </div> <!-- /.containerfooter --> </div> <!-- /.container --> </div> <!-- /.centercontainer --> </div> <!-- /.top --> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Settings</h4> </div> <div class="modal-body"> <form id="modalbox" role="form"> <div class="form-group"> <label for="servername">Name</label> <input type="text" class="form-control" id="servername" placeholder="Enter a reference server name"> </div> <div class="form-group"> <label for="serverdetail">Location</label> <input type="text" class="form-control" id="serverdetail" placeholder="Description, Location or Other Information"> </div> <div class="form-group"> <label for="bg">Background</label><br /> <label class="radio-inline"> <input type="radio" name="bg" value="../img/bg1.jpg" checked> Background 1 </label> <label class="radio-inline"> <input type="radio" name="bg" value="../img/bg2.jpg"> Background 2 </label> <label class="radio-inline"> <input type="radio" name="bg" value="../img/bg3.jpg"> Background 3 </label> <label class="radio-inline"> <input type="radio" name="bg" value="none;"> None </label> </div> <div class="form-group"> <label for="colorscheme">Color Scheme</label><br /> <label class="radio-inline"> <input type="radio" name="colorscheme" value="Dark" checked> Dark </label> <label class="radio-inline"> <input type="radio" name="colorscheme" value="Light"> Light </label> <label class="radio-inline"> <input type="radio" name="colorscheme" value="Fiori"> Fiori </label> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id="modalSave" onClick="saveSettings();">Save changes</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </body> </html> read more

Open Source Project: Metric² for SAP HANA

/wp-content/uploads/2013/11/office13_589243.png

Metric² is a web based, realtime dashboarding platform for SAP HANA, on SAP HANA.I recently gave a demo of the app at Demojam in Las Vegas (You can read my blog post about the event here). Metric² is a free app/download and this blog gives some insight into how it works, and how you can download and install it in your own HANA system:

Overview

Metric² is made up of 3 key areas:

Dashboards: Metric² can have multiple dashboards. Dashboards are designed as blank canvases, are quite flexible, and can contain widgets which are added can be simply dragged and dropped into their needed locations and also sized accordingly.

Widgets: Dashboards can have multiple widgets displayed. There are a variety of widgets including a range of predefined datasources (CPU, Memory, Disk etc.) but also include custom widgets (SQL, JSON, Yahoo) which can display a myriad of information to your team. read more

Why Demo Jam ROCKS – from a losers perspective ;)

It was Tuesday night sometime back in 2009 at my first TechEd where I was sitting in the audience and really wishing I was standing up on stage, presenting something inspiring and innovative which would encourage the votes of the demanding audience of Demojam. Well, it took 4 years to creep over personal hurdles, family time and to gain an ounce of courage which persuaded me to post an entry in 2013, this blog gives some insight into what I did, what I would have done differently, and also why Demojam really needs people like YOU!

A couple of months ago (May through July) I went through the openSAP HANA course and was really impressed, not only by the DB, but more the HANA XS Engine as an Web/App server. Being a “learn by doing” kinda person I struggled to get the most out of the course content since it really didn’t apply to anything I was currently working on, until I realized the opportunity… As I described in my demojam presentation, I drank the HANA coolaid 🙂 Personally, it was not so much of the big data aspect that intrigued me, but rather this concept of the DB and the app server really being a single entity from a platform, as well as infrastructure perspective. Simple. I spent a couple weeks learning a lot more, since I had something to apply it against and started developing an app called Metric² read more

Open Source Project: HANA Talk – A Simple HANA XS helper

HANA Talk is a small Javascript class which help facilitate the communication between your front end html/js files and HANA database when using SAP 
HANA XS Engine. This is intended to help people who are just starting out development on XS Engine and would like a easy place to get  their feet wet without having to go through too much trial and error. This is also a great starting point for people involved in events like InnoJam, Hackathons, etc. when POC’s and demos need to developed quickly, but not necessarily perfectly *cough* or securely *cough* 🙂 

By providing this tutorial and the HANA Talk download, my hope is that it will encourage more people to consider using XS Engine as a app platform to drive their front end web apps and subsequently, encourage the use and innovation around HANA in general. Anne Hardy had a comment in her blog post regarding the Developer Advisory Board which was along the lines of “Developers want to get it in 5mins max; they want to build real stuff in less than an hour”.

I frequently get discouraged by the amount of learning and effort always needed to learn new technologies and products which companies “get into bed with”. Nearly every one of the apps I develop start out in a POC type phase, where my imagination and reality clash and inevitably produce the equivalent of a 3yr old’s self portrait, often resembling “Unconventional”. While going through these exercises I often wish it was simple to get somethings done, and understanding the cost and willing to accept the trade offs. This is why I developed HANA Talk – to make those unconventional portraits, easier to deliver 🙂 

OK – so what does it do?

By adding a HANA Talk js and xsjs file to your project, you can simply write SQL statements in your HTML file and have the results returned synchronously.

e.g.  Index.html

<script type="text/javascript">
var resp = hana.executeScalar('SELECT 1 FROM DUMMY');
console.log(resp); //Outputs 1
</script>

Super simple and easy. See below for further details.

Prerequisites

1. Download/fork these 2 files – client.js & server.xsjs from Github and add them to your package. The filenames/structure can be changed if you are feeling adventurous. In your HTML file, you will need to reference client.js, this is as simple as adding a tag to you header. For reference, if you are not using SAP UI5 or jQuery – you will need to add this to your HTML header as well.

A Basic Example

2. In your javascript code, instantiate a new HanaTalk object. We will use this to “pass” our SQL commands to our HANA DB.

var hana = new HanaTalk('SYS'); //The 'SYS' reference is in relation to the Schema. It can be specified here or within your TSQL Statement

3. Call your HanaTalk object with the operation type and SQL you would like execute (see below for additional operations).

var result = hana.executeRecordSet("SELECT 1 FROM DUMMY");

4. We can populate that response into our html (DOM)

document.getElementById("SomeElementID").innerHTML = result;

A few more examples

a.) Insert/Update/Delete a record – use .executeChange, this will execute your code and respond with the records which have been updated

document.getElementById("resp4").innerHTML = /*hana.executeChange("UPDATE/INSERT/DELETE .... ") + */ ' Record Changed';

b.) Return a Table – using .executeRecordSet will return a html formatted table, displaying the select’s record set

document.getElementById("resp2").innerHTML = hana.executeRecordSet("SELECT TOP 5 * FROM M_HOST_INFORMATION");

c.) Return a Object – .executeRecordSetObj allows us to loop through records, and have quite a lot of control of the display of each record and its column name.

document.getElementById("resp3").innerHTML = hana.executeRecordSetObj("SELECT TOP 5 * FROM M_HOST_INFORMATION"); read more

SAP UI5 – A Photoshop template of GUI elements

32 43 19,722 

Mockup.png

For me (and I am sure many others!), UI5 has become a really useful toolkit for easily developing web apps and POC’s with little effort around the SAP Ecosystem. The OData support, rich controls and business inspired examples lend itself well to the mantra of “Don’t reinvent the wheel”. At a recent SAP Inside Track event in NY, I made reference to the fact, that while developing a mobile app, I, or a graphic designer, can spend close to 40% of the total design & development phase/hours on the UI. Building “consumer grade” enterprise apps is a different way of thinking for app developers. I am sure many of you, like me, started out with a redefined canvas of boring, grey .NET controls or a “Enjoy” SAP CXTAB_CONTROL. But times are changing and we should all look to the creative and vibrant consumer world of both web and mobile apps to reconsider our methods and processes for developing great apps. read more

xSync – Making HANA XS development easier

Update: March 7th 2014

– Added support for SAP HANA SPS07 
– Ability to ignore local deletes, which would leave the files on the server 
– Shortcut link opens the Web Editor, and another to open IDE in your browser 

– Stability and speed improvements 
– Corrected multiple minor bugs  

————————————————————————————————————————————————

A couple of weeks ago, I started playing with HANA development after going through a couple of the opensapcourses. One of my biggest surprises was that HANA Studio was windows only. As a Web/Mobile/App developer spending majority of my time on the Mac platform, having to get my Dell out was a walk down memory lane, and caused me to not spend as much time working on the projects as I would have liked. Since Rev 52 of HANA included a XS Engine Lite IDE, a useful web based IDE for your XSJS/SAPUI5 development. I was been looking forward to getting it installed on my AWS machine and giving it a test drive. Last weekend Juergen Schmerderposted a updated really easy to follow and simple guide of going through the process and within a hour, I was up and running on the newest available rev. read more

Quick View for SAP Notes

In my ever growing quest to provide quick and easy access to SAP Notes (which Dagfinn Parnas started a couple of years ago with the Android Note Viewer), I recently finished creating a windows version of a small app to make opening notes just a little easier.

When deciding if I should get this done, it was purely out of personal need. Having spent the last few months building up a couple of Gateway test, stage and Prod systems, the ability to open a SAP note quickly, always seemed to elude me. Open service.sap.com/support -> click on Help & Support -> Type the note and go. Albeit the app developed still has some user interaction (until Google Glass arrives?) … it does make it a little simpler. I also found a small cmd script online which looked helpful. read more