First of all, I want to open my first blog of the year with a Happy New Year and thank you for reading this blog.
I have been looking at how to get more involved in simplifying HANA development at Hitachi Consulting, especially for apps build on XS engine.
Last fall, I spent a few days at the Tech Ed conference and I was blown away by the Build tool and Splash. As I approach my weekend thinking about what I should grill, btw I enjoy grilling if you didn’t get it by the title of my blog, I was also thinking what to build next.
In this simple blog, I want to showcase a few steps of how to build a responsive application on Build. I am thinking that not too far from now, I may turn this into my own real app which I would like to share with other grilling fanatics who would like to share some recipes for me (and others) to try out so that next time I am grilling I will be thankful for your recipe as well.
These steps assume you already have an account on and that you are logged in to Build/Splash.
1) Click on create new project – (this image was captured after the fact)
2) Give it a name
3) I added a list control and edited the data itself by clicking on each of the fields and typing on them.
This screenshot has a LOT of valuable information.
) The header of the application contains the name of my project
b) The sub-header contains (display mode to simulate a pc, tablet, phone. A ruler, an app map, icons to hide and show the left and right panels, a button to publish the project, and a preview button so you see it on the browser as a final application)
the Application Map where one can see the flow between the pages, add new pages, etc
c) The left panel has the controls to be used on the application. (table, list, button, label, grid, etc)
d) The right panel contains the properties, actions, and content for the selected control(s), for example, if I select an item in the list, then I can set the action to navigate to (Page 2) in my scenario as shown below
When I select the page 2 on the left panel, I can see what the content of that page will have. In my case I added an icon tab where I will display information about my recipes such as, ingredients, steps to cook, and pictures of the final product
Navigation (back): select page 2, then set Actions to navigate back to Page 1
To review the progress of our responsive application in Preview mode, we can select the preview button on the top right hand corner and we can see it (pc mode, tablet mode, phone mode).
Now, one of the problems developers face when developing an application is data. Well, on the Data tab in the left panel, we can click on the Data Editor button and...
The Build application allows us to use create an object manually, or upload a sample data file from excel as shown below. In my case, I simply used what was provided by default and edited the labels myself by clicking on the screen and entering my own text – ( recipes I have grilled )
Once you are happy with the design – then the next step is to publish it. Once the project is published, the Splash tool provides you with a url which you can use to test your application.
now.. if to take this a step further, what If I were able to import this same application into my HCP account. and be able to bind real data, and extend the application with the SAP Web IDE. Check out the next blog to read on those steps.
Thank you again for reading this blog and this was honestly a fun quick project and blog I was able to accomplish right before the start of my weekend. Please share some thoughts or comments,
happy programming