Hi Folks,

It is almost a year and three months for me to practice as a UI developer. During my practice, I've learnt that it is always nice and important to have a brainstorming design session before diving into the coding. Visualization of your thoughts & design through prototyping, mixing with the user experience can reduce your development efforts, pain points of redesigning the components and to get all functional & technical team on single page.

Initially during my practice of developing SAPUI5 applications or SAP Fiori like applications, i started with paper for low fidelity mock ups and the PowerPoint or some open source tool for high fidelity mock ups as i did not know how to use Photoshop. But with the time, i realized that the all the tools which i was using were not robust and the designs were also not good neither in terms of user experience nor interactive and most importantly efforts in terms of time was much to afford in designing.

Even during designing the high level mock ups using the above tools, it was hard to achieve the design near SAP Fiori design patterns which resulting in slight confusion about the icons and layouts. So, i was in search for the tool where i can quickly prepare my wire frames and visualize my design incorporating the user experience design guidelines of SAP Fiori with live interaction, using the similar SAP layouts and controls.

Then, luckily while reading about the SAP Fiori design guidelines, I read about a tool Axure, for which SAP provides the SAP fiori design stencils & Icons font, with the help of which we can design wire frames and mock ups with ease, fully interactive and using exactly same layouts & Icons. And told my manager about the tool who suggested me to go ahead with the trial version. Later on I got the licensed version.

After using the Axure, in wire frame and high fidelity preparation, i realized that why i didn't come to know about this tool earlier which could have made my job easier.

Then while searching about the Axure, i also read a beautiful blog by Kenton Hankins which gave me more clear picture about the prototyping categories and his comments on blog UI5 & Twitter - Designing the Solution which inspired me to use Axure.

So, sharing my experience with Axure so that anyone who is unaware about Axure can know about its awesomeness and advantage.

What is Axure?

Axure is a prototyping tool that you can use to make low and hi fidelity wireframes with dynamic interactions, or to build fast mockups without interactions:

• Masters and widgets/stencils make your work easier and save time.
• Adaptive views help you to visualize interactive mockups for all sizes (desktop, tablet, and smartphone). Interactive prototypes can be tested on all devices.
• No coding is required. Axure is a tool for designers, or for anyone who wants to proof a concept.

Getting started with AXURE :-

Step 1:- Download and install the trial version of AXURE, if being a UI developer, you have not used it till now and wants to get the awsome feel of working with AXURE. Then based on your experiences, if required can push your manager to buy the licenses.

Step 2 :- Download and install the SAP Icon fonts to your windows system by double clicking the SAP-icons.ttf file which is part of OpenUI5 SDK.

Step 3 :- After installing the SAP Icon fonts, Download the Design Stencils to visualize your SAP Fiori Ideas. And open Axure RP Pro to load SAP Fiori Axure design stencils.

Step 4 :- Load the libraries of Design Stencils by locating the folder location where you have extracted the design stencils.

Step 5:- After adding the libraries, you can select the library according to your requirement like Fiori_Stencils_Wave8M (For Mobile), Fiori_Stencils_Wave8S (For Smartphone). And can kick start your prototyping/wireframing by just drag & drop the UI5 controls and icon.

cheers!!!

Deepak Sharma

Hello All,

This blog explains you how to deploy a SAPUI5 application into ABAP server.

1. How to install Eclipse.

Installing eclipse-jee-juno-SR1-win32.

To download and install please visit the below link.

http://www.eclipse.org/downloads/packages/eclipse-ide-java-ee-developers/junor

Click on windows 32-bit, it will download one zip file.

Go to the eclipse download path and extract the eclipse juno rar file. Open the eclipse folder and double click on eclipse.exe

Note: Before doing that we have to install jdk in our system. And set the jdk path.

2. How to install SAPUI5 packages in Eclipse.

Click Help > Install new software.

Click on "Add" button.

In the above window specify Name as sapui5 and in Location give the below link and Click "ok".

https://tools.hana.ondemand.com/juno

Click on Select All and Click Next.

Choose I accept the terms of the licenses agreement and Click on Finish.

3.How to Install Tomcat 7

To download Tomcat visit the below link.

http://tomcat.apache.org/download-70.cgi

How to Integrate Tomcat 7 to Eclipse juno

Select Windows and click on Preferences in Eclipse.

Choose Server and click on Runtime Environment and click on Add.

Select Apache Tomcat v7.0 and click on Next.

Click on Browse.

And specify the path directory and click on Finish.

4.How to Create a Simple Hello World Project

Open Eclipse → Click File and select new option → Select Project.

In New Project window choose SAPUI5 Application Development and click on Application Project→and Click on Next.

Enter your Project name and Click on Next.

Select the Development Paradigm as JavaScript or XML or JSON or HTML click on Finish.

MVC structure of  in Eclipse

• Index Page
• Controller Page
• View page

Index File for Hello World Project

Below screen short shows the index file.

View File for the Hello World Project

View file is used for web Page View purpose.

Below screen short is View code.

.

Controller File for Hello World

Controller part is used to write the functionalities.

Below screen short is Controller code

Output

5.How to share or upload a project in ABAP server system.

Open Eclipse.

In project Explore Right click on project name and choose Team and click on share.

Share project repository window will open, in that choose SAPUI5 ABAP Repository and click on Next.

Click on Browse and select system details and click on OK.

Click on Next.

Enter the client number, username and password details and click on Next.

Next we will get SAPUI5 Repository window, in that choose create a new BSP Application.

Enter the details like Name, Description and Package.

Click on Next----> Finish.

After sharing the project into the server we have to submit the code.

Right click on the project and select Team and click on submit.

Click on Finish.

Best Regards,

Mohanbabu D.

Hello,

browsing through the web I couldn't find complete instructions how to generate optimized (minified) versions of the JavaScript and CSS files of an UI5 application. Here are the steps I came up with myself.

Since I didn't want to force my team member to add Maven or Gradle support in their Eclipse IDEs, I created an Ant build file.

Prerequisites

1. Download YUI compressor jar
2. Download YUI compressor ant support, e.g. Simon Buckle's Ant Task
3. Download HTML compressor (don't know how long this link will stay valid, as Google is shutting down Google Code)

Build File

This is the XML file which I placed in the .externalToolBuilders directory of my Eclipse project.

<project name="MyCoolUI5App" default="compress" basedir="..">    <property file="${basedir}/.externalToolBuilders/build.properties"/>       <taskdef resource="yuicompressor.tasks" classpath="${basedir}/.externalToolBuilders/lib/yuicompressor-taskdef-1.0.jar;${basedir}/.externalToolBuilders/lib/yuicompressor-2.4.8.jar"/>       <target name="copy" description="Copies /WebContent to /Deploy">        <delete dir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}"/>        <copy todir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}">            <fileset dir="${basedir}/WebContent"/>            <compositemapper>                <globmapper from="*.controller.js" to="*-dbg.controller.js"/>                <globmapper from="*.view.js" to="*-dbg.view.js"/>                <globmapper from="*.js" to="*-dbg.js"/>                <identitymapper /><!-- This one takes care of all other files -->            </compositemapper>        </copy>    </target>       <target name="compressJsCss" depends="copy" description="Minifies JavaScript and CSS files">        <yuicompressor verbose="false" todir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}">            <fileset dir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}"/>            <mapper>                <globmapper from="*-dbg.controller.js" to="*.controller.js"/>                <globmapper from="*-dbg.view.js" to="*.view.js"/>                <globmapper from="*-dbg.js" to="*.js"/>                <globmapper from="*.css" to="*.css"/>            </mapper>        </yuicompressor>    </target>       <target name="compressXml" depends="copy" description="Minifies XML views and fragments">        <echo>Unfortunately, this task takes a minute to complete. Time to get a coffee...</echo>        <apply executable="java" parallel="false" force="true" dest="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}">            <fileset dir="${basedir}/${sap-ui-xx-resourceroot=DEPLOYMENT}" includes="**/*.xml"/>            <arg value="-jar"/>            <arg path="${basedir}/.externalToolBuilders/lib/htmlcompressor-1.5.3.jar"/>            <srcfile/>            <arg value="-o"/>            <identitymapper/>            <targetfile/>        </apply>    </target>       <target name="compress" depends="compressJsCss,compressXml" description="Minifies web resources"/></project>

It actually references a build.properties file in the same directory

# Folder with development web resources
sap-ui-xx-resourceroot\=SOURCE=WebContent
# Folder with optimized web resources
sap-ui-xx-resourceroot\=DEPLOYMENT=Deploy

Note: The directory name Deploy is the SAP default directory for optimized web resources. Refer to SAP note 1957115 for detailed information. Apparently, you may provide alternative names in a file called .UI5RepositoryAppSetup.

Build

1. The build now copies the files from folder WebContent to folder Deploy, adding a -dbg suffix to the non-minified JavaScript files.
2. The YUI compressor then compresses JavaScript and CSS files, renaming the now optimized (minifed) JS files to their original name (without -dbg extension).
3. The HTML compressor additionally removes white space from XML views and fragments.

Publish

In our project, we use the SAP ABAP Team Provider Eclipse Plugin to deploy the application to a NetWeaver server. Afterwards, you have now various options to access your application:

1. No request parameters: Productive version, that is, your app with the generated optimized web resources
2. url_to_app?sap-ui-debug=true: Load human readable (unminified) versions of the UI5 libs and your app
3. url_to_app?sap-ui-xx-resourceroot=SOURCE: Load human readable (unminified) versions of your app

In many homes there are still electricity meters with a mechanical counter that do not provide a direct interface for reading the consumption of electrical energy. In this blog, I am trying to capture the consumption of electrical energy with a mobile device (Android) as a scanner to read the information from the mechanical counter and record it in the database like SAP HCP. In this case, we are going to build a SAPUI5 Cordova electricity meter reading with the SDK from Anyline.io.

• Go to Anyline.io website to download the SDK Cordova plugin and obtain the license. 
• Setup and build the Cordova project under C:\programs
  • cordova create C:\programs\meterReading com.enterprisemobility.meterReading meterReading
  • cd c:\programs\meterReading\
    
  • cordova platform add android
  • cordova plugin add <path_to_AnylineSDK_Cordova_Plugin>
    

• Create a function to scan the mechanical counter by calling the scanElectricMeter function in ElectricScan.controller.js:
  

  scanElectricMeter: function() {
  cordova.exec(this.onResult, this.onError, "AnylineSDK", "scanElectricMeter", this.energyConfig);
  }
• If scan is success, it will call the onResult function which will capture the meter reading value and pass the information to the ScanResult.view.js.
  

  onResult: function(result) {
  var meterType = []; var reading=[];
  meterType.push(result.meterType);
  reading.push(result.reading);
  var data = [];
  for(var i = 0; i < meterType.length; i++) {
  data.push({"meterType": meterType[i], "reading": reading[i]});
  }
  var oModel1 = new sap.ui.model.json.JSONModel({ "zgwmat": data });
  sap.ui.getCore().setModel(oModel1, "zgwmatmodel");
  var bus = sap.ui.getCore().getEventBus();
  bus.publish("nav", "to", {  id : "scanresult",
  });
  },
• I have attached the complete source code in this blog: www.zip. Replace the c:\Programs\meterReading\www folder with the attached www folder.
  
• Download SAPUI5 runtime here and save it under C:\Programs\meterReading\www\resources
• Build the cordova project under c:\programs\meterReading, execute command cordova build
• Install the generated .apk from c:\Programs\meterReading\platforms\android\build\outputs\apk to your Android device.

That's it!

Introduction

As of the new Hybrid Application Toolkit version 1.8.2, you have now the capability to add to your applications "custom Cordova plugins". This is a very nice feature because you can enrich the functionalities of your Hybrid applications developed using SAP Web IDE. In this blog I'm going to show you how to "enable" this feature and how to use it. I'll create a very basic hybrid application which includes a couple of custom plugins like the AppInfo plugin (danmichaelo/cordova-plugin-appinfo · GitHub) and the Email Composer plugin (katzer/cordova-plugin-email-composer · GitHub). Of course this is just an example and you can choose your own plugins to be included in your hybrid application.

NOTE: The steps reported here have been tested on a MAC platform, but it should be the same for PC workstations.

This blog is split in two parts:

1. Installation of custom Cordova plugins
2. Use of custom Cordova plugins within a hybrid application

Prerequisites

• SAP Web IDE 1.15
• Hybrid Application Toolkit 1.8.2
• A mobile device to test the results

Limitations

There is just one limitation at moment with custom Cordova plugins. If you have already added some plugins to your Companion App and you need to add one more, then you have to perform the HAT installation again in order to be able to see the new plugin added to the Companion App. This limitation will be hopefully eliminated in the future.

Let's get started!

Part1: Installation of custom Cordova plugins

1) Create a local folder on your drive which will host all the custom Cordova plugins you want to make available for your applications. In my case I have created a folder named "custom_cordova_plugins" directly in my user folder

2) Once you have decided which are the plugins you want to install, simply clone them into this folder by using the "git clone" command. At moment the plugins must be stored locally in order to be taken by HAT installation

3) Start the installation of HAT and, when you reach the point "Configure path for Custom Plugins", just enter the complete path to the folder hosting all the plugins and click on Save. Your path of course might look different if you have a PC

4) At the next screen screen, when you have to Edit Companion App Build Configuration, choose the plugins you want to include in your companion app and click on Save

5) Proceed with the Hybrid Application toolkit installation as usual

Part 2: Use of custom Cordova plugins within a hybrid application

1) Start the Hybrid Application Toolkit

2) Open SAP Web IDE and create a new application starting for example from the SAPUI5 Mobile Kapsel App Project

3) Enter a project name

4) Define the view type, the namespace and the view name

5) Click on Finish

6) If you run the app, you should get just a blank app

7) Right click on the project name and choose Project Settings

8) Select Device Configuration and define your settings; then in the Plugins section select the available plugins you want to include (i.e. Device Information) and then click on the Custom button

9) Choose the custom plugins you want to include in this application and click on OK. In my case I'm choosing both the AppInfo and the EmailComposer plugins

10)  You should have added now 2 new plugins. Click on Save

11) Locate the file Main.view.xml in your project, right click on it and choose Open With > Layout Editor

12) From the Container pane on the left add two HBox components to the view and for each one of them add a Button component taken from the Action pane. Set the two buttons in the middle of the related HBox components and change the title for the view and for the two buttons. You should get something like this. Then save the file

13) Reopen the same Main.view.xml file, this time by double clicking on it. The file is opened in the editor. Add the press events for the two buttons and save the file.

...<Button text="Show application info" width="200px" id="__button2" press="onappinfo">
...<Button text="Send an email" width="150px" id="__button4" press="onsendemail">
...

14) Double click on the Main.controller.js file to open it in the editor. Add the following code just after the first row and save the file

onappinfo: function() {    navigator.appInfo.getAppInfo(function(appInfo) {          jQuery.sap.require("sap.m.MessageBox");          sap.m.MessageBox.show('Device Model: '              + device.model              + '\nApp Identifier: '              + appInfo.identifier + '\nVersion: '              + appInfo.version + '\nBuild: '              + appInfo.build, {                    icon: sap.m.MessageBox.Icon.INFORMATION,                    title: "Information",                    actions: [sap.m.MessageBox.Action.OK],                    styleClass: (!sap.ui.Device.support.touch ? "sapUiSizeCompact" : "")          });    }, function(err) {          alert(err);    });
},
onsendemail: function() {    navigator.appInfo.getAppInfo(function(appInfo) {          var sInfo = '<b>Device Model:</b> '              + device.model + '<br><b>App Identifier:</b> '              + appInfo.identifier + '<br><b>Version</b>: '              + appInfo.version + '<br><b>Build:</b> '              + appInfo.build;          cordova.plugins.email.open({              to:      '<a_valid_email_address>',          subject: 'Application details',          body:    sInfo,          isHtml:  true          });    }, function(err) {          alert(err);    });
}

where "<a_valid_email_address>" is the recipient you want to send the message to.

Let me just spend a few words on this code. This is the code for the two buttons. When you press the button to get the app info the "onappinfo" event is fired and its code executed; when you click on the button to send an email the "onsendemail" code is executed.

For the first button we require the application info to the plugin and they are stored in the "appInfo" variable which is then displayed in message box.

Quite the same happens with the "Send an email" button: the only difference is that instead of displaying the information retrieved in a message box I use them to compose an email with the EmailComposer plugin.

15) Your application is complete. If you want, you can test it using the companion app. In my case I just want to run it on the mobile device, so let's deploy it to local HAT. In SAP Web IDE, right click on the project name and choose Deploy > Deploy to local App Toolkit

16) When the previous step finishes, right click on the index.html file in your project and choose Run > Run on > iOS (Android) device. The application will be executed on your device

17) Click on the first button to show the application info. As you can see here we have either the information regarding the device model coming from the Device Plugin, either the application information coming from the AppInfo custom plugin. Click on OK to close the message

18) Click on the second button named Send an email

19) A new email is created with the same information we have seen before and it's ready to be sent.

NOTE: At this point you can also send this email, but it only works if you have an email account configured on your device/emulator.

20) Congratulations! You have successfully included and used some custom Cordova plugins!

Today I saw quite a lot threads in this space regarding the SmartTable and other SmartControls that at first time were released with SAPUI5 version 1.25. Since version 1.28 they were more and more usable. But the documentation is still very poor and so it is hard word to get a project with smartcontrols running.

Cause I had the chance to work in a project in which we used the SmartTable, SmartFilterBar and SmartVariant I decided to write this blog and show how the SmartTable control can be used in SAPUI5 project. Accompanying this blog there is a github repository with a working project. Simply clone this repository into your hanatrial hcp account, run it and play around with it.

The main part is done in the metadata file which in a real project is generated at the gateway server. The view then just consists of a page with the SmartTable control in it.

Lets start with describing the metadata file. In my metadata.xml file I created one EntityType (Person) and an according EntitySet (Persons). This entityset will be displayed in the SmartTable.

Here is a screenshot of the applications output

The metadata file

This is my metadata.xml file:

<?xml version="1.0" encoding="utf-8"?>

<edmx:Edmx Version="1.0"

    xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"

    xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"

    xmlns:sap="http://www.sap.com/Protocols/SAPData"

    >

  <edmx:Reference

  Uri="http://server:port/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_CORE',Version='0001',SAP__Origin='')/$value"

  xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx">

  <edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>

  </edmx:Reference>

    <edmx:DataServices m:DataServiceVersion="2.0">

        <Schema Namespace="SmartTbl" xml:lang="de" sap:schema-version="1 "

            xmlns="http://schemas.microsoft.com/ado/2008/09/edm">

            <EntityType Name="Person" sap:content-version="1">

                <Key>

                    <PropertyRef Name="PersonID"/>

                </Key>

                <Property Name="PersonID" Type="Edm.String" Nullable="false" sap:creatable="false"

   sap:updatable="false" sap:sortable="false" sap:filterable="false"/>

                <Property Name="FirstName" Type="Edm.String" Nullable="false" sap:visible="true" sap:creatable="false" sap:updatable="false"

   sap:sortable="false" sap:filterable="false"/>

                <Property Name="LastName" Type="Edm.String" Nullable="false" sap:visible="true" sap:creatable="false" sap:updatable="false"

   sap:sortable="false" sap:filterable="false"/>

                <Property Name="Birthday" Type="Edm.DateTime" Nullable="false" sap:visible="true" sap:creatable="false"

   sap:updatable="false" sap:sortable="false" sap:filterable="false"/>

            </EntityType>

            <EntityContainer Name="SmartTbl_Entities" m:IsDefaultEntityContainer="true"

  sap:supported-formats="atom json xlsx">

                <EntitySet Name="Persons" EntityType="SmartTbl.Person" sap:creatable="false"

    sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:addressable="false"

    sap:content-version="1"/>

            </EntityContainer>

            <Annotations Target="SmartTbl.Person"

                xmlns="http://docs.oasis-open.org/odata/ns/edm">

                <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">

                    <Collection>

                        <Record Type="UI.DataField">

                            <PropertyValue Property="Value" Path="FirstName"/>

                            <Annotation Term="UI.Importance" EnumMember="UI.Importance/High"/>

                        </Record>

                        <Record Type="UI.DataField">

                            <PropertyValue Property="Value" Path="LastName"/>

                            <Annotation Term="UI.Importance" EnumMember="UI.Importance/High"/>

                        </Record>

                        <Record Type="UI.DataField">

                            <PropertyValue Property="Value" Path="Birthday"/>

                            <Annotation Term="UI.Importance" EnumMember="UI.Importance/High"/>

                        </Record>

                    </Collection>

                </Annotation>

            </Annotations>

        </Schema>

    </edmx:DataServices>

</edmx:Edmx>

The first thing to mention is the edmx:Reference tag. To be honest I don't understand it in detail but we need it cause we use the sap.vocabulary further down in the Annotations tag. If we don't have this tag no columns will be displayed in the SmartTable.

<edmx:Reference  Uri="http://server:port/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Vocabularies(TechnicalName='%2FIWBEP%2FVOC_CORE',Version='0001',SAP__Origin='')/$value"

  xmlns:edmx="http://docs.oasis-open.org/odata/ns/edmx">

  <edmx:Include Namespace="com.sap.vocabularies.UI.v1" Alias="UI"/>

</edmx:Reference>

The next thing is the sap:visible="true" annotation at the properties of the EntityType. We need to set this attribute to make the property visible in the SmartTable.

<Property Name="FirstName" Type="Edm.String" Nullable="false" sap:visible="true" sap:creatable="false" sap:updatable="false"

   sap:sortable="false" sap:filterable="false"/>

Then there is the Annotations tag. The target for this tag is our Person EntitySet.

      <Annotations Target="SmartTbl.Person" ...

The enclosed Annotation tag must be of Term="com.sap.vocabularies.UI.v1.LineItem". This tells the SmartTable that it defines the columns of table.

          <Annotation Term="com.sap.vocabularies.UI.v1.LineItem">

For each column of the table a Record of Type "UI.DataField" is defined

                        <Record Type="UI.DataField">

                            <PropertyValue Property="Value" Path="FirstName"/>

                            <Annotation Term="UI.Importance" EnumMember="UI.Importance/High"/>

                        </Record>

Here you can define several display properties for the column, e.g. the header label.

The view

The master.view.xml is quite simple how it is supposed to be for SmartControls.

<core:View controllerName="com.tammenit.smarttbl.view.Master"

  xmlns:core="sap.ui.core"

  xmlns:l="sap.ui.layout"

  xmlns:table="sap.ui.table"

  xmlns:smartTable="sap.ui.comp.smarttable"

  xmlns="sap.m">

  <Page id="productListPage" navButtonPress="onNavBack" showNavButton="true" title="{i18n>masterTitle}">

  <content>

            <smartTable:SmartTable

                    id="PersonSmartTable"

                    entitySet="Persons"

                    tableType="Table"

                    useExportToExcel="false"

                    useVariantManagement="false"

                    useTablePersonalisation="true"

                    header="The Persons"

                    showRowCount="true"

                    enableAutoBinding="true">

                <!-- layout data used to make the table growing but the filter bar fixed -->

                <smartTable:layoutData>

                    <FlexItemData growFactor="1"/>

                </smartTable:layoutData>

            </smartTable:SmartTable>

  </content>

  <footer></footer>

  </Page>

</core:View>

The only remarkable part of this file is the SmartTable. In this control the most important thing is to define an entitySet to be displayed. This is done (what wonder) with the property entitySet. In my example the SmartTable is bound to the Persons EntitySet. All other settings are not really important and you can inform yourself about them in the API documentation.

Generating the metadata file on Gateway server

Another interesting question is "How do we create the metadata file on Gateway server?". I have to admit that I don't know this. In our project this was done by a colleague who stood in close contact to the SAP development department. Even though it would have been interesting to get the information about that I was too busy with programming the frontend. Sorry for leaving a gap here.

The source

You can find and download or just clone the source of this little application on github. Have a look at the README file for more details on importing it into your hanatrial account and running the application.

Announcement:

SAP Web IDE Layout Editor is now available for trial and productive use, you can try it out by following the details here .

The tool described in this page is an initiative by Lucky Li and not an SAP official product.

----------------------------------------------------------------------------------------------------------------------------

When we develop Fiori application ( other SAPUI5 development also similar), we meet following challenges:

1. We need write View using XML format but without good tool, it is boring and easy make mistake (such as tag not matching...)
2. SAPUI5 have so many properties, it is hard to remember all of them. Especially for some enum property, we first need find out the enum define then know how to set it
3. Data binding syntax is complex, we need write like "{parts:[{path:'birthday/day'},{path:'birthday/month'},{path:'birthday/year'}],  formatter:'my.globalFormatter'}"
4. It is hard to study and understand other's complex view
5. After do some modification, we can't see result immediate. It is hard to test on different device.  And i want to see result immediate after i change some property

In order to make our life easy, recently I spent some effort developed one tool named "Fast Fiori Designer" which can help you

1. Design View easily:  Just select controller/property/aggregation/event/assocation from list, ( so the Enumable property can select from a ComboBox
2. Easily reuse others view by copy/paste
3. Preview it immediately, can choose preview in iPhone / iPad Full Screen / iPad Master page / iPad Slave page model.  Also provide the 'Fast Model' means even you have so many event/data binding, you can see result immediate without the controller.
4. Generate Controller/XMLView source file,  for the data binding also generate the sample demo data
5. Load OData metada, then choose the entity/property/label easily
6. Batch create mode: You first define one template such as one column for a table, then you can select all the properties from the OData entity, then it will create the similar control for you.
7. Create xml fragment, convert controls into fragment, easily preview the fragment content
8. Choose ICON from the SAPUI5 icon library, just like the UI5 icon explore
9. type, format, validation information select
10. Provide several samples

Want to try it? (Please use Chrome Browser, if cant' run, please send me email)

• Inside SAP:  Open https://ldciccw.wdf.sap.corp:44300/sap/bc/ui5_ui5/sap/ZFDSAPUPLOAD/fd_fiori.html?sap-client=715  ( user:  anzeiger, pwd: display)
• For Outside SAP:   https://dl.dropboxusercontent.com/u/250426883/FastDesign/FastDesigner.html

   ( For Chinese if can't access dropbox, please try this:   http://sapui5fastdesign.oss-cn-shanghai.aliyuncs.com/FastDesigner.html

• Run it locally:  Get files from https://www.dropbox.com/s/zkcd4xpsg6sizg9/FastDesigner.zip  or from   http://sapui5fastdesign.oss-cn-shanghai.aliyuncs.com/FastDesigner.zip  and extract it to local directory, then open the FastDesigner.html  (Need add following parameter to your chrome:  --args --disable-web-security  --allow-file-access-from-files,  if you want to run it for different SAPUI5 version, just change the line for location:  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" )

Report Bugs:

1. Just drop Lucky a mail to report the bug
2. As Lucky will keep update the version, so before report a bug please ensure you download the latest version if you run it locally, or clear the browser cache to ensure it is the latest version.
3. The browser console information is very important to find out the reason. Please copy the console log content as text file

It is very easy use. Here i just list some screen snapshot for reference.

Coming soon new features ( After new version come out, i will update this blog):

1. Generate JavaScript code also.
2. Smart data generate ( Help to create sample test data)
3. Export preview result to picture
4. Provide common view/design as template
5. Project level open/save

Any comments/feedback/found some bug, please feel free contact Lucky Li

Design a view: all the enum property can easily choose from list box. And it is very easy to know what is the property biding/real value/formatter...

Smart recommend the candidate:

When add the child for an aggregation, only the valid type can be added. For example, for the sap.m.list, only the class which inherit sap.m.ListItemBase is a valid candidate. Normally, you need first find which control is a valid choice. (if it an interface, then it is more difficult to find out which control implemented this interface, for example when add the child for sap.ui.commons.Toolbar, only the item implemented the interface sap.ui.commons.ToolbarItem is a valid one)

With this tool: You just choose the aggregation node, all the valid candidate is list there, if you want to see the API document, just one click)

Generate XMLView

Generate the Controller (include the event binding/ formatter/ default data binding)

Preview, also provide the navigation tree in the left part, so you can easily see what control is what.

The iPad preview

Want to see how it look like in iPhone? Just choose different preview mode:

Dynamic change the property and see result immediate:

sapui5 have so many controls and one control have a lot of property, normally you need set change source code, rerun the program to see the result. With this tool: when you select one control, all the property will display, you can change it just by click mouse and see result immediate. (So for the enum type property, it can save you a lot of time as normally it take some time to know what was the available enum value)

Want to know UI5 class Hierarchy?  From "Development Assist"-->"UI5 Class Hierarchy", you can see it

When work for one control, want to see the corresponding document? In the view designer, just click the link, it will open the corresponding document.

Updates:

• 2015/08/05:  Update the run file url, as the old dropbox not work
• 2015/05/07:  For the latest OpenUI5 version 1.28.5, the old code will throw exception. I have update the code and now it can work, if you run the local version, please try to download the latest version.

Introduction

In this blog I'll show you how to use the Kapsel Barcode Scanner plugin to scan a code of a given product and search for it in the related collection.

Objective

We are going to develop a SAPUI5 hybrid application from one of the standard templates available in SAP Web IDE. We will use the OData service ZGWSAMPLE_SRV available here for getting Products' information from the backend. This data source is part of the SAP Netweaver Gateway Demo system for which you can request an account simply by following the steps reported at SAP Netweaver Gateway Demo System.We will add some custom code to this app to extend the search bar functionality: a new button will be added aside the search field; by pressing this button you will have the ability to scan the barcode of a product and search for its information in the backend.

When our app will be ready, we will mobilise it using the Hybrid Application Toolkit and the trial HCPms system.

This is our challenge!

Let's get started.

Prerequisites

• SAP Web IDE 1.15 and later (you can register at SAP HANA Cloud Platform to get your development environment)
• Hybrid Application Toolkit 1.8.2+ downloadable from here
• An HCPms account configurable as described here

NOTE: An Android or iOS device is required: emulator is not good for this exercise because it cannot scan the code using the camera.

All the above prerequisites must be properly configured, before moving forward with this guide.

Walkthrough

This is the list of all the steps we'll go through:

1. Create a sample barcode
2. Create a destination in the SAP HANA Cloud Cockpit
3. Create a new app in the HCPms
4. Create a new Kapsel app with SAP Web IDE
5. Add a button to the Master view
6. Add the custom code for the new button
7. Deploy the app with HAT
8. Run the project on a mobile device

Create a sample barcode

Since we want to scan a product barcode in order to test our final application, let's start by creating a sample barcode. You can generate free barcodes from Free Barcode Generator - Create barcodes here.

Select for example to create a QRCode, got on the Text tab and put the string "HT-1011", which is the product code we want to search in the backend. Then click on Create QR Code. On the left side a QR code for that product will appear. You can even download it as a picture if you want.

Create a destination in the SAP HANA Cloud Cockpit

Our barcode is ready; we can start by creating a destination to reach the OData service located at SAP Netweaver Gateway Demo System.

1) Access your HANA Trial environment and create a new destination which points to the ES1 system in the following way

Create a new app in the HCPms

Now let's create a new application in the HCPms system. You can follow this blog to learn how to enable your HCPms environment.

1) Go on https://hcpmsadmin-<your_user>trial.dispatcher.hanatrial.ondemand.com where you need to replace the string "<your_user>" with your user account.

2) Click on Applications

3) Create a new Application with the following parameters and click on Save

4) Click on Configure on the right bottom corner

5) Switch to the Backend tab and specify the Backend URL together with the Authentication Type and the Proxy Type; after this click on Save

6) You should be able to ping the application successfully

Create a new Kapsel app with SAP Web IDE

Now that our connection is in place, let's create the Kapsel application

1) Open SAP Web IDE

2) Create a new SAPUI5 project from the template SAPUI5 Master Detail Kapsel Application

3) Enter a project name (i.e. Products)

4) Define the OData connection information to the ZGWSAMPLE_SRV service

5) Provide the information about the fields you want to see in the application and click on Next

NOTE: It's important, for the goal of this guide, that for the search field you choose ProductId otherwise the final application doesn't work!

6) Click on Finish to complete the wizard

7) You can test the application by running it in the desktop preview mode

8) Right click on the name of the project in SAP Web IDE and choose Project Settings --> Device Configuration. Specify the App Name, the App ID (it needs to match the Application ID used in the HCPms configuration) and all others parameters listed here and then click on Save

Add a button to the Master view

In SAP Web IDE open the Master view (view/Master.view.xml) of the app. Add the following code just after the last "/contentmiddle" tag and save the file

<contentRight><Button id="barcodeButton" icon="sap-icon://bar-code" tooltip="Bar Code Scanner" press="onBarCodeScan"></Button></contentRight>

It should look like this

Add the custom code for the new button

Now open the Master view controller (view/Master.controller.js) and add the following function at the beginning of the file, just after the init function. Save the file

onBarCodeScan: function() {    var that = this;    var code = "";    cordova.plugins.barcodeScanner.scan(          function (result) {              code = result.text;              console.log("This is the code: " + code);              that.getView().byId("searchField").setValue(code);              that.onSearch();          },          function (error) {              alert("Scanning failed: " + error);          }    );
},

It should look like this

Deploy the app with HAT

Deploy the project using Hybrid Application Toolkit.

1) Launch HAT

2) Right click on the name of the project in SAP Web IDE and choose Deploy --> Deploy to local Hybrid Toolkit

3) The app is deployed to your local workstation folder

Run the project on a mobile device

Once your project has been successfully deployed to your local PC you can run it on your device.

1) Go back to SAP Web IDE

2) Select the index.html file of the app, right click on it and choose Run --> Run on --> iOS (or Android) device

3) Once the application starts, provide the credentials for ES1 in the Kapsel Logon.

4) Then create a new passcode or disable it by clicking on the Disable Passcode button and click on Submit

5) Now a new button should be available beside the search bar. Click on this Barcode Scanner button

6) Camera is activated: you can scan the barcode with your device

7) The product is automatically found by the application

Congratulations! You have successfully used the BarcodeScanner Kapsel plugin within your application!

NOTE: it must be said that you can also test this project directly in the SAP Web IDE preview if you have a webcam on your laptop. You just need to check that by right clicking on the name of the project, under Tools --> Preferences and then Hybrid Application Toolkit the Cordova Facade Preview flag is enabled.

When you run the app in the preview mode you can click on the BarcodeScanner button to scan the code by using your laptop camera.

How many times did you feel that we need to improve performance of SPUI5 library? While experts are working on it, and of course it is a huge gallery of components which is not easy to manage and will contribute to initial loading times especially if it is not in cache. But the user will really feel that long waiting time only if the screen is blank or unresponsive for that time duration. This is why we place a loading indicator as soon as the page is hit and then let the SAPUI5 library load at peace while the user patiently watches the spinning indicator.

There has been a lot of solutions in various blogs, I am not sure if I am duplicating this one, but I felt this is the easiest one to implement and is provided by SAP - you just need to place your text and animation.

Your script tag looks like below, just include

data-sap-ui-preload="async"

as below.

<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"  id="sap-ui-bootstrap"  data-sap-ui-preload="async"  data-sap-ui-libs="sap.m,sap.ui.comp,sap.suite.ui.commons,sap.ui.layout,sap.ui.commons"  data-sap-ui-theme="sap_bluecrystal"></script>

Your body looks like below - put a div with id as busyIndicator and your animated gif inside it within img tag.

<body class='sapUiBody' id='content'>  <div id="busyIndicator"><img src="images/spinner.gif"/></div></body>

You can search for loading indicator gif and you will find plenty of beautiful free spinners.

That's it! The gif spinner should display the animation till the library loads completely and is ready for rendering.

SAP Web IDE has included a template which allows you to create a Hybrid Mobile Extension Project.  This feature can be used to mobilize Fiori applications allowing you to utilize the extensibility concept. This concept allows you to modify the workings of an application without actually changing the parent, the SAP delivered, app's code.  In this blog we will walk through the project structure to understand the structure and where modifications could be made.

If you haven't already done so you will first need to enable the HAT plugin and for building projects setup the Hybrid Application Toolkit.  Information regarding these topics can be found in the help and in SAP Web IDE Mobile.  To just enable the template you can simply just enable HAT Plugin by selecting Tools -> Preferences -> Option Plugins and enabling com.sap.webide.hybrid.  Restart the browser after saving your changes.

You can start by creating a new Hybrid Mobile Extension Project by choosing New -> Hybrid Mobile Extension Project.  In the first step choose your Remote system and select the desired app and then choose Next and Finish to complete the process.

The Project Structure

After generation you will notice that the app structure looks similar to a standard Fiori extension app.  In addition, the template has generated a hybrid and parentapp directory.  As normal, the Component.js acts as a Fiori app's main entry point as well as containing any extension declarations.  Taking a look at this file you will notice that the file loads the app to be extended, using the "sap.ui.component.load" call, from the parentapp directory, which contains the entire SAP delivered app within it.  Packing an app with all of the necessary files included in it, enhances the user's experience by improving load time by eliminating the need to for a  data connection to download all of the required files.  Only the actual data sources will be called when the app is loaded.  There's also a feature to update the parentapp's content in the case the SAP Gateway version of the app has been updated.   This can be achieved by right clicking on the project and choosing the same.

The index.html allows us to run the app on a mobile device, on a browser as a stand alone app or within the launchpad sandbox.  What differentiates this file from a non mobile app is the use of the sap-mobile-hybrid.js and the cordova.js.  The cordova.js provides us access to native device features such as the camera as well as the ability to use features provided by SMP/HCPms.  These options are both configured by right clicking on the project and choosing Project Settings -> Device Configuration and then choosing the desired plugin.

On the root level of the hybrid folder you will find the file sap-mobile-hybrid.js.  This file contains a bootStrap function which is called from the index.html handling the main aspects of the initial loading of the app. This function determines, based off of the environment and a set of configurable parameters, how the app is to be ran.  This includes determining if we are running on a desktop vs a device or the companion app as well as the HCPms/SMP configuration functionality.  It also initializes a few objects necessary if the use of SMP/HCPms is desired.  Once the configuration is determined, the file hybrid/odata/hybridodata.js is then loaded.  This file contains helper functions to obtain the appropriate odata service and to handle any authentication method that may be needed.

In the hybrid directory we will also find a few subfolders with the first being kapsel.  Inside this folder you will find the file logon.js.  This file contains all of the necessary code to assist in the use of the kapsel login plugin which allows users to register to HCPms/SMP.  The only necessary step to utilize this plugin is to enable the plug itself in the device configuration of the project, which can be found by right clicking on the project and choosing Project Settings -> Device Configuration.

In the hybrid/odata/hybridodata.js the function "sap.hybrid.initSMPOfflineOData" is defined to initialize the definition of the offline store.  The call to this function originates from the bootstrap function of the sap-mobile-hybrid.js file.  To offline an app, the existence of one or more defining requests is necessary.  A defining request object determines what Collection(s) of an OData service are to be offlined.  For further explanation please visit Getting Started with Kapsel - Part 15 -- Offline OData (New in SP05).  This object can be defined in the SAP delivered app manifest.json or within the hybrid extension's app manifest.json.  This file is know as the app description and contains many other important declarations such as version and configuration information.  By default the code in the bootStrap function of sap-mobile-hybrid.js looks in the parentapp's manifest, but this can be easily changed to the extension app.  This would be declared in the manifest in the following manner...

"sap.app":{     ...     "offline": true
},
"sap.mobile": {    "_version": "1.1.0",    "definingRequests": {            "WorklistCollectionDr" : {                "dataSource": "SRA008_SRV" ,                "path": "/WorklistCollection"            }        }  }

For an expanded app descriptor example please see Descriptor for Applications, Components, and Libraries

Also take note that the function sap.hybrid.initSMPOfflineOData in the hybridodata.js is expecting that the Cordova device and network are enabled in addition to the Kapsel odata.  

The coding that handles the management of the offline store is defined in hybrid/odata/offlinestore.js.  When using offline functionality, the syncing of changes occurs by flushing the local changes to the backend and then refreshing the backend changes to the offline store.  This can be achieved by adding a control to your app to call the function pushAppOfflineStore which exists in the offlinestore.js file. 

To proceed with making modifications to the app, choose the menu option File -> New -> Extension and follow the guided process.  If you are new to this concept please visit SAP Web IDE - Extend Applications.

Regards,

Jamie Cawley

Links

• app repository
• app in action
• zipped app

Introduction

Over the weekend I've been tinkering around to create a small SAPUI5 "getting started" app which is based on the new SAPUI5 tutorials (released with 1.30). It is a bit more than a "Hello-World" but not as detailed as the "Walkthrough" tutorial.

The app has just one page and uses a JSON model and was build with the SAP Web IDE.

I am sure you have built lots of Sales Orders, Employees, Invoices and whatever apps. Business apps can be tedious, so I thought a more fun and "useful" example application would make it easier for you get started.

So why not Juck Norris and some nerdy jokes? And yes! There is an API for that! And when you hear API - yes I use the HCP destination service as a proxy.

The app structure

If you look at the repository you will think "WHAAAT??? So much files for such a small app???".

But that was intentional! The app is indeed small, but has a very good structure:

• component based
• view & controller folders
• app descriptor for routing
• not found view
• translations
• styles

Head over to the app's repository, explore the source code and find information about how to deploy it to your SAP Web IDE.

It gives you a good starting point if you want to extend it. I must admit there are no tests for this small app. When preparing this app I had the upcoming Innojam in Berlin on my mind.

Pictures

The app:

The folder structure:

Start the app:

Summary

So happy SAPUI5 coding and enjoy the Juck Norris Jokes!

Background Info: The idea for this app is based on the fact that our Jenkins CI somehow also has a "Chuck Norris Jokes plugin".

As part of my research in the area of Intelligent User Interfaces, Here I would like to share a simple implementation of providing more flexible user experience with SAPUI5 application.

Every one of you would have definitely noticed the SAPUI5 way of footer which contains the buttons at the right hand bottom as per the left to right configuration. The same gets reverse when it comes to right to left, this can be controlled in the UI5 applications using the url parameter sap-ui-rtl=true for right to left and false for left to right.

Keeping the RTL/LTR aside, Thinking can this configuration be more personalized and brought closer to the behavior of the user for example if this configuration can be applied based on which hand the user is actually holding the device. Consider user who is using his iPad/Tablet or any other bigger screen device for his business applications and how much of the operations s/he could perform using only one hand.  Wouldn’t it be nice to understand which hand the user is holding the device to render the UI or keep it more flexible so that the UI Elements are always reachable over his/her finger tips? Here is the simple approach.

First thing how do you identify in which hand the user is holding the device? My approach, whenever user holds any device in single hand, s/he tend to hold it tilted towards his holding hand which makes the user to balance the device having the weight towards the hand. The common practice:

In other way if the user holds the device tilted in the opposite direction, user tend to drop the device due to imbalance of weight.

Having this as a based approach to identity users practice of holding the device, first step is to identify in which direction the device is been tilted.

Let’s get in to device orientation to understand this little deeper.

X, Y, Z are the three axis of your device and Alpha, Beta, Gamma are the three orientation movement and which will clearly specify in which direction the device is been tilted / rotated / placed. In our case the main focus is only on the gamma (y) axis rotation. The value of the gamma will be +ve if the device is titled towards right and –ve if it’s tilted left which means when the gamma value is +ve user is holding the device in right hand and when –ve user holding the device in left hand.

So now how do we find the gamma value in UI5 application, it’s simple. We can use the device orientation API of browser to get this. Here is a sample UI5 application with buttons on the footer which gets closer to your thumb automatically based on the hand you use.

Home.view.xml

<core:View controllerName="view.Home" xmlns:core="sap.ui.core" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"    xmlns="sap.m">    <Page title="Title">        <content></content>        <footer>            <OverflowToolbar id="otbFooter">                <ToolbarSpacer/>                <Button type="Accept" text="Accept">                    <layoutData><OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>                </Button>                <Button type="Reject" text="Reject">                    <layoutData><OverflowToolbarLayoutData moveToOverflow="false" /></layoutData>                </Button>             </OverflowToolbar>        </footer>    </Page></core:View>

Home.controller.js

sap.ui.controller("view.Home", {    /**     * Called when a controller is instantiated and its View controls (if available) are already created.     * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.     * @memberOf view.Home     */    onInit: function() {        if (window.DeviceOrientationEvent) {            window.addEventListener("deviceorientation", $.proxy(function(event) {                if(event.gamma > 5) {                    //Right Hand                    var f = this.getView().byId("otbFooter");                    if(f.getContent()[2].getId() == "__spacer0") {                        var spacer = f.getContent()[2];                        var button1 = f.getContent()[0];                        var button2 = f.getContent()[1];                        f.removeAllContent();                        f.addContent(spacer);                        f.addContent(button1);                        f.addContent(button2); }                } else if(event.gamma < -5) {                    //Left Hand                    var f = this.getView().byId("otbFooter");                    if(f.getContent()[0].getId() == "__spacer0") {                        var spacer = f.getContent()[0];                        f.removeContent(0);                        f.addContent(spacer);                    }                }            },this));        } else {            alert("Sorry, your browser doesn't support Device Orientation");        }    }
});

Here is the output. Won't you feel excited when the UI elements gets closer to your finger tips?

The live application link : https://iuibehavior-p1940680127trial.dispatcher.hanatrial.ondemand.com/ Open this link from your device and feel the Flexible User Experience.

Thank you for reading . Feel free to comment and discuss about UI Adaptation, Intelligent UIs.

Kishore Kumar

Extending a control in the SAPUI5 library: sap.ui.model.json.JSONModel

(Written based on version 1.28 of SAPUI5)

On a recent project building SAPUI5 application to be hosted on HCP (HANA Cloud Platform) we had a requirement to interface with RESTful services exposed by PI. Being a Gateway and OData girl myself this was a new challenge. “At least a REST service is better than a SOAP service”, I thought. “But how can I load the data in, in a neat and tidy way, like I would with a OData service?” The answer: extend the standard JSONModel, and bend it to my will!

Requirements

1. To be able to load data from a single service into the model without overwriting everything already in it
   1. The “loadData” function already available in the JSONModel could not be used to fulfil this requirement as it sets the response of the request at the root of the model, overwriting any existing data
2. To load data onto a specified path of the model, in order to allow binding in a view to the correct path before the data is loaded in
3. To be able to specify whether the structure of the data loaded in should be an array or not
   1. An oddity of PI, or more likely the underlying services it is communicating with, seems to be that if a request for a set of data only finds a single item, it will return an object, rather than an array with one object in it
4. To be able to bind only specific properties of the response to the model
   1. E.g. the response data is in the following structure, we only want to bind to “Items” node to our model
      1. “d” : { “results” : { “Items” : [ “a” :  ] } }

Overall, I wanted to make my JSONModel “feel” more like an ODataModel.

Solution

1. Extend the JSONModel control
2. On instantiation of the model (in the constructor function) include a service URL parameter on which to base all calls subsequently made against the model
3. Add a new function within the model for loading the data
4. Add functions to the model to allow “create”, “update” and “remove”

In order to write the code around this I referred to the ODataModel code base, and stole relevant chunks where rewriting them would have been unnecessary.

As the code would be useful across many applications I hosted it on HCP as an HTML5 application called “shared”, even though it is simply a collection of files rather than an executable application. In this way I can now access the extended JSONModel code from other applications hosted on the same HCP by adding a new destination, of type “application”, into the neo-app.json file, and adding a new resource root into the index file.

Please see my GitHub repository, sapui5-shared, for the source code of my extended JSONModel.

Example index.html resource root

<!DOCTYPE HTML><html>    <head>        <meta http-equiv="X-UA-Compatible" content="IE=edge" />        <meta charset="UTF-8"><title>Bluefin Application One</title>        <script id="sap-ui-bootstrap"
src="resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
" bluefin.application1": "./",
"bluefin.shared": "./shared"            }'></script><script>            sap.ui.getCore().attachInit(function() {                new sap.ui.core.ComponentContainer({
height : "100%",
name : "bluefin.application1"
}).placeAt("content");            });        </script>    </head>    <body class="sapUiBody" id="content">    </body></html>

Example neo-app.json file

{
"welcomeFile": "index.html",  "routes": [    {
"path": "/resources",
"target": {
"type": "service",
"name": "sapui5",
"entryPath": "/resources"      },
"description": "SAPUI5 Resources"    },    {
"path" : "/shared",
"target" : {
"type" : "application",
"name" : "shared"      },
"description" : "Shared Utilities"    },    {
"path": "/Search",
"target": {
"type": "destination",
"name": "myHCPDestination",
"entryPath" : "/Search"      },
"description": "Search UI5 destination"    }  ]
}

Example code-snippet for use of bluefin.shared.model.JSONModel.loadDataFromPath

jQuery.sap.require("bluefin.shared.model.JSONModel");
var oMyModel = new bluefin.shared.model.JSONModel("/Search");
// Read the booking data from the service

oMyModel.loadDataFromPath("/Objects/Bookings"
            {
sModelPath : "/Bookings",
aResponseProperty : [ "d", "results"],
bReturnArray : true                 },            null,            false        );
// Array of data can now be found on the model
var aBookings = oMyModel.getProperty("/Bookings");

bluefin.shared.model.JSONModel

The code for the extended JSON Model can be found in the model folder of my sapui5-shared repository.

Recently in order to resolve some internal incidents, I have the requirement to monitor the control registration and deregistration, that is, I need to know when and where the control is created and destructed. If you don't know where to set breakpoint to achieve it, just follow me

For example, I have a list and all the information I have is its id "list",  as defined in xml view:

1. Open Chrome development tool, get the core instance via sap.ui.getCore().

2. There is one function byId available on this core instance, type "core.byId" in console and put the mouse on the returned "function anonymous()".

Now you can click it to see detail:

3. Once clicked, the implementation will be automatically opened. The main logic is in line 41. Till now we cannot know much about it. So set a breakpoint on line 41.

4. Type "core.byId("list")" in console and press enter key, breakpoint triggered. Our hard coded argument "list" is passed in.

Now we reached Core.js which contains the implementation of byId function.

And the byId function just simply return the corresponding entry in a big object "this.mElements" if there exists such one.

By going through this file soon I find what I am looking for.

The control registration is just to add a key ( control id ) - value ( control instance ) pair to the central container "this.mElements". This could be found in line 1921.

The control deregistration is just to remove the entry from container - line 1930.

5. When I set the breakpoint in line 1921 trying to capture the time when the list instance is created. What annoying me is the breakpoint is triggered again and again since there is so many controls in my ui.

Then I just wrote a small pieces of code below:

And now it works like a charm. The breakpoint is triggered only once for the very list creation, the runtime id of list is "__xmlview6--list".

Then through callstack I get to know that the list creation is triggered by the successfully load and parse of the xml view where the list is defined.

I would find the source code of xml view which is to be parsed by XMLTemplateProcessor, which is exactly the same as the one in my IDE.

You can also use the same approach to observe the control deregistration timeslot:

Hope this small tip can help you learn control life-cycle knowledge by debugging yourself

Hi,

SAP Web IDE has been around for over year now and is maturing and evolving at an amazing pace.

We originally posted video tutorials for the public beta release back in June 2014 so obviously these are now a little dated - however in between SPS releases of SAP HANA we've managed to refresh the video series based on version SAP Web IDE 1.15.

One of the main areas of feedback we received for the original videos was that you wanted us to use publicly available back end systems - so you could then follow along yourselves using the free developer trial. So in the new videos we show how to use public OData sources on OData.org as well as use local metadata xml files along with the excellent "Mock Data" capability of SAP Web IDE. We also show how to use SAP Web IDE along with SAP HANA.

For the full SAP Web IDE playlist on YouTube - please follow this link: http://bit.ly/SAPWebIDE

Here are embedded links to the new videos:

SAP HANA Academy - SAP Web IDE: Getting Started [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Create an OData Destination [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Create a Project from Template [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Run a Project [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Modify a Project [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Deploy a Project to HCP [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Create Project from Metadata [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Run with Mock Data [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Layout Editor [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Code Completion [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Quick Start [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Overview [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Using a SAP HANA OData Service [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Deploy Project to SAP HANA [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Full URL Destination [1.15] - YouTube

SAP HANA Academy - SAP Web IDE: Deploy to HCP and Git Overview [1.15] - YouTube

We hope these help you get started with SAP Web IDE - or maybe discover something new if you're already familiar with a SAP Web IDE.

Please watch this space as more videos are planned for the near future - especially once SAP Web IDE 1.16 is released!

Philip

Onboarding

1. If you don’t have an SCN or SAP Hana trial user, register for a developer account on SAP HANA Cloud Platform:https://hanatrial.ondemand.com
2. Log on with your user.
3. Forgot your password? -> https://www.sdn.sap.com/irj/scn/forgotpassword

Open SAP Web IDE

1. In the SAP HANA Cloud cockpit, select Subscriptions.
2. Under the Application column, click on the webide link.
3. In the Active Version section, click on the Application URL link.

Create a Project from a Sample Application

1. From the menu bar, select File > New > Project from Sample Application.
2. Select one of the SAP Fiori reference applications, for example Shop and click Next.
3. After reading the evaluation license agreement select the I agree checkbox and click Finish. The nw.epm.refapps.ext.shop project is generated in your workspace.
4. Click Run to run the project.
5. In the Choose file to run dialog, select testFLPService.html and click OK.

The SAP Fiori Launchpad is displayed.

     6.  Click the Shop tile to open your application.
          The application is fully operational, based on mock data.

     7.  Now you can return to SAP Web IDE and explore the application artifacts to learn the best practices for creating sample app

[ADVANCED] Connect SAP Web IDE to a Remote Back End System

To connect SAP Web IDE to a remote back end system, follow the instructions in the blog below:

http://scn.sap.com/community/developer-center/front-end/blog/2014/06/22/how-to-configure-an-external-gw-system-with-sap-river-rde

  Lidor

Pre-requisites

1.sapui5 framework

2.sap.makit library loaded.

Steps

   1.First step is to include sap.makit library in index.html file

    2.Create sap.makit.Chart control and give properties.

In my spare time I would like to use Sublime Text to write some small pieces of HTML5 code. Every time after I finish the edit, I have to manually open the html page via Chrome manually, which is very inconvenient. Thanks to the great flexibility of Sublime Text, we can create our own plugin with minor effort to make things done automatically:

Edit html page in Sublime Text -> click some short key defined by ourselves -> html page is opened by Chrome

1. Open Sublime Text, menu Tools->New Plugins, then a python file is automatically created for us as below.

Then paste the following simple python source code:

import sublime, sublime_plugin
import webbrowser
class OpenBrowserCommand(sublime_plugin.TextCommand):    def run(self,edit):        window = sublime.active_window()        window.run_command('save')        url = 'file://' + self.view.file_name()        webbrowser.open_new(url)

The logic is quite easy: first save the currently edited file, get its path and open it via the default browser installed in your laptop.

Save it into <Sublime Text installation folder>/Packages/User. Rename the file as you wish, for example "open_browser.py".

2. Tools->Command Palette, then click "Preferences: Key Bindings - User":

paste the following source code:

[{ "keys": ["ctrl+shift+b"], "command": "open_browser" }]

it means you tell Sublime Text to execute your plugin "open_browser" when the combination key "ctrl+shift+b" is pressed.

Now it is done. After you press the keys you configured, the default browser will be opened by your plugin. Enjoy!

Introduction

This post will walk you through creating a custom MessageParser using a sample scenario for an example in which it could be used. The entire code for the working application created in this post can be found here: pritin-tyagaraj/ui5-message-parser · GitHub

Background

It is fair to say that most UI5 applications have a Netweaver Gateway/HANA XSOData service connecting it to the backend, and thus use the ODataModel of the UI5 framework. The OData protocol defines exactly how data should be passed between the UI and the Gateway service and as a result, the framework does a lot of tasks that your application would otherwise have had to do. These tasks include taking care of paging (using $top and $count) for controls that use list bindings, converting the Filter objects you apply on list bindings to equivalent $filter strings and converting dates returned by the OData service to Javascript date objects to name a few.

One more important thing it does, is take care of handling messages (success/error/information) returned by the server and convert them into appropriate UI5 objects which can then be used by your application (for example, by an sap.m.MessagePopover control instance). It is able to do this without you writing any application code, because it knows (thanks to the OData protocol that is being followed) how exactly the server's response will be structured and where within it to look for messages.

If you've built an application that uses the ODataModel - even without code to explicitly handle messages - you can still already see the messages that the framework is automagically creating by executing the following snippet in your console.

sap.ui.getCore().getMessageManager().getMessageModel().getData()

But what happens when you are not using an OData service? What if it's a HANA XS service or some other service that does not follow the OData protocol? Here is where things get interesting - the framework is unable to understand the server's response because it does not follow a protocol that UI5 understands.

Enter, stage left - sap.ui.core.message.MessageParser

To solve this problem in a neat way, we must implement the MessageParser interface that the framework provides. This lets us write code to specify how to extract messages from the server's response. Before jumping into sample code however, let's understand the different entities that are involved in getting custom message parsing to work in our application. The following diagram gives a high level overview of how the various pieces fit together. As we continue reading about the roles that each of these boxes plays, the diagram will become easier to comprehend.

Our sample application

Defining the protocol

So we've decided to not use the OData protocol, but we still need to stick to some protocol! Let's make up a protocol (as is common to do within non-OData projects) and decide that the server's response must always have a structure similar to the following:

So our protocol requires any response from our server to be a JSON object with a 'data' node in the response, and a separate node called 'messages', which should be an array of objects - each object representing one message.

Creating the CustomMessageParser

Since we have now defined a protocol for our application to follow, we can already write our own implementation of a MessageParser.

This parse() method is called from our custom model (we'll see this next), and gets the server's response as an argument. Since we know that the response will have a node called 'messages' within it, we loop through it and create instances of sap.ui.core.message.Message (Step #2 in the overview diagram).

Once we have an array of all sap.ui.core.message.Message instances, we fire the messageChange event (Step #3) to which the standard MessageManager class will react and in response keep its MessageModel in sync. The MessageManager is instantiated in our view's controller, and our sap.m.MessagePopover control will be bound to the MessageManager's model. We will see both of these towards the end of this post.

Creating a custom model

We call the parse() method of our very own MessageParser from within the 'Message Processor', which as we saw a while back is the entity that is actually making the network request to fetch data. Since the ODataModel already ships with a powerful message parser, let's extend the JSONModel with a 'read' method similar to the ODataModel's to demonstrate where the call MessageParser is plugged in.

Once our method fetches data from the server (in our example we just fetch it from a file), it passes the response to the parse() method of the MessageParser (Step #1) to extract any messages that the response may contain. Then, it goes on to update its own internal structures to contain the actual data that the server returned. This can then be bound to UI controls via data binding.

Controller

In the view's controller, we trigger the read() method of our custom model to trigger (OK, "simulate") a network operation which retrieves a JSON object from the server. The method is expected to place the received data in the '/Customers' path; to which the sap.m.List control in our view will be bound.

Apart from triggering the read, we also create an instance of the standard sap.ui.core.message.MessageManager class. Once we register our custom model (a.k.a "the message processor") with this MessageManager instance, it will react to any messageChange events that our parser fires on the model (Step #4)

Showing messages on the UI

With everything we've looked at so far, we now have a MessageManager which contains a MessageModel - which in turn contains all the messages that we've received from our server. We now use a suitable control which can be bound (via a ListBinding) to the MessageModel. The sap.m library has a control specifically built for showing messages, so we use it - the sap.m.MessagePopover control.

End result

What we get will this work (which is by no means "just a few lines of code") and this exact output could have been achieved with much fewer lines of code. However, this is a neat and more importantly "scalable" way to handle messages when using protocols other than OData in your project - in the sense that even in a project which has a complex protocol being followed, this approach will work well and the developed code will be easy to maintain.

Hope you enjoyed reading this writeup! The source code for a working example can be found at pritin-tyagaraj/ui5-message-parser · GitHub. Your feedback is most welcome in the comments section below.

This blog is written based on Chrome 45.0.2454.85 m.

In HTML5 there is one additional attribute available for tag a, the "download". By clicking on the "a" tag with "download" attribute, you can directly get download operation performed. See the simple example below:

Click Save hyperlink, the download is executed immediately and I have a downloaded file with correct name and content specified in the example.

This useful attribute could help us to finish some task without intensive programming. For example, I need to get the file list of a given folder in my laptop via JavaScript. Here below is how to achieve it:

1. Create a simple html page with source code below and open it via Chrome.

2. Open Chrome development tool, type the command like below. There is a notification poped up by Chrome, asking you if you allow the file download. Click ok. Then a html file is automatically downloaded by Chrome.

Open the html source code and compare its content with the actual files in your local folder. They are exactly matched.