SAP Fiori 2.0 – Bildirim Merkezi

Source: https://www.linkedin.com/pulse/sap-fiori…erkezi-mehmet-canca/
Capture Date: 11.03.2018 19:40:50

Kullanıcı Deneyimi (User Experience) ve Dijital Dönüşüm (Digital Transformation) kavramlarının ortaya çıkmasıyla birlikte, kullanıcıların kendi görevlerini takip ettiği uygulamalardan ilgili kişileri ihtiyaç anında bilgilendiren teknolojilere geçiş sürecindeyiz.

SAP, uygulamalara erişmek için Grafiksel Kullanıcı Arayüzü (Graphical User Interface) yerine SAP Fiori ürününü geliştirmiş ve müşterilerinin kullanımına sunmuştur. İlerleyen dönemlerde anlık bildirimler (Push Notifications) başlığı altında inceleyeceğimiz bir eklenti ile kullanıcıyı ihtiyaç anında bilgilendirme işlevini sağlamıştır. Bu yazımızda, sistemde anlık bildirim özelliğinin nasıl kullanılabileceğini ve aktifleştirilmesi için gerekli ön adımları inceleyeceğiz. S/4HANA 1610 kullanmayı düşünen müşteriler için en büyük veri kaynağı SAP Business Workflow yapısı olacaktır. Kurgulanmış iş akışı onay adımlarının Fiori Launchpad’e yönlendirilmesi ve anlık bildirimler olarak görüntülenmesi öncelikli taleplerden biri olarak karşımıza çıkmaktadır.

Bildirim Merkezi için Terimler:

  • Notification Center: Fiori Launchpad üzerinde bildirimlerim görüntülendiği alandır.
  • Notification Hub: Bunu Gateway sunucunuz olarak düşünebilirsiniz. Farklı kaynaklardan gelen bildirimlerin toplandığı birimdir. Eğer embedded senaryo kullanıyorsanız bu S/4HANA ile Gateway sunucunuzun aynı olduğu anlamına gelir.
  • Notification Provider: Bildirim üreten kaynaktır. Örnek vermek gerekirse; S/4HANA’nın kurulu olduğu sunucu (iş akışı onay adımlarının üretildiği yer) veya herhangi bir etkileşim kaynağı olarak düşünülebilir.

Bildirim Merkezi için Sistem Gereksinimleri:

  • Fiori 2.0 versiyonu gerekmektedir. Bu, teknik olarak Fiori Frontend Server 3.0 sahibi olmak demektir ki; S/4HANA 1610 olmadan ilgili bileşen kullanılamamaktadır. Uygun sistem mimarileri için bağlantı incelenebilir. Ayrıca, Fiori 2.0 S/4HANA Cloud 1608 itibariyle kullanılabilmektedir.
  • Gateway sunucusunu lokal bir kurulum olarak kullanıyorsak; SAP NetWeaver 7.51 versiyonu gerekiyor.

Bildirim Merkezinin Aktivasyonu

Bu bölümde yapılacak işlemler Gateway sunucusu üzerinde yapılmalıdır. Aktivasyon için 2 temel adım bulunmaktadır.

  • Bildirim oData servisinin aktivasyonu
  • Web Socket kanalının ayarlanması

Bildirim kanallarıyla ilgili SAP Help dokümantasyonuna buraya tıklayarak ulaşabilirsiniz.

Uyarlamaların yapılması için gerekli bütün adımlara SPRO > SAP NetWeaver > Notification Channel Hub üzerinden ulaşılabilir.

Bildirim oData Servisinin Aktifleştirilmesi

oData servis aktivasyonu için /IWFND/V4_ADMIN işlem kodu kullanılabilir. Normal oData versiyon 2 servislerini aktifleştirirken kullandığımız işlem kodu olan /IWFND/MAINT_SERVICE bu servis için kullanılamıyor; çünkü bildirim servisi oData versiyon 4 altyapısına sahiptir.

İşlem koduna giriş yaptıktan sonra /IWNGW/NOTIFICATION isimli servis grubunu aktifleştirmemiz gerekiyor. İşlemler gerçekleştirildikten sonra ekran görüntümüz aşağıdaki gibi olmalıdır. Aktivasyon sırasında System Alias bilgisi olarak LOCAL seçilmesine dikkat edilmelidir.

ABAP Push Channel Aktivasyonu

Bildirimlerin Fiori Launchpad üzerine iletilmesi için bir ABAP Push Channel kullanılmaktadır. Bunlar Web Service, RFC gibi teknolojiler olabilir.

Web üzerinden yapılacak bildirimler için kullanılacak servisin aktivasyonu gerekmektedir.

SICF işlem kodu kullanılarak notification_push_apc servisinin aktifleştirilmesi gerekmektedir (/default_host/sap/bc/apc/iwngw/notification_push_apc).

Ayrıca, SPRO içerisinde yer alan Activate and Maintain Push Channels adımında aşağıdaki girişi yapmamız gerekiyor:

Yapılacak konfigürasyon değişikliklerinden sonra Gateway sisteminde aşağıdaki işlem kodları çalıştırılarak Notification Hub cachelerinin temizlenmesi gerekmektedir. Bu işlemi SPRO içerisinde yer alan Clean Up MetaData and Data Cache adımından veya /IWNGW/H_CLEAR_CACHE işlem kodunu kullanarak gerçekleştirebiliriz. Bu işlem sistem tarafından da belirli aralıklarla otomatik olarak gerçekleştirilmektedir. SJOBREPO işlem kodundan /IWFND/NOTIFICATION_CLEANUP isimli arka plan işinin aktif olup olmadığı kontrol edilebilir.

Uyarlamalar tamamlandıktan sonra /N/IWNGW/BEP_DEMO işlem kodunu kullanarak bildirim merkezi kontrol edilebilir.

NOT: Yukarıdaki ekran alıntısının sağ üst köşesinde bulunan Bildirim Merkezi ikonu kullanıcılara özel bir rol tanımlaması yapılmadan görüntülenmemektedir. Bu amaçla Gateway sisteminde rol tanımlaması yaparak içerisine /UI2/CONFIG_NOTIFICATIONkataloğunun eklenmesi gerekmektedir.

SAP Workflow Onay Adımlarının Bildirim Merkezine Yönlendirilmesi

Bu bölümde anlatılacak bütün adımlar S/4HANA Core sunucusu üzerinde yapılmalıdır.

SAP Workflow bildirim sağlayıcısının aktifleştirilmesi

Öncelikle, S/4HANA Core sisteminin besleyeceği Notification Hub(Gateway) sistemini System Alias bilgisini kullanarak tanımlamamız gerekiyor. Buradaki temel amaç; Fiori Lauchpad üzerinde bir bildirim işlemdiğinde hangi sistemin çağırılacağına karar verilmesidir. Bu işlemi gerçekleştirmek amacıyla SPRO içerisinden Notification Channel Provider Enablement > Configuration > Connection Settings > Enter the Backend System Alias yolu kullanılır.

Yapmış olduğumuz işlemi özetlemek gerekirse; S/4HANA Core sisteminde oluşan bir bildirimin hangi sisteme gideceği ve işlendiği durumda hangi sistemi çağıracağını belirlemiş olduk.

NOT: Embedded senaryo kullanıyorsak, yani S/4HANA ve Gateway sistemlerimiz aynı sunucu üzerinde çalışıyorsa, burada LOCAL girişi yapılması gerekmektedir.

Girişi yapıp raporu yürüttüğümüzde sistem tarafından aşağıdaki mesaj görüntülenir:

Bildirim Sağlayıcısının Aktivasyonu

SWF_PUSH_NOTIF1 işlem kodunu kullanarak SAP Business Workflow sisteminin bir bildirim sağlayıcısı olarak aktif olup olmadığını görüntüleyebilirsiniz. Aşağıdaki şekilde olduğu gibi statü yeşil olarak görüntülenmelidir. Bu adımda iş akışı ve onay adımının bildirim olarak gönderileceğine de karar veriyoruz.

Aktivasyon işlemini tamamladıktan sonra bildirim sağlayıcı için aşağıdaki uyarlama girişini yapmamız gerekiyor. SPRO içerisinde yer alan Register Notification Providers uyarlaması kontrol edilmelidir:

İlk satırda görünen giriş mevcut değil ise; aşağıdaki bilgileri ve yukarıdaki ekran görüntüsü üzerinde kırmızı ile işaretlenmiş fonksiyon tuşlarını kullanarak eklememiz gerekiyor.

Tanımlama sırasında herhangi bir açıklama metni girebilirsiniz. Önemli bilgiler aşağıdaki gibidir:

  • Notification Provider ID SAP_BUSINESS_WORKFLOW
  • Provider Class CL_SWF_PUSH_NOTIF_PROVIDER

Arka plan işinin aktif olup olmadığının kontrol edilmesi

Bütün bildirimler arka planda otomatik olarak tetiklenen işler tarafından Gateway sistemine iletilmektedir. Burada kullanılan teknoloji bgRFC yani Background Remote Function Call olarak ifade edilmektedir. SJOBREPO işlem kodunu kullanarak SAP_WORKFLOW_PUSH_NOTIFICATION iş tanımının aktif olup olmadığı kontrol edilmedir.

İş Akış Bildirimlerinin Test Edilmesi

Kolay bir yöntem olarak Sistem Doğruluma iş akışı kullanılabilir. WS30100051 numaralı iş akışının 4 numaralı adımını kullanarak bildirim gönderimi test edilebilir. İş akışı WS30100051, sistemde iş akışı uyarlamalarının eksiksiz bir şekilde yapılıp yapılmadığını kontrol etmektedir. SWU3 işlem kodunda yer alan System Verification tuşu kullanılarak kolayca test edilebilir.

Yetkilendirme

S/4HANA sisteminde bildirimleri Gateway sistemine gönderen kullanıcıda (Arka planda otomatik olarak tetiklenen işi yürüten kullanıcı) ve Fiori kullanıcılarına tanımlanması gereken bazı yetkiler bulunmaktadır. Kullanıcılarla ilgili yetkilendirme dokümantasyonuna buraya tıklayarak ulaşabilirsiniz.

Kaynaklar

https://blogs.sap.com/2017/02/13/leading-s4hana-ux-notification-center-part-1-activation/

https://blogs.sap.com/2017/02/14/leading-s4hana-ux-notification-center-part-2-providing-notifications/

https://blogs.sap.com/2017/02/08/leading-s4hana-ux-fiori-my-inbox-part-1-activation/

https://blogs.sap.com/2017/02/08/leading-s4hana-ux-fiori-my-inbox-part-2-task-specific-options/

https://help.sap.com/viewer/a7b390faab1140c087b8926571e942b7/7.51.1/en-US/8a56c34ef855453b9768e0bb9ffac739.html

https://wiki.scn.sap.com/wiki/display/Fiori/SAP+Fiori+for+S4HANA

Creating Offline Application based on SAP Web IDE CRUD Master-Detail Template using Hybrid App Toolkit | SAP Blogs

Source: https://blogs.sap.com/2017/06/12/creatin…-hybrid-app-toolkit/
Capture Date: 11.03.2018 15:08:33

Introduction

In this blog, I am going to walk through the steps of creating an offline application based on CRUD Master-Detail template from SAP Web IDE using Hybrid App Toolkit

To follow the steps mentioned in this blog post, the following prerequisites needs to be met

Services.png

  • You need to install Hybrid App Toolkit local add-on in your local environment.The installation and setup instructions for Hybrid App Toolkit local add-on can be found here
  • To create a CRUD master-detail application, we need a backend destination setup in SAP Cloud Platform. For this blog, we use SAP Gateway ES4 Demo System OData Service. If you have not previously signed-up for SAP Gateway Demo System, you can sign-up here

Setting up backend destination

  1. Access Cloud Platform cockpit using https://account.hanatrial.ondemand.com/cockpit
  2. On the left-hand side, select Connectivity tab, then Destinations tab.
  3. Click on the New Destination link to open new destination configuration form.
  4. Enter all fields as shown in below tables

For Additional Properties fields click New Property and fill-up

Destination-1.png

5. Click Save.

Enable Hybrid App Toolkit Plugin in SAP Web IDE

Before creating the project using the SAP Web IDE Project template, we need to enable the “Hybrid App Toolkit” plugin, so that Hybrid Mobile features will be available in the SAP Web IDE.

  1. Open SAP Web IDE using the url https://webide-<your_trial_account>.dispatcher.hanatrial.ondemand.com Replace the string “<your_trial_account>” with your HCP Trial Landscape account
  2. After entering SAP Web IDE, select Tools > Preferences or click on the Preference icon directly on the left bar

tools.png

Or

pref.png

3. Select Plugins. Find and check Hybrid App Toolkit to enable the plugin.

plugin.png

4. Click Save.

5.Click Refresh to reload SAP Web IDE

Create new project based on CRUD Master-Detail template

Now you will create a new application using the SAP Web IDE Project template wizard.

  1. In the SAP Web IDE select the Workspace root and open the context menu by right-clicking.
  2. Choose New > Project from Template to open the new project creation wizard.

proj1.png

3. On Template Selection page, select SAP Fiori Application category and click on the CRUD Master-Detail Application to mark it as the template to be used for your new project

proj2.png

4. Click Next.

5. On the first page of the wizard, enter the Project Name as OfflineApp, Title as Products, and Namespace as com.sap.offlineapp

proj3.png

6. Click Next

7. On the Data Connection page click on Service Catalog as service source.

8. From the drop down box select the ES4 Gateway System entry.

proj4.png

9. Type “BASIC” in the Search input field to filter

10. Select GWSAMPLE_BASIC service.

proj5.png

11. Click Next.

12. On Template Customization page, fill up the Data Binding – Object section as below

Check the box for “Display only required fields when creating a new identity”

proj6.png

13. Scroll down to the Data Binding – Line Item section,fill up the section as below.

Capture-22-2.png

14. Click Next.

15. Click Finish to create the new application.

proj8.png

16. Run the newly generated web application

proj9.png

17. Congratulations! You developed your CRUD Master-Detail application and you see it already running in preview mode.

proj10.png

Configure Offline Settings to the project

  1. Go to Workspace, select OfflineApp/webapp/manifest.json and open it code editor.

off1.png

2. Switch to code editor view

off2.png

3. Add the following code snippet at the end of the file

"sap.mobile": { "_version": "1.1.0", "definingRequests": { "ProductSet": { "dataSource": "mainService", "path": "/ProductSet?$expand=ToSalesOrderLineItems" } } } 

4. Save and close the file

Add code to Synchronize data

In this step, we will add a button to the Master view and a javascript code to the button press event to synchronize data to and from back end to offline store on the device

  1. Go to Workspace, select OfflineApp/webapp/view/Master.view.xml
  2. Right click on Master.view.xml, choose Open With/Layout Editor
  3. Now we can view the file in Layout Editor. Drag the Button and drop to bottom panel of our app.

butt1.png

4. Select the button on the bottom panel that we just added. On the right-hand side canvas, we will see a Properties/Button setting panel. Delete values in Text and Width properties, add sap-icon://refresh to Icon property.

5. Now your bottom panel should look like this

butt2.png

6. On the right-hand side canvas, select Events setting. and Press, New Function

butt3.png

7. Enter onSyncData, click OK

butt4.png

8. Go to Workspace, open OfflineApp/webapp/controller/Master.controller.js file.

9. Replace empty onSyncData function with the following code

, onSyncData: function() { if (sap.hybrid && sap.hybrid.isApplicationOnline()) { this.getView().setBusy(true); sap.hybrid.synAppOfflineStore(jQuery.proxy(this._syncSuccess, this), jQuery.proxy(this._syncFailed, this)); } else { this._oODataModel.refresh(); } }, _syncSuccess: function() { sap.m.MessageToast.show("Data Synchronization succeeded", { duration: 3000 }); this.getView().setBusy(false); this._oODataModel.refresh(); }, _syncFailed: function() { sap.m.MessageToast.show("Data Synchronization failed", { duration: 3000 }); this.getView().setBusy(false); this._oODataModel.refresh(); } 

10. Save and Close both view and controller files

Create an application on SAP Cloud Platform mobile services

  1. Go to your CPms Administration page (https://hcpmsadmin-<your_trial_account>.dispatcher.hanatrial.ondemand.com). Replace the string “<your_trial_account>” with your HCP Trial Landscape account
  2. Select Mobile Applications, then Native/Hybrid. Click new button

cp1.png

3. In the New Application pop up dialog, fill up with the following values

cp2.png

4. Click Save button. This saves the application and go to Edit Application page

5. In editing application page. Select Connectivity

cp3.png

6. Click on new destination Icon to create new destination

cp4.png

7. In Create Destination popup dialog, choose Mobile Destination for Type, and com.sap.offlineapp for Destination Name

cp5.png

8. Click Next

9. Fill-up the values as below

10. Click Next

11. Choose Basic Authentication for SSO Mechanism

cp6.png

12. Click Next.

13. Fill in the User Name and Password for the backend account (SAP Gateway ES4 Demo System OData Service account).

14. Click Next and click Finish.

15. Go back to Edit Application page, and choose Security

cp7.png

16. Change Security Configuration to None, and then click Save

cp8.png

Configure Hybrid App Toolkit Local Add-on Settings

  1. Right click on OfflineApp, select Project Settings
  2. Choose Hybrid App Toolkit/ Hybrid App Configuration (Local Add-on)

h1.png

3. For Application section, enter the information as shown below. And for Build Options choose Release Mode. For Platforms, select Android

h2.png

4. For Plugins section, under Cordova tab, check Network Connection; under Kapsel tab, check Logon Manager, Logger and Offline OData

h3.png

h4.png

5. Click Save button

Now we are ready to deploy the app to mobile devices through Hybrid app toolkit

Deploy the app to mobile devices

In this step we are going to deploy the app to selected mobile device and run the application in offline mode

  1. Right-click on OfflineApp project and choose the menu option Run à Run On and choose your desired device/emulator
  2. Wait for the HAT local add-on to created Cordova Project, Build the application in desired platform, Install the App on device and launch the application on device
  3. On start-up, application will load the Logon Screen as below

r1.png

4. Enter your backend Username and Password and tap OK on Logon screen. If Logon is successful, you will see the Passcode screen.

5. Tap Disable Passcode button to load the application. It will show the loading screen as below. This is an indication that our application is an offline application

r3-1.png

6. After creating offline store, the application screen should be like below

r4.png

Testing the offline functionality of the app

To verify whether our app’s offline functions are working correctly, we can try the following steps

  1. Tap on HT-1000 row in master screen. This will navigate to detail screen.
  2. Click the Edit button on the detail page of item HT-1000.

r1-1.png

3. Change the Currency Code from EUR to SGD.

r2.jpg

4. Click Save button.

5. Now on the phone screen, we can see that the currency code of HT-1000 has been changed.

r2.png

6. Switch to WebIDE, and click run, to run our web app. We can see that the currency code of HT-1000 remains at EUR. This is because the changes we make on mobile app is only stored on local store and not yet updated in backend service.

7. Switch to the mobile app, and click the Synchronization button, wait for the synchronization completed successfully.

8. Switch to the web app that we are running, and refresh the page. We can see that after synchronization, the currency code is finally updated to SGD.

r3-2.png