Mudahnya Mengubah Warna Glyphicons Bootstrap 3 di Aplikasi Web dari PHPMaker

Seperti yang sudah kita ketahui, sejak versi 11, PHPMaker menggunakan Twitter Bootstrap 3. Salah satu fitur yang dioptimalkan oleh PHPMaker dari CSS Framework yang satu ini adalah penggunaan glyphicons untuk menampilkan icon yang mewakili beberapa fungsi seperti Add (Copy), Edit, Delete, dan sebagainya.

Secara standar, warna icon tersebut adalah hitam. Suatu ketika, Anda dituntut untuk mengubah warna icon tersebut. Misalnya icon Add menjadi warna Hijau, icon Edit menjadi warna Biru, dan icon Delete menjadi warna Merah. Hm, boleh juga nih idenya, hehehe…

Katakanlah di halaman List untuk table orders pada project demo, kita akan mengubah ketiga icon yang masing-masing mewakili 3 fungsi di atas tadi yang terdapat di setiap Record.

Pertanyaannya adalah, bagaimana cara mengubah warna icon yang berasal dari glyphicons tadi pada Aplikasi Web yang dihasilkan oleh PHPMaker? Gampang sekali. Anda cukup menambahkan kode CSS dan PHP pada dua langkah di bawah ini.

1. Tambahkan kode CSS berikut di bawah lokasi: HTML -> Styles -> Edit styles -> di bawah baris kode /* your CSS styles here */:

   .red, .red a {
     color: red;
   }
   .green, .green a {
     color: green;
   }
   .blue, .blue a {
     color: blue;
   }
   

2. Tambahkan kode PHP pada server event ListOptions_Rendered yang berada di bawah lokasi Server Events -> Table-Specific -> List Page:

   // ListOptions Rendered event
   function ListOptions_Rendered() {
   	// Example: 
   	//$this->ListOptions->Items["new"]->Body = "xxx";
   	$this->ListOptions->Items["copy"]->Body = '<a class="ewRowLink ewCopy" title="Copy" data-caption="Copy" href="ordersadd.php?showdetail=&amp;OrderID='.$this->OrderID->CurrentValue.'"><span data-phrase="CopyLink" class="icon-copy ewIcon green" data-caption="Copy"></span></a>';
   	$this->ListOptions->Items["edit"]->Body = '<a class="ewRowLink ewEdit" title="Edit" data-caption="Edit" href="ordersedit.php?showdetail=&amp;OrderID='.$this->OrderID->CurrentValue.'"><span data-phrase="EditLink" class="icon-edit ewIcon blue" data-caption="Edit"></span></a>';
   	$this->ListOptions->Items["delete"]->Body = '<a class="btn btn-default ewRowLink ewDelete btn-sm"  onclick="ew_ClickDelete(this);return ew_ConfirmDelete(ewLanguage.Phrase(\'DeleteConfirmMsg\'), this, \'ordersdelete.php?OrderID='.$this->OrderID->CurrentValue.'\'); return false;" title="Delete" data-caption="Delete" href="javascript:void(0);"><span data-phrase="DeleteLink" class="glyphicon glyphicon-trash ewIcon red" data-caption="Delete"></span></a>';	
   }
   

Karena kita menggunakan fitur penghapusan di setiap Record (bukan Multiple-Delete), maka pastikan Anda tidak mengaktifkan item Multiple delete baik dari pengaturan level global di PHP -> Page Options (Global), atau dari pengaturan level table di Table -> Table-specific Options -> Multiple delete.

Pastikan Anda sudah mengaktifkan item Inline delete dari salah satu level pengaturan di atas tadi sebelum men-generate semua file script dengan menggunakan PHPMaker. Pengaturan ini perlu diaktifkan, supaya di setiap Record ditampilkan icon untuk menghapus.

Wow! Mudah sekali, bukan? 😀