SAPUI5 ile mi yoksa Web Dynpro ABAP&JAVA ile mi proje yapayım?

Klasik alışkanlıkları bırakmak zor olabilir.Yıllarca kullandığınız manuel vitesli arabadan aniden otomatik vitesli arabaya geçmek nasıl zor geliyorsa,Web Dynpro 'dan SAPUI5 geçmek de zor gelebilir.Piyasa da sıfır manuel vites otomobil satışı artık yapılmıyorsa,sıfır  araç kullanmak için otomatik vitesli araç kullanmaktan başka bir yol olmayacaktır.Eski araçları kullanmak isteyenler eski alışkanlıklarına devam edebilirler.Günün verdiği teknolojik kolaylıklar,zaman,maliyet tasarrufları vb. karşısında ister istemez eski alışkanlıklarınızı yavaş yavaş terk edeceğiz.

İleri dönemlerde SAP web dynpro,bsp teknolojilerini terk edebilir.SAPscripts ile smartforms,adobeforms gibi yeni teknolojileri karşılaştırınca daha iyi anlaşılabilir.Tamam,webdynpro elveda dedim,SAPUI5 ile projelerimi yapacağım ne farkı var peki Web Dynpro ile?

Features	SAP UI5	Web Dynpro
Usage scenarios	Application to be used both on desktop and mobile devices  Casual usage scenario, targeting non SAP users  Simple screens  Fit for building stateless apps, both SAP and non-SAP	 To build desktop based web applications  Suitable for developing custom UI for complex SAP business Transactions  Simple and complex screens
UI Design	UI design requires extensive coding in HTML and Javascript (SAP is currently developing new UI5 development environment with drag and drop features	Wizard driven UI design with minimal coding required
Models	Supports OData,& JSON	Supports Java, ABAP, Web services models
Platforms & tools	SAP Java stack SAP ABAP stack SAP HANA XS Non SAP Web Application servers like TOMCAT Eclipse with UI5 plugins	SAP Java stack – for WebDynpro Java SAP ABAP stack – for WebDynpro ABAP NetWeaver Developer Studio(NWDS) and NetWeaver Development Infrastructure(NWDI)
Browser rendering	Runs 100% on browser   All UI events client side	The applications runs on the server side   Majority of UI events are server side, minimum client side events
UI Features	Latest web UI features available  Ability to customize and extend	Limited UI features  Limited extension and customization possible
Development Skills	HTML/HTML5 Javascript/JQeury CSS	Java – for WebDynpro Java  ABAP–for WebDynpro ABAP
Application Performance	High performing due to client side events  Browser rendering is faster as HTML content size is minimal	Frequent performance issues due to multiple server round trips  Amount of HTML content generated is high, impacting the browser rendering performance
Mobile support	Fully supported with dedicated mobile libraries for UI	Not supported

kaynak:SAP UI5 VS WebDynpro

örnek sapui5 proje ekran çıktıları:
HTML5 tabanlı olduğu için browser'ın boyutlarına göre ekran kontrolleri yerlerini almakta.

SAP se80 ekranında BSP tag'ının altın da projenizi yönetebilirsiniz.SAPUI5 için sisteminizde SAPGateway kurulu olması gerekmekte.Nasıl daha önce sap webservice'ler ile projelerimizi yapıyorsak,SAPUI5 için odata servisleri kullanılmakta.

SAP Fiori apps reference library

SAP,klasik erkanlarını sap fiori'ye dönüştürmekte.İleri ki dönemlerde neler olacağını hep birlikte göreceğiz.SAP erkanlarının fiori çevrimlerini aşağıdaki link'den görebilirsiniz.

SAP Fiori apps reference library

Ayrıca Read more inApp Documentation 'a tıklayınca SAP erkanında ilgili t-code bilgilerini,ilgili modüllerini de görebilirsiniz.
örneğin:
Vendor Accounting Document



 

Vendor Accounting Document fiori ekranı sıklıkla kullandığımız muhabese belge görüntüleme FB03 ekranına karşılık gelmekte.

RUN with MOCK DATA

Bir önceki yazı da metadata.xml file ile tableset'leri projemize local olarak eklemiştik.RUN deyip çalıştırdığımızda karşımıza data'ları olmayan sayfalar çıkmıştı.Çünkü servis'e bağlı değiliz local olarak projemizi oluşturduk.SAPWEBIDE ile "generic data" oluşturabiliriz.
1-Mock DATA ayarlamalarınızı yapmalısınız.

2-index.html dosyasının üzerine mause' ile gelip,RUN with mock data ile çalıştırmalısınız.

3-SAPWEBIDE'niz sizin için random data oluşturdu.

4-Ayrıca kendi mock data'larınızı kendiniz de yapabilir,random data'larınızı da edit'leyebilirsiniz.metadata.xml üzerinde sağ tıklayıp,edit mock data demelisiniz.

Add row:yeni satır ekleyebilirsniz.

Delete row:seçili satırı siler

Generate Random Data:Generate mock data'larınızı oluşturur.

local medata ile çalışma

SAP'den odata servislerinizi açtınız.Sisteme erişmeden geliştirme yapmak istediğiniz de ilgili servisin medata'sını alarak sapwebide'nizde proje yapabilirsiniz.Bu SAP sistemine file xml dosyası ile consume web service eklemek gibi diyebiliriz.
1-metadata xml file alınır.
http://services.odata.org/V2/Northwind/Northwind.svc/$metadata

2-SAPWEBIDE nizde yeni bir template proje oluşturualım.Sources seçiminizi file system seçip,indirdiğimiz metadata.xml' dosyasını seçelim.Details kısmında görüldüğü gibi metadata içindeki tableSET'ler listelenecektir.

3-Bir sonraki sayfadan master-detail ayarlamalarınızı yaptıktan sonra artık file.xml dosyanızdan tableSET'leriniz üzerinde çalışma yapabilirsiniz.

4-Run deyip çalıştırdığınız da karşınıza data'ları olmayan bir proje çıkmış olacak.Bir sonraki yazı da MOCK data ile bu dataları nasıl oluşturacağımızı anlatmış olacağım.

JSON odata modify

ABAP internal table ile satırlar üzerinde nasıl değişiklik yapıyorsak,JSON data'ları üzerinde de değişiklikler yapmak isteyebiliriz.Örneğin tutar değerini 2 katına çıkarmak istiyoruz.Aşağıdaki şekilde JSON datalarınızın içeriğini değiştirebilirsiniz.


               var jsonModel = new sap.ui.model.json.JSONModel();
jsonModel.loadData("model/mock.json", null, false);

sap.ui.getCore().setModel(jsonModel, "abc");
     
var someObj = sap.ui.getCore().getModel("abc").getProperty("/SalesOrderCollection");
for (var i = 0; i < someObj.length; i++) {
var obj = someObj[i];
 console.log(obj.GrossAmount);
obj.GrossAmount  = obj.GrossAmount * 2;

     
       jsonModel.refresh();
}
 
this.getView().setModel(jsonModel, "abc");

Steps for updating SAPUI5 libraries

SAPUI5 geliştirmenizi SAP sisteminize aktardınız.Sorunsuz çalışmasını beklediniz.Ama bazı kontrolleriniz çalışmadı.Sebebi sizin geliştirme yaptığınız webide,eclipse,notepad++ vb... geliştirme kitlerinde farklı versiyonlar,en son versiyonlar ile geliştirme yapmış olmanız.Yapacağınız iş mevcut SAP sisteminde SAPUI5 kütüpahanesini update etmek.BASIS yardımı ile bu süreci aşağıdaki makale yardımı ile yapabilirsiniz.

Steps for updating SAPUI5 libraries

SAPUI5 Library version ve Demokit

SAP sisteminizde sapui5 library versiyonlarını aşağıdaki link ile öğrenebilirsiniz.

http://<server>:<port>/sap/public/bc/ui5_ui5/index.html

Versiyon listesini inceleyerek gerekli versiyon yüksetmelerine karar verebilirsiniz.Ayrıca Demokit uygulamalarını da version version görebilirsiniz.

Virus scan server error: "No virus scan profile is selected as the "default"

SAPUI5 projenizi SAP sistemine deploy etmek istediğiniz de Virus scan server error: "No virus scan profile is selected as the "default" kontrolü ile karşılaşırsanız aşağıdaki adımları yaparak sapui5 için virus taramasını deactive edebilirsiniz.
1-SM34
2-VSCAN_PROFILE_VC maintaince

3-/UI5/UI5_INFRA_APP/REP_DT_PUT profile deactive

Artık SAPUI5 projenizi SE80 ekranından BSP paketinin de görebilirsiniz.

Deploy to SAPUI5 ABAP Repository

Sapwebide'nizde sapui5,fiori projenizi yaptınız.SAP servera deploy ederek publish edebilirsiniz.Bu şekilde projeniz BSP projesi gibi server üzerinden çalışmış olacak.Yani SE80 ekranında bu projemizi görmüş ve test etmiş olacağız.
1-Deploy to SAPUI5 abap repostory seçimi yapılır.

2-Deploy edilecek sistem seçimi

3-Paket olarak $TMP paketine gönderiyorum.Proje adı ve tanımını yazıyorum.

4-Ve finish .

5-SE80 ekranımızda deploy ettiğimiz projemiz.Test ederek projemizi görebilir ve ilgili yerlerden(tablet,pc,mobile cihazlardan) projemizi kullanabiliriz.

6-Artık SAP sistemimiz  sapui5 projemizi publish etmekte ve tüm cihazlardan sapui5 sayfalarına erişebilmekteyiz.

SAP Web IDE On-Premise problem: Unable to access selected system

SAP Web IDE On-Premise problem: Unable to access selected system hatasının düzeltmek için Destination dosyanızdaki bağlanmak istediğiniz sistemin System ID'si aynı olmalı.Yani dosya isminiz de SystemID niz ile aynı olmalı.Yoksa hata vermekte.

Aşağıdaki şekilde SystemID ve dosyanın isimlendirmeleri farklı olduğu için Servislere erişim yapılamadı.

Dosya adını ve SystemID'leri isimlerini aynı yapınca sisteme bağlantı yapıldı.

SAP Web IDE remote system(service catalog)

Local SAP Web IDE  ile ERP sisteminize bağlanarak servisleriniz ile çalışabilirsiniz.Destination tanımlaması:
abc : SystemID


#ServiceDestination
Description=abc system
Type=HTTP
TrustAll=true
Authentication=NoAuthentication
WebIDEUsage=odata_gen,odata_abap,dev_abap,ui5_execute_abap
Name=abc
WebIDEEnabled=true
URL=http\://xxxxxxxxxx\:8000
ProxyType=OnPremise
WebIDESystem=abc
sap-client=100

Yukardaki Destination tanımlamasını C:\SAPWebIDE\eclipse\config_master\service.destinations klasörünüze kaydedin.Dosyanızın adı ile SystemId aynı isim de olmalı.Yoksa servislere erişimde hata alırsınız.

Yeni Proje Master-Detail açarak service catalog'dan servislerinize erişebilirsiniz.

SAP NetWeaver Gateway: Error Log

SAP NetWeaver Gateway: Error Log ,ODATA servislerinin hata analiz tool'u.SRT_UTIL ile web servislerinin hatalarını analiz ediyorduk,ODATA servisleri için de bu toolu kullanıyoruz.

/IWFND/ERROR_LOG - İşlem /IWFND/ERROR_LOG

SAP Netweaver Gateway devre dışı bırakıldı

SAP Netweaver Gateway devre dışı bırakıldı
Sisteminizde SAP Netweaver Gateway açıp kapatabilirsiniz.

/IWFND/IWF_ACTIVATE - İşlem /IWFND/IWF_ACTIVATE

SAPUI5 accordion menu

SAPUI5 ile accordion menu yapmak için sap.ui.commons kütüpanesinden yararlanarak oluşturabilirsiniz.Accordion menu xml kodları:
1-Accordion control oluştur.
  <com:Accordion id="acc1">
2-Accordion control oluşturduktan sonra herbir menu için AccordionSection control oluşturun.
<com:AccordionSection xmlns="sap.ui.commons">
NOT:Birden fazla xmlns namespace'leri kullanırken ön ek ile kullanmak gerekmekte.Ön ek kullanmadan kontrolleri çalıştıramazsınız.
Accordion Menu'lere ekleyeceğiniz kontrollerin press eventlerine vb. gerekli navigation'ları vererek ilgili sayfayalara yönlendirebilirsiniz.

<core:View xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:com="sap.ui.commons" xmlns:f="sap.ui.layout.form" xmlns:l="sap.ui.layout" controllerName="view.View1"
xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Title">
<content>
        <com:Accordion id="acc1">
            <com:AccordionSection xmlns="sap.ui.commons"
            id="idAcc1"
            maxHeight=""
            enabled="true"
            collapsed="false"
            title="Accordion Menu1"
            scroll="">
            <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
            <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
            <content>
               <Button id="btn1" text="Button Menu1"></Button>
            </content><!-- sap.ui.core.Control -->
            </com:AccordionSection>
            <com:AccordionSection xmlns="sap.ui.commons"
            id="idAcc2"
            maxHeight=""
            enabled="true"
            collapsed="false"
            title="Accordion Menu2"
            scroll="">
            <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
            <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
            <content>
               <Button id="btn2" text="Button Menu2"></Button>
            </content><!-- sap.ui.core.Control -->
            </com:AccordionSection>
             <com:AccordionSection xmlns="sap.ui.commons"
            id="idAcc3"
            maxHeight=""
            enabled="true"
            collapsed="false"
            title="Accordion Menu3"
            scroll="">
            <tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
            <dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
            <content>
               <Button id="btn3" text="Button Menu3"></Button>
            </content><!-- sap.ui.core.Control -->
            </com:AccordionSection>
        </com:Accordion>                
</content>
</Page>
</core:View>

SAPUI5 ile Android apk

SAPUI5 ile yazdığınız uygulamayı android,ios aplication olarak build edebilirsiniz.Hani diyorduk ya,sapui5 ile yaz,her platformda çalışsın.Web sayfası olarak her cihazdan çağrılabilir fakat android veya ios olarak build edip android veya appleStore ekleyebilirsiniz.
1-Hybrid Application Toolkit sap web ide'nizi local install yaparken kurmanız gerekmekte.

2-Hybrid Application Toolkit kurmak için sapweb ide local install' dosyasının içerisinde run.bat dosyasını çalıştırmanız gerekmekte.

3-Hybrid Application Toolkit pc'nize bazı gereksinimler kurmanız istenecektir.Bunları başarı ile yapmanız gerekmekte.Biraz cordova,biraz android sdk,kapsel vb. bilginiz olması gerek.SAP mobile sdk sürümlerini doğru kurmanız gerekecektir.Kurarken alacağınız hataları google'den aratarak çözüme gidebilirsiniz.

4-Hybrid Application Toolkit test edelim.Test ederken bize ayrı bir port açılacaktır.Bu port default 9010 portu.Bu port şuan açık değil.Yine local sapweb ide klasörü içerisinde run.bat dosyasını çalıştıralım.Kurulum sırasında atadığımız şifre ile portu açalım.

5-9010 portu açıldı.Şimdi sapwebide' üzerinde Hybrid Application Toolkit dan test edelim.Aşağıdaki hatayı alabilirsiniz.Sapwebide yi browserdan refresh yaparak yenileyin.Aldığınız hata gidecektir.

TEST işlemi başarılı.

6-Yeni proje deyip Kapsel projesi oluşturalım.

7-Proje'ye sağ tıklayıp project settings kısmına gelelim.Kapsel projesi olduğu için device configuration sekmesine gelelim.Ve app adını,app id'sini ve versiyon bilgilerini girelim.Bu kısımda android app olarak device yuklemek istediğim için andorid seçimi yaptım.eğer ios istersek ios seçebiliriz.

8-Projenize tekrar sağ tıklayın.RUN as deyin.Ve karşınıza Android device ve emülatör seçenekleri gelecektir.PC'nize bir android cihazı bağlayıp device üzerinde RUN edebilirsiniz.Android Device seçimi yapıp,projenizi build edin.Ve sapwebide size apk dosyasını üretecektir.

9-Build işlemi başarılı bittikten sonra,sizin telefonunuzda uygulama çalışacaktır.Ayrıca C:\Users\username\SAPHybrid klasörü içinde apk oluşmuş olacaktır.

C:\Users\username\SAPHybrid\android_deneme\hybrid\platforms\android\ant-build

EMILATOR çıktısı