Category Archives: Fiori

How to publish an iOS App from Microsoft AppCenter to Apple App Store Connect

Posted on by

In this blog I will detail how you use Microsoft’s AppCenter to build an iOS app und publish it directly to iTunes Connect. This allows you to decouple the building, testing and distribution process from the developers. The developer only has to push the app to the repository (I am using Azure DevOps) and AppCenter takes care of the rest.

The steps to do so are:

  1. Create app project
  2. Configure build
  3. Add signing certificates
  4. Configure distribution to iTunes Connect

Create App Project

Open AppCenter and create a new project.

You can add AppCenter features to you app, but it’s optional. I already have a running app that I just want to build and distribute. Next step is to configure the build.

Build

Select the repository where the source code is hosted. I use Azure DevOps (free tier). Unfortunately, GitLab is not listed and in the free tier I am using it is not possible to add self-hosted git repositories.

AppCenter will connect to Azure DevOps via SSO and list the available projects.

This adds the repository to the build configuration. You’ll see the branches and last commit message.

To configure the build, click on the configuration option for the branch. The option will only appear when you hover with your mouse over the branch.

AppCenter will scan the project and find the available XCode settings.

You can configure the XCode version to be used for the build. This is very useful when you are using external libraries that do not work with newer XCode versions. For instance, the Fiori libraries included in my project were not released for 10.2.1 and the newer Swift version that comes with it. Therefore, the build exited with an error. Until SAP released an updated version of Fiori for iOS, I had to use XCode 10.2.

AppCenter offers options to automatically increase the build number, or run your XCTests.

Sign build

To be able to send the app to iTunes, you must sign the build using your certificate and provisioning profile. I wrote two blogs on how to get these:

When you have these available, you can start configuring the app signing. You upload the files and provide needed credentials for your private key.

Distribute

Next step is to define where you want to distribute the app to. You can send it to the official App Store, App Store Connect Users for your TestFlight beta testers, or to an internal Company Portal.

I am going to distribute the app to App Store Connect for TestFlight. Select App Store Connect. If you do not have yet an account linked to Apple, you can do this here.

AppCenter is connecting to App Store Connect and retrieves a list of apps. I only have one app available, making the selection easier. It also means that you have to create the app first in App Store Connect. AppCenter is not able to create the app definition for you.

Select the app and click on Assign.

In case 2FA is enabled for your Apple ID, you will have to provide an app-specific password. I wrote a blog an how to create an app specific password.

After informing the app-specific password, you get back to the previous screen. Click again on assign.

Now AppCenter is configured to connect to Apple Connect. Back at the Distribute builds section, you can select App Store Connect Users.

Result

You can now click on save or already start your first build.

Run build and distribute to App Store Connect

After the project is created and the build configured, you can start a build. AppCenter will find an available build agent, clone the repository, build, test, sign and distribute the app.

AppCenter

Waiting for a free build agent

Build starting

Distribute

After the build is done, the app is send to Apple Connect and processed there. Apple will check if the build is OK. This will take some time. The status of the build is Processing.

App Store Connect

When processing is done, you get an email form Apple.

The status of the app in AppCenter and App Store Connect changes and you can distribute the app to your beta testers via TestFlight.

Let the world know

State of the art documentation from SAP

Posted on by

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.

 

Let the world know

Activate Clickjacking-Framing-Protection service

Posted on by

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.

By default, clickjacking protection is disabled. To activate it, you need to insert a value into table HTTP_WHITELIST.

Insert values into table HTTP_WHITELIST

Transaction: SE16

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.

https://vhcalnplci:44300/sap/bc/webdynpro/sap/saml2

Additional information on setting whitelist entries.

 

Let the world know

How to access UI5 model data

Posted on by

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.

OData

this.getView().getModel().setProperty("/"+key+"/Depth", 11.111)

JSON

this.getView().getModel("device").setProperty("/os/name", "windows")

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.

 

Let the world know

SAP Web IDE: Invalid backend response received by SCC

Posted on by

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.

 

Let the world know

Reset password for SAP Web Dispatcher user

Posted on by

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

  1. Get the icmauth.txt file and try to hack the password or
  2. 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.

  • Creating Administration Users SAP Help

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

icmadm:{SHA384}z3Lq992UB3lmK3F5dND266RBGU1S2xflxQOtSJn4irawcIce+Xo:admin

Field 1 Field 2 Field 3
icmadm is the user {SHA384}z3… is the encrypted password of the user admin is the group of the user.

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.

https://localhost:4300/sap/wdisp/admin/public/default.html

Let the world know

SAP UI5 VIZ charts in Chrome

Posted on by

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.

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };

I`ve put the code in my views controller init() function:

onInit : function (evt) {
  SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };
  oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");

Result

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.

Let the world know

Fiori client compile error

Posted on by

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.

Let the world know

Getting started with BUILD – Installation

Posted on by

After meeting the pre-requirements for BUILD, it is time to actually install BUILD. The steps are outlined at SAP BUILD GitHub page. There a 4 steps:

  1. Get the tool
  2. Install required node modules
  3. Initialize the db
  4. Start the app

Be sure to have followed the steps outlined in the pre-requisites in my previous blog.

1. Get the tool

BUILD is hosted on GitHub, so all it needs to get the source code is git. It`s as of today only 255 MB that you have to download.

Command: git clone https://github.com/SAP/BUILD.git

2. Install required node modules

Change to the BUILD directory and run the following commands:

Command: npm install –g grunt-cli

Change to BUILD\BUILD directory. Install dependency of project

Command: npm install

Note: before doing this, verify that the command shell you are using is configured to use node v0.10.38

Command: nvmw use v0.10.38

Tip: The installation will have to compile some libraries using Microsoft C++ compiler. Make sure the compiler is using the right SDK.

Command: call “C:\Program Files\Microsoft SDKs\Windows\v7.1\bin\Setenv.cmd” /Release /x64

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.


"db": {
"hosts": "localhost",
"database": "norman",
"options": {
"db": {
"w": 1
},
server": {
"poolSize": 5,
"socketOptions": {
"keepAlive": 1
}
}
}
},

Test

The see if the database was created in mongo db, connect to the db and issue the command show dbs.

Command: mongo.exe

Command: show dbs

Set access permissions

Command: node setDefaultAccess.js

4. Start BUILD app

Command: grunt serve

Result

Note the final line stating: Server started.

Access BUILD

This means that the http server is running at default port 9000 on localhost. Access it on Chrome.

Click on join to create an account. Afterwards, create a new project

  1. Enjoy BUILD

Have fun.

Let the world know

Getting started with BUILD – Pre requisites

Posted on by

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.

PREREQUISITES

The prerequisites are

  • GIT
  • npm.js in version1.4.28
  • node.js in version 0.10.33 or 0.10.38
  • MongoDB in version 2.6.x
  • node-gyp

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.

NPM.JS

Command: npm –g install npm@1.4.28

Test

Command: npm –version

NODE.JS

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.

Test

Node-gyp

Looks like the installation of BUILD will have to compile some stuff, so node-gyp is being used. The installation of node-gyp is more complex and can be found here: https://github.com/nodejs/node-gyp/blob/master/README.md#installation

For Windows 7 64 bit, it means to install two components:

  • C++ compiler and
  • Windows 7 SDK

C++ compiler

The compiler is Microsoft Visual Studio C++ 2013 for Windows Desktop. Download it from Microsoft: http://www.microsoft.com/en-gb/download/details.aspx?id=44914

Select the version you want to download. I recommend the online installer.

After downloading the online installer, run it

Accept the license term to start the 7 GB install

Restart computer.

Windows 7 64bit SDK

Download the Windows 7 64bit SDK from Microsoft: http://www.microsoft.com/en-us/download/details.aspx?id=8279

Run the installer

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.

  1. Extract zip file to folder: C:\dev\tools\mongodb-2.6.11
  2. Create db data folder data\db

  3. Start mongo db from bin directory. Start mongo db and give path of database directory as parameter:

    Command: mongod.exe –dbpath “C:\dev\tools\mongodb-2.6.11\data\db”

Note: without the db data directory, mongo db won`t start.

Let the world know