SAP is investing heavily in marketing the Fiori for iOS and the SDK. In case you are slightly interested in Fiori and UX in general in SAP, for sure you heard a lot about the SDK. 2 ½ years after the announcement the Fiori Design guidelines include an iOS section, there are SAP Developers tutorials, a special iPad app for learning its usage is available, even Apple has set up a Fiori page. Current version of the SDK is 3.0, and now there is even an Android version available (with much less marketing activities).
If you want to write an app with the SDK, make sure you have an iPad. The online SDK documentation is available too, but offers less benefit than the Fiori Mentor app. In case you are wondering why the SDK documentation is not good enough: I suggest you take a look at it. For instance, the documentation for the map component.
As you can see, you see … not much.
No images, therefore: good luck in finding out what the UI control should look like. A look at the page source code reveals that the images are only visible to SAP employees with access to SAP’s intranet.
Server github.wdf.sap.corp is not accessible from the internet. In case you are wondering how to find the SDK documentation: SAP Cloud Platform SDK for iOS Assistant contains a link in its help to the API. And of course: Google. So yes, made available to the interested developer. No S-, I- or D-User required.
In case you are one of the few that develop apps using Fiori for iOS SDK, ask your manager to get an iPad. The public available SDK documentation is already not easily consumable (use the Fiori Mentor app), does not include complete sample code and comes with missing images.
SAP is now pushing the intelligent enterprise. Let’s hope that it will be intelligent enough to test if the public available documentation is complete.
SAP NetWeaver comes with its own solution to prevent clickjacking for its most relevant UI frameworks. For more information about this protection, see the corresponding SAP Notes.
Check if clickjacking protection service is enabled or disabled. It is disabled, if no record with ENTRY_TYPE=30 is in the table, or if the table is empty.
Table name: HTTP_WHITELIST
Execute
Result
By default, no values are in the table and the service is not enabled. For data that needs to be inserted into table HTTP_WHITELIST, see SAP Note 2142551. Creating an entry type with vale 30 activates the whitelist.
Transaction: SE16
Select F5 or click on the new entry icon.
Insert data. See links below for additional information on possible values.
Click save to persist the entry in the table.
Afterwards, the table will contain one record. As the record has value 30 for column ENTRY_TYPE, the clickjacking protection service is enabled.
Activate ICF whitelist service
Adding a record activates the service, but to make apps working, additional configuration steps must be taken. For instance, accessing now a WDA app (e.g. SAML2) will resolve in a HTTP 500 internal server error. This is caused by having the clickjacking protection activated, but not the whitelist service.
To solve the HTTP 500 error, you need to activate the ICF whitelist service.
Transaction SICF_INST
Technical name: UICS_BASIC
Execute. This will activate the ICF node
/sap/public/bc/uics/whitelist
Result
After enabling the service and the ICF node, the above WDA app will open in the browser.
Old habits are not easily dying and replaced by best practices and general recommendations. In the early days, when UI5 started to gain traction, people discovered it, tried it out, wrote apps, made them somehow work. Everybody was learning, and things we can do today were not possible or known then. Changes to the documentation, API and recommendations are simply the result of lessons learned.
As UI5 apps are based around a model, its data, representation and manipulation, a lot of questions around UI5 development are about the model: how to access data, change, update or delete it. A good thing of UI5 is that it is following semantic versioning, and code written for UI5 1.1x or 1.2x will still work with latest versions like 1.5x. It doesn’t mean that you, as a developer, should simply copy & paste example code found somewhere.
Example
After loading the model, be it JSON or OData, you may have to access a specific property in you code. What you can find in the Internet is code like:
oData
var oData = this.getView().getModel().oData;
var firstname oModel.getModel().oData[entity].firstname;
var name = oData[entity].name;
JSON
var oData = this.getView().getModel(“device”).oData;
var osname = oModel.oData.os.name;
var osname = this.getView().getModel().getData().os.name;
First line will give you the model data object, 2nd and 3rd line the property osname of the model. The 3rd line is partly correct, as the access to the data is done through a method, but access to property name is done directly. You can work with the data object now directly, but you shouldn’t. What you want is not to work with the raw data that defines your model, but with properties.
Use access methods
Data binding is important when developing an UI5 app. You update properties, and you want to have the UI elements automatically be updated too. When accessing the properties directly, you have to check if the change is correctly propagated. Using access methods, UI5 will for sure take care of this. The method to access properties of your data model are getData, getProperty or getObject. Applying this to above code:
JSON
var oData = this.getView().getModel().getData();
var osname = this.getView().getModel(“device”).getProperty(“/os/name”);
OData
var entity = this.getView().getModel().getObject("/"+key);
var property = this.getView().getModel().getProperty("/"+key+"/Depth");
This is now only using the methods to access data. To alter the property, use the setProperty method.
The above examples may not be perfect. They show that UI5 offers methods to access model data. Using these methods your code will continue to work in the future and is guaranteed to work in future releases of UI5. Direct access to the model data is done at your own risk. In case you work on a UI5 app, use the access methods. If you work on an older app that uses direct access to the model, try to refactor the app. The change from oModel.oData to oModel.getData() is as simple as executing a find and replace.
Connectivity between SAP Cloud Platform and an on premise SAP NetWeaver system is normally achieved via SAP Cloud Connector. A nice feature depending on this is the remote connection of SAP Web IDE to an on premise ABAP system. The feature allows to easily load apps from the ABAP system and change or extend them from everywhere.
For this feature to work, some ICF services must be active on the ABAP system and remote access enabled on SCC. If not, Web IDE cannot “talk” to NW ABAP. Some possible errors and solutions regarding the setup are shown in this blog.
Scenario
A NetWeaver ABAP system with Fiori apps is available and the SAP Cloud Connector is configured to expose the system to SAP Cloud. I am using the SAP NetWeaver ABAP 7.51 Developer Edition for the scenario.
In the destination section of SCP, the SCC is shown as connected and the destination NPL is configured and working. A connection tests gives back a successful message: SCP <–> SCC <–> NW works.
Problem
A developer tries to extend a Fiori app. In Web IDE, the project wizard for an extension project is used.
After selecting the on premise system destination, an error message is displayed. The actual error message can differ. Sometimes you see an informative error message or just some red text or maybe nothing.
Error messages
In all cases, you can check the log of SCC and see a detailed information on the error.
The error message is:
Access denied to /sap/bc/adt/discovery for virtual host npl:443
Solution
The ICF service /sap/bc/adt/discovery is not accessible. This can be because the user does not have the right permissions, or the service is not active in the NW system, or SCC is not exposing the service.
Alternative A: SCC not exposing service
Adding a service in SCC will only expose the exact path, not the sub path. Either you add all paths exactly in the resource list, or change the access policy to accept sub-paths too.
Root cause: Path only, excluding sub-paths.
Solution: Change this to will allow Web IDE to access the resource.
Alternative B: ICF service not active
In the NW ABAP system, got to transaction SICF and check node /sap/bc/adt. This node must be activated. By default, this node is deactivated and must be activated by Basis.
Root cause: Service deactivated
Solution: Activate node adt. Right click and select Activate Service.
Alternative C: Missing authorization
Check with SU53 and SAP Help what is missing and assign the right permissions to your user.
Result
After applying the correct solution, the developer can use the extension project wizard in SAP Web IDE to load available applications.
It happened. You do not remember anymore the password created by SAP Web Dispatcher (WD) during bootstrap operation. While this is not bad (who can remember a password like aR$#¨%_09fms!” anyway?) and normally your browser safes it for you (hm, maybe not so good) or your password safe (better). But the password is gone, you cannot log on anymore to WD admin interface. No worries, if you have access to the computer where WD is running, you can either
Get the icmauth.txt file and try to hack the password or
Create a new password for your user.
I prefer option b.
The documentation at SAP Help for this gives you some options, like recreate the configuration (bootstrap) and you’ll get a new password for the icmadm user.
The online documentation for this section only mentions icmon, but for Web Dispatcher you have to use wdispmon. The authors explain this at the parent page of the topic and justify it that this makes things easier. I am not sure to whom, but definitely not for the person reading the guide, as you have to read the parent page to find out why icmon is not available for WD. Note: the page is for WD and still the documentation is using commands for ICM for NetWeaver ABAP #yay.
Content of the icmauth.txt file looks like:
# Authentication file for ICM and SAP Web Dispatcher authentication
To change the password of the user icmadm you have to use the wdispmon command with the –a flag. Also provide the path to the WD profile file.
Command: wsdispmon –a pf=sapwebdisp.pfl
Enter c to change the password of an existing user.
Inform the new password. As of now, the new password will not be available to WD, as it is not saved to icmauth.txt. To persist the new password you have to save it. To do so, select s from the menu.
Do not worry, a copy of the old file will be created (in case your co-worker still has the old password). With this done, you can exit the program. Select q from the menu.
(Not sure if you have to restart WD, but I did.) Now you can log on using the new password to WD. Access your WD admin page and log on using icmadm and the new password.
I was preparing a demo showing how to visualize data from an IoT service using SAP UI5 VisFrame charts. To play around with VizFrame, I used the sample from SAPUI5 SDK. It was working perfectly on the online version, but while running the UI5 app and Chrome, I got an error message.
Googling for the error message revealed that with Chrome 50 a known error exists which makes it impossible to use a VizFrame chart. Luckily I found the solution on SCN. All it takes is to implement the function as a prototype and the chart will work.
Now, this works magically when I access the online SDK, but is broken when using it locally. I guess SAP did some magic either in the SDK or in the UI5 library that my SAPUI5 version does not include. Either way, the above trick solves the problem.
Lately I was installing the latest version of the SMP3 SDK SP10 PL3 and with it the Fiori client. While trying to create a new custom Fiori client app, I got an error. Gradle wasn`t able to download a dependency from maven.
Now, you never know for sure if this may now happening because of the new SDK version or because of another error. I checked the maven site and the POM was there, I could even download it via the browser. I use from time to time my own repository manager (artifactory). First I checked if my settings.xml can be blamed. Settings.xml was empty, so all requests done by maven will go directly. But this triggered something in my head. The connection I was using to connect to the internet was not without a proxy. Not a proxy you had to insert into your computer configuration, but it was there. So I switched to LTE via my smartphone and … it worked. Cordova compiled now ran without an error.
Lesson learned: be prepared for strange errors when a proxy is between you and the internet.
Now the SDK is using the 64 bit version of the SDK.
Result
Node-gyp is compiling files.
In the end, you should see something like that:
Possible errors
Error: mocha\bin does not exist
Solution: try a npm cache clear, delete the local node_modules directory and run npm install again.
Error: Could not load the Visual C++ component
In case you did not point the SDK to use the right MSFT compiler, you get this error message:
Solution: Run from within cmd: call “C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd” /Release /x64
Error: EPERM with npm-cache
Solution: run npm install again. It should now pass this error. You may have to delete the lock file.
3. Initialize the database
Only needed after initial installation of BUILD.
Run the commands from the server directory.
Create schema
Command: node initSchema.js
The above command will create a DB schema called norman. Taking a look into the config file, reveals that there is a section for db. The defines a database named norman.
SAP showed a demo of BUILD at its TechEd keynote at Las Vegas. The 1st time I tried to install BUILD on my laptop was shortly after it was launched and I was still in the hospital; and I failed getting it working. Afterwards I mainly interacted with BUILD using SAP`s internal system. The installation is not an easy next, next, next wizard (yet), but as BUILD is a really impressive tool for UX, AND OPEN SOURCE, I believe nobody should be left out of using BUILD just because the installation isn`t doable by everyone. So I created this blog showing how I installed BUILD on my Windows 7 64bit laptop. I hope it helps people getting started with exploring the powerful features of BUILD.
The GitHub project outlines the prerequisites as well as the actual installation steps. Meeting the prerequisites is a must, and not so easy, as you`ll need to have the right versions made available for build to work.
Let me show you how I did make this work on a Windows 7 64bit laptop. Installing git is the easiest one. Just download it from git-scm.org. The others a little bit more complicated. Let me detail the steps here for each component.
You have basically two alternatives to install Node.js in version 0.10.38. Either you download it make sure that your cmd is using this version (PATH variable), or you activate the right version for your current session.
Download
There are several versions available for download from nodejs.org. You can opt to download the installer for a specific version or to download the executable. The URL to download the files for 0.10.38 is: https://nodejs.org/dist/v0.10.38/
To download just node.exe, download it from there and save it into a directory. Run node.exe from there and check that it is the right version number
Test
Command: node.exe –version
Node package manager
This is the alternative you should prefer. Easier to use, allows to have several node version in the system and done by npm. To do so, first install nvm. On Windows, you`ll have to use nvmw.
Command: npm install –g nvmw
Now you can use nvmw to install a specific version of node.
Command: nvmw install v0.10.38
Activate node.js 0.10.38
Command: nvmw use v0.10.38
Test
To see if 0.10.38 is now activated, run node with the version parameter
Command: node –version
Python
Download Python 2.7 installer and install python. Ensure that the python executable binary is in the path.
Select the components you want to install. Best is to leave the default.
This starts the installation and download of necessary files.
Result: SDK is installed.
Afterwards, some strange Help Library Manager pops up and starts to fetch things from the Internet. Just let it finish and then exit it.
Possible error
Solution
“To resolve this issue, you must uninstall all versions of the Visual C++ 2010 Redistributable before installing the Windows 7 SDK. Checking the list of installed programs reveals that I do have this library installed.” Microsoft
Uninstall these components
Install mongo db
Download binary zip from Mongo DB. Version: mongodb-win32-x86_64-2008plus-2.6.11. Follow install instructions from Mongo DB.
Extract zip file to folder: C:\dev\tools\mongodb-2.6.11
Create db data folder data\db
Start mongo db from bin directory. Start mongo db and give path of database directory as parameter:
I use cookies to ensure that I can give you the best experience on my personal website. If you continue to use this site I will assume that you are happy with it.Ok
