Onur SARA: OVP Custom Card

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.