Fiori OVP(Overview Page) Custom Card Oluşturma

Merhabalar ,

Bu yayında Fiori OVP sayfası içerisinde custom card nasıl oluşturulur bunu inceleyeceğiz.

OVP'in ne olduğu , hangi durumlarda kullanılması gerektiği,içerdiği card tiplerine dair detaylı bilgiye aşağıdaki linkten erişebilirsiniz.

https://experience.sap.com/fiori-design-web/v1-38/overview-page/

OVP'in yapısı içerisinde sunmuş olduğu card tipleri tüm case ler için yeterli olmamaktadır.Örneğin ; kullanıcı Table Card içerisinde 5 satırdan fazla veri görmek isteğinde bunu standart table card ile yapmak mümkün olmamakta . Dolayısıyla bu gibi standart dışı durumlarda custom card oluşturmak gerekmektedir.

İşe Web IDE üzerinde yeni bir OVP Projesi oluşturarak başlayalım .

Projemize bir isim verelim .

Projede kullanacağımız OData servisini seçelim .

Proje içerisinde standard card ları kullanmayacağımız için , bu aşamada bir annotation dosyası yüklememiz gerekmiyor .

Datasource Alias  ile Uygulama başlığını da girdikten sonra projeyi oluşturabiliriz.

Oluşan proje dizini içerisinde custom card için bir dizin oluşturduk ve bu dizin içerisinde gerekli Component.js , xml ve controller.js dosyalarını oluşturduk .

 
(function() {
 "use strict";

 jQuery.sap.declare("ZOVPTEST.cards.customtable.Component");
 jQuery.sap.require("sap.ovp.cards.generic.Component");

 sap.ovp.cards.generic.Component.extend("ZOVPTEST.cards.customtable.Component", {
  metadata: {
   properties: {
    "contentFragment": {
     "type": "string",
     "defaultValue": "ZOVPTEST.cards.customtable.CustomTable"
    }
   },

   version: "1.38.16",

   library: "sap.ovp",

   includes: [],

   dependencies: {
    libs: ["sap.m"],
    components: []
   },
   config: {},
   customizing: {
    "sap.ui.controllerExtensions": {
     "sap.ovp.cards.generic.Card": {
      controllerName: "ZOVPTEST.cards.customtable.CustomTable"
     }
    }
   }
  }
 });
})();

 
(function() {
 "use strict";

 sap.ui.controller("ZOVPTEST.cards.customtable.CustomTable", {
        oCustomTable : function()
        {
          return this.getView().byId("oCustomTable"); 
        },
  onInit: function() {
   
   var data = [{
               Column1 : "test1",
               Column2 : "test1",
               Column3 : "128 USD",
               Column4 : "test1",
               State  : "Success"
   },{
               Column1 : "test2",
               Column2 : "test2",
               Column3 : "315 EUR",
               Column4 : "test2",
               State  : "Warning"
   },{
               Column1 : "test3",
               Column2 : "test3",
               Column3 : "24 USD",
               Column4 : "test3",
               State  : "Error"
   }];

   var oModel = new sap.ui.model.json.JSONModel();
   oModel.setData(data);
   var oTable = this.oCustomTable();
   oTable.setModel(oModel);
   oTable.bindItems("/", new sap.m.ColumnListItem({
    cells: [
     new sap.m.Text({
      text: "{Column1}"
     }),
     new sap.m.Text({
      text: "{Column2}"
     }),
     new sap.m.ObjectNumber({
      number: "{Column3}",
      state: "{State}"
     }),
     new sap.m.Text({
      text: "{Column4}"
     })
    ]
   }));

  }

 });
})();

 

 

Standart card yapılarında olduğu gibi oluşturduğumuz component için bizde generic card  componentini genişlettik . Yeni oluşturduğumuz custom card componentinin content kısmını fragment.xml dosyası içerisinde kodladık. Controller dosyasında ise bu fragment içerisinde oluşturduğumuz table kontrolünü bind ettik . 

 

Son olarak oluşturduğumuz card template ini kullanan card yapısını projenin manifest.json dosyası içerisinde cards tag i içerisine eklememiz gerekiyor .

 

 

 
{
 "_version": "1.6.0",
 "start_url": "start.html",
 "sap.app": {
  "id": "ZOVPTEST",
  "type": "application",
  "i18n": "i18n/i18n.properties",
  "applicationVersion": {
   "version": "${project.version}"
  },
  "title": "{{app_title}}",
  "description": "{{app_description}}",
  "ach": "sap",
  "resources": "resources.json",
  "dataSources": {
   "ZOS_OVPTEST_SRV": {
    "uri": "/sap/opu/odata/sap/ZOS_OVPTEST_SRV/",
    "type": "OData",
    "settings": {
     "localUri": "localService/ZOS_OVPTEST_SRV/metadata.xml"
    }
   }
  },
  "sourceTemplate": {
   "id": "OVP.cardtemplate",
   "version": "0.0.0"
  }
 },
 "sap.ui": {
  "technology": "UI5",
  "icons": {
   "icon": ""
  },
  "deviceTypes": {
   "desktop": true,
   "tablet": true,
   "phone": true
  },
  "supportedThemes": [
   "sap_belize"
  ]
 },
 "sap.ui5": {
  "dependencies": {
   "minUI5Version": "${sap.ui5.dist.version}",
   "libs": {
    "sap.ui.core": {},
    "sap.m": {},
    "sap.ui.layout": {},
    "sap.ushell": {},
    "sap.collaboration": {},
    "sap.ui.comp": {},
    "sap.uxap": {},
    "sap.ovp": {}
   }
  },
  "models": {
   "i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "uri": "i18n/i18n.properties"
   },
   "@i18n": {
    "type": "sap.ui.model.resource.ResourceModel",
    "uri": "i18n/i18n.properties"
   },
   "ZOS_OVPTEST_SRV": {
    "dataSource": "ZOS_OVPTEST_SRV",
    "settings": {}
   }
  },
  "extends": {
   "extensions": {}
  },
  "contentDensities": {
   "compact": true,
   "cozy": true
  }
 },
 "sap.ovp": {
  "globalFilterModel": "ZOS_OVPTEST_SRV",
  "globalFilterEntityType": "",
  "enableLiveFilter": false,
  "considerAnalyticalParameters": false,
  "cards": {
   "ZOVPTEST_card00": {
    "model": "ZOS_OVPTEST_SRV",
    "template": "ZOVPTEST.cards.customtable",
    "settings": {
     "title": "{{ZOVPTEST_card00_title}}"
    }
   }
  }
 }
}

Proje FLP Sandbox üzerinde çalıştırılmaya hazır.

 

 

 

 

Teşekkürler .

Faydalanılan Kaynaklar :
https://blogs.sap.com/2017/05/21/create-your-own-custom-card-in-a-sap-fiori-overview-page/

SAPUI5 uygulaması ile Barkod okuma (Cordova)

Merhabalar,
Bu yayında bir Cordova uygulaması oluşturup , SAPUI5 uygulama dosyalarımızı içerisine atarak barkod okuma işlemi gerçekleştirecek bir Android APK sı oluşturacağız.

SAPUI5 da smartformu PDF olarak görüntüleme

Bu yayında SAP backend de bulunan bir  smartforma REST servis yardımıyla ulaşıp , PDF olarak web sayfamızda görüntüleyeceğiz.

İşe PDF stringini dönderecek  REST servisi yazmakla başlayalım.

SAPUI5 data binding ( sap.m.table control )

Bu yayında daha önceki yayında yazmış olduğumuz rest servis den dönen JSON datayı , SAPUI5 mobile web projesinde table control ümüze bind edeceğiz.

İşe yeni bir proje yaratmakla başlayalım.

SAP de RESTful Web Servis oluşturma

Bu yayında bir REST service yazacağız.
Servisimizin yapacağı iş basitçe 1000 adet malzeme verisini bize JSON data olarak geri döndermek olsun.

SAPUI5 projesini SAP web server'a yükleme

Bu yayında daha önceki yayında oluşturduğumuz  SAPUI5 mobile  web projesini  ABAP repository e yükleyeceğiz .

SAPUI5 mobile web projesi

Bu yayında basit bir SAPUI5 mobile web sayfası oluşturacağız.
Örneğin ; girilen iki sayıyı input field lar yardımıyla alıp bir button un  press  olayı ile toplatıp yeni bir input field içerisine dolduralım.