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

Comments

Popular posts from this blog

PHP MySql CRUD Dengan Konsep MVC

Pada postingan kali ini saya akan sharing cara membuat CRUD dengan php menggunakan konsep MVC, ok langsung saja buka code editor (saya menggunakan sublime text) dan buat folder baru dengan nama phpmvc didalam folder htdocs kalian dan tambah folder seperti berikut :  Setelah itu kita siapkan database di mysql, buat database dengan nama phpmvc dan tablenya seperti gambar berikut : tambahkan file config.php didalam folder app/config : <?php define('BASEURL', 'http://localhost:8181/phpmvc/public'); define('DB_HOST', 'localhost'); define('DB_USER', 'root'); define('DB_PASS', ''); define('DB_NAME', 'phpmvc'); kemudian tambahkan 3 file controller didalam folder app/controllers, yaitu Home, About, dan Mahasiswa : Home.php <?php class Home extends Controller { public function index() { $data['nama'] = $this->model('User_model')->getUser()...

Cara Sederhana Multi Insert Data Dengan PHP - MySQL

Pada postingan kali ini saya akan share cara melakukan insert lebih dari satu data dengan menggunaka PHP- Jquery dan MySQL. Pertama buat database di MySQL dan table, disini saya membuat database dengan nama db_latihan dan table dengan nama t_barang dengan struktur table seperti berikut : Setelah membuat database dan table selanjutnya membuat project PHP, project PHP nya saya buat dengan nama multi-insert, lalu didalam folder ini saya membuat dua file yaitu index.php dan insert.php . Source code index.php seperti berikut : <! doctype   html > < html   lang = "en" >    < head >      <!-- Required meta tags -->      < meta   charset = "utf-8" >      < meta   name = "viewport"   content = "width=device-width, initial-scale=1" >      <!-- Bootstrap CSS -->      < link ...

Laravel - Sistem Informasi Perpustakaan Sederhana Laravel

Postingan kali saya akan sharing membuat aplikasi perpustakaan sederhana menggunakan laravel 5.8, dimana terdapan menu Anggota, Kategori Buku, Daftar Buku dan Transaksi (Peminjaman/Pengembalian Buku). ok langsung saja kita buat project laravel dengan nama perpus : composer create-project --prefer-dist laravel/laravel perpus setelah create project laravel-nya selesai kita buat database melalui localhost/phpmyadmin dengan nama db_perpus, lalu kita buka project laravel dengan code editor disini saya menggunakan visual studio code. Setelah project kita buka dengan code editor, pertama kita atur koneksi database yang ada di file .env, kita rubah menjadi seperti berikut : note : untuk db_username dan db_password di sesuiakan dengan configurasi masing-masing. Selanjutnya kita tambahkan 4 buah data migration yaitu : table_anggota, table_kategori, table_buku, table_transaksi, kita buka terminal dan jalankan command berikut :  php artisan make:migration crea...