Skip to main content

Create Dynamic SAPUI5 Tiles With JSON

Postingan kali ini saya akan sharing cara membuat menu tiles di SAPUI5 secara dinamis dengan menggunakan json, ok langsung saja kita buat project baru di eclipse jika belum tau cara membuat project baru sapui5 bisa dilihat DISINI, 

1. New Project



 2. Project Name


 3. Create View -> javascript


4. Setelah klik tombol finish diatas maka akan langsung ter-create structure project sapui5 seperti berikut :index.view, index.controller dan index.html


 sekarang kita tambahkah folder baru didalam folder WebContent dengan nama asset dan didalam folder asset kita buat dua buah folder dengan nama json dan icon



lalu tambahkan file type json didalam folder json dengan nama tile.json dengan cara klik kanan di folder json dan pilih New->file lalu tuliskan nama file dan extensinya (tile.json) lalu finish, dan didalam folder icon tambah 2 buah gambar dengan nama 1.png dan 2.png (nama gambar gak harus sama :D)




untuk iconnya saya menggunakan gambar dibawah ini :
 
setelah menambah file json dan icon, kita buka file index.html lalu ubah source code nya seperti berikut :

 
<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script src="resources/sap-ui-core.js"
    id="sap-ui-bootstrap"
    data-sap-ui-libs="sap.m, sap.suite.ui.commons, sap.ui.commons"
    data-sap-ui-theme="sap_bluecrystal">
  </script>
  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
  
  <style type="text/css">
   element.style {
       overflow-x: hidden;
       overflow-y: auto;
       background-color: #008b8b;
   }
   
   .sapMPage>section {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: darkcyan;
   }

   .sapMGT {
       display: inline-block;
       overflow: hidden;
       background: #dddddd;
       border-radius: 0.25rem;
       position: relative;
       box-sizing: border-box;
       border: 1px transparent dotted;
       outline: none;
       margin: 5px;
   }
   
   .sapMPanelHdr {
       font-weight: normal;
       font-size: 1.5rem;
       font-family: Arial,Helvetica,sans-serif;
       text-shadow: 0 0.0625rem 0 #ffffff;
       color: #fbf6f6;
       background-color: transparent;
   }

  </style>
  
  <script>
    sap.ui.localResources("ui5_tile");
    var app = new sap.m.App({initialPage:"idindex1"});
    var page = sap.ui.view({id:"idindex1", viewName:"ui5_tile.index", type:sap.ui.core.mvc.ViewType.JS});
    app.addPage(page);
    app.placeAt("content");
  </script>

 </head>
 <body class="sapUiBody" role="application">
  <div id="content"></div>
 </body>
</html>

buka index.view.js dan ganti bagian title menjadi seperit berikut :

 
sap.ui.jsview("ui5_tile.index", {

 /** Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf ui5_tile.index
 */ 
 getControllerName : function() {
  return "ui5_tile.index";
 },

 /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away. 
 * @memberOf ui5_tile.index
 */ 
 createContent : function(oController) {  
  
   return new sap.m.Page({
   title: "SAPUI5 TILES WITH JSON",
   content: [panelContainer
   
   ]
  });
 }

});

 Save lalu jalankan dan lihat hasilnya di browser, cara menjalankannya klik kanan pada file index.html 


maka akan muncul satu tab baru di eclipsi seperti berikut :


untuk membuka di browser klik yang diberi tanda merah dan hasilnya di browser seperti berikut :



selanjutnya buka file tile.json yang ada di folder asset/json/tile.json dan masukkan file json berikut :

{
  "Tiles": [
    {
      "ContentPanel": [
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Purchase Requisition",
          "iconGnt": "asset/icon/1.png",
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Create Purchase Requisition"
        },
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Purchase Order",
          "iconGnt": "asset/icon/2.png",
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Create Purchase Order"
        },
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Material Stock",
          "iconGnt": "asset/icon/1.png",
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Display Material Stock"
        },
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Process Order",
          "iconGnt": "asset/icon/2.png",
          "idGenericTile": 1,
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Create Process Order"
        },
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Confirm Order",
          "iconGnt": "asset/icon/1.png",
          "idGenericTile": 1,
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Confirm Process Order"
        }
      ],
      "headerTextPnl": "TRANSACTION",
      "idPanel": 1
    },
    {
     "ContentPanel": [
     {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Report1",
          "iconGnt": "asset/icon/1.png",
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Report1"
        },
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Report2",
          "iconGnt": "asset/icon/2.png",
          "idGenericTile": 1,
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Report2"
        },
        {
          "frameTypeGnt": "OneByOne",
          "headerGnt": "Report3",
          "iconGnt": "asset/icon/1.png",
          "idGenericTile": 1,
          "pressGnt": "",
          "sizeGnt": "M",
          "stateGnt": "Loaded",
          "subHeaderGnt": "Report3"
        }
     ],
     "headerTextPnl": "REPORTS",
       "idPanel": 2
    }
  ] 
}

kemudian buka file index.view.js lagi dan tambahkan source code seperti berikut :

 
sap.ui.jsview("ui5_tile.index", {

 /** Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf ui5_tile.index
 */ 
 getControllerName : function() {
  return "ui5_tile.index";
 },

 /** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away. 
 * @memberOf ui5_tile.index
 */ 
 createContent : function(oController) {
  
  //Image Component
  var image = new sap.ui.commons.Image({
   src:"{iconGnt}",
   width:"60px",
      height:"60px"
  })
  
  //Tiles
  var myTiles = new sap.suite.ui.commons.GenericTile({
   header:"{headerGnt}",
            subheader:"{subHeaderGnt}",
            size:"{sizeGnt}",
            frameType:"{frameTypeGnt}",
            headerImage:"{headerImageGnt}",
            state:"{stateGnt}",
            imageDescription: "{pressGnt}",
   tileContent:new sap.suite.ui.commons.TileContent({
          content:[image]
         }),
            
//            press: oController.eventTile2
  })
  
  //Panel to display tiles
  var myPanel = new sap.m.Panel({
   headerText : "{headerTextPnl}",
   backgroundDesign : "Transparent",
   content : {
     path : "ContentPanel",
     template : myTiles, 
     templateShareable:true
   }
  })
  
  //panel to display myPanel
  var panelContainer=new sap.m.Panel({
   backgroundDesign : "Transparent"
  });
  
  //Bind JSON to Panel
  panelContainer.bindAggregation("content", "/Tiles", myPanel);
  
   return new sap.m.Page({
   title: "SAPUI5 TILES WITH JSON",
   content: [panelContainer
   
   ]
  });
 }

});

 dan tambahkan source code berikut didalam file index.controller.js

 
onInit: function() {
  var oModel = new sap.ui.model.json.JSONModel();
  oModel.loadData("asset/json/tile.json"); //load json file
  sap.ui.getCore().setModel(oModel);
 },

dan silahkan refresh kembali aplikasinya didalam browser jika berhasil makan tampilannya akan seperti berikut :

sekian sharing kali ini semoga bermanfaat terimakasih :D
Labels:

Comments

Post a Comment

Popular posts from this blog

How to Create a REST API in SAP ABAP — Step-by-step Guide

How to Create a REST API in SAP ABAP — Step-by-step Guide Summary: This tutorial shows how to build a REST API in SAP ABAP by creating a handler class, configuring SICF service, registering endpoints with cl_rest_router , implementing endpoint logic (example GET method), and testing the API. Based on an internal implementation reference. Why expose REST APIs from SAP? REST APIs allow SAP systems to integrate with web, mobile, and external services using standard HTTP and JSON payloads. Implementing REST endpoints in ABAP provides secure, reusable, and maintainable integration points for modern applications. Prerequisites Access to an SAP system with authorization to create classes (SE24) and SICF services (SICF). Familiarity with ABAP object-oriented concepts and basic SAP transaction codes. ABAP classes CL_REST_RESOURCE , CL_REST_ROUTER and utilities like /UI2/CL_JSON . High-level overview (4 steps) Create an API handler class (e.g. ZCL_API_HANDLER ). R...
Post a Comment
Read more

SAP ABAP - User Exit Set Batch Characteristic Value In MIGO Goods Receipt

Customer Exit  :  MBCFC004 ( EXIT_SAPMM07M_004) Set Up Customer Exit for Classification of User-Defined Characteristics You use SAP enhancement MBCFC004 EXIT_SAPMM07M_004, which contains function module exit EXIT_SAPMM07M_004 to classify user-defined characteristics automatically during goods movements in Inventory Management. This is only possible for characteristics which are not assigned values during quality inspection. Requirements 1. The class of the batch to be classified must be known.  This means that a class must be assigned either to the material or at least to one batch of this material. 2. The exit call must be activated for the respective movement type in activity Activate batch classification during goods movements in IM using indicator 'Extended classification' . Open tcode OMC...
Post a Comment
Read more

IT Asset Management Dengan PHP MySQL

Pada postingan kali saya akan share sebuah aplikasi IT Asset management yang fungsinya untuk memonitoring semua Asset khusus IT, contohnya : Laptop/komputer , Printer, Router, Hardisk, dll. Dalam aplkasi ini kita bisa mengetahui Asset IT posisinya dimana dan digunakan oleh siapa. untuk data-data yang dibutuhkan antara lain : 1. data kategori asset dalam menu ini kita bisa meng-input jenis2 kategory asset : tambah kategori asset : 2. data department 3. data karyawan 4. data department per karyawan 5. data asset location  6. data satuan asset dan untuk transaksi yang ada dalam aplikasi ini adalah,  1. create asset, pada menu create asset ini kita akan mengalokasikan sebuah asset ke karyawan/personnel tampilannya seperti berikut: setelah klik tombol save akan muncul seperti dibawah : untuk melihat detail asset yang sudah dibuat tadi, kita bisa pilih...
55 comments
Read more