Home / custom ui editor / ui editor excel

Kupas Tuntas Belajar Membuat Menu Ribbon Excel By Custom UI

Post a Comment

MTs. Baitul Muttaqin Tumbrasanom - Pada kesempatan kali ini, Admin akan menjelaskan secara detail Bagaimana Sih Cara Membuat Menu Ribbon di Excel Menggunakan Software Custom UI Editor for Office serta Istilah-istilah kode XML yang terdapat pada Software Custom UI Editor for Office besarta contoh kode dan file penerapan untuk pemahaman mendalam.

Luangkan waktu anda untuk (membaca, memahami dan mempraktekkan) langkah-langkah apa yang kami lakukan berikut sampai mendapatkan inti dari artikel ini sehingga anda faham dan bisa membuat menu ribbon sendiri di excel dengan cepat serta bisa mengatasi error apabila terdapat kode xml yang salah.

Karena kita akan belajar membuat menu ribbon sendiri di excel menggunakan software custom UI Editor, maka Langkah awal yang harus Anda siapkan adalah mempunyai software tersebut. Jika anda belum punya, silahkan download softwarenya.

Noted : Ada banyak cara untuk membuat menu-menu ribbon sendiri di excel, seperti membuat menu ribbon excel menggunakan (addins RibbonX, notepad++ dan lain sebagainya).

Tentang Software Custom UI Editor for Office, terdapat dua versi yaitu Custom UI Editor Versi Portable dan Versi Setup, dan berikut Link Downloadnya.

Download Custom UI Editor for Office Versi Portable

Download Custom UI Editor for Office Versi Setup

Kemudian selanjutnya yang harus anda persiapkan adalah mempunyai Software .Net Framework Versi 2,Jika anda belum punya, silahkan download softwarenya di Situs Resmi Microsoft atau ketik di google dengan keyword .Net Framework Versi 2.

Langkah selanjutnya adalah menginstal software .Net Framework Versi 2 terlebih dahulu, kemudian meng instal software Custom UI Editor for Office.

Noted : Software Custom UI Editor for Office Versi Portable Tidak Perlu Instal, Lihat Panduan Penggunaannya Dibawah.

Panduan Instal Software .Net Framework Versi 2.0

Panduan Instal/Penggunaan Software Custom UI Editor for Office Versi Setup dan Portable

Noted : Pastikan kedua software diatas terinstal dengan benar!

Oke, sekarang anda sudah mempunyai dan atau menginstal nya di komputer anda, langkah selanjutnya silahkan baca dan pahami disetiap menu dibawah ini serta mempraktikkan.

Usahakan tidak terburu-buru dalam membaca, memahami serta mempraktikan panduan dibawah ini.

Pengenalan Software Custom UI Editor for Office Versi Portable dan Setup

Melansir dari Situs Resmi Microsoft bahwa Software Custom UI Editor for Office berfungsi untuk meng Edit, Mengurangi, Menambah, Bahkan Mengganti Total Menu Ribbon Default Office Serta Menghubungkannya Dengan Bahasa VB, C# dan atau Menghubungkan Dengan Macro. Namun pada topik ini kita menggunakan bahasa macro (Macro Code) untuk menghubungkannya, tepatnya menghubungkan dengan Microsoft Excel.

Merujuk dari situs resminya microsoft, kita dapat mengambil kesimpulan (menggunakan bahasa kita sendiri) bahwasanya, Custom UI Editor memang dirancang oleh microsoft untuk MengCustomisasi Menu Ribbon Office sesuai kebutuhan pengguna, itu artinya pengguna dapat membuat menu ribbon sesuai kebutuhan baik di microsoft word, excel, powerpoint dan lain sebagainya dengan berpedoman/berpanduan di web resmi microsoft.

Mengenai Software Custom UI Editor Versi Portable dan Versi Setup penggunaannya sama saja, hanya saja yang membedakan adalah pertama saat kita menggunakan yaitu jika Versi Portable, Pengguna tidak perlu menginstal di komputer/Laptop, itu artinya sistem tidak tersimpan dalam disk C, sedangkan Versi SetUp, Pengguna harus menginstal di komputer/laptop dulu supaya dapat digunakan, itu artinya sistem software tersimpan dalam Disk C.

Fungsi Software Custom UI Editor for Office

Seperti yang sudah kami sampaikan diatas bahwasannya, Fungsi utama Software Custom UI Editor memang untuk MengCustomisasi Menu Ribbon sesuai kebutuhan kita yaitu Menambah, Mengurangi/Menyembunyikan dan atau Mengganti Total Menu Ribbon Office, dalam hal ini Menu Ribbon Microsoft Excel.

Selain itu, Software Custom UI Editor ini juga bisa mengganti dan atau mencustom Icon Ribbon. Anda dapat mencustom Icon Ribbon menggunakan beberapa extensi seperti (.ico, bmp, gif dan png) dengan ukuran/size yang berbeda-beda, mulai dari ukuran (16, 20, 24, 32 dan 42).

Noted : Anda juga dapat membuat Icon Ribbon Buatan Sendiri untuk digunakan sebagai Icon Menu Ribbon di Aplikasi Buatan Anda.

Artikel yang mungkin Ingin Anda Kunjungi juga

  • Download Icon Ribbon Excel Lengkap (png, icon, bmp, gif) ukuran (16, 20, 24, 32 dan 42).
  • Cara Membuat Icon Ribbon Buatan Sendiri By Adobe PhotoShop Versi CS2.

    • Sekilas membaca Fungsi Software Custom UI Editor diatas, rasanya itu dari segi Tekstual, namun secara Kontekstual, Software Custom UI juga berfungsi untuk mempercantik tampilan aplikasi buatan kita, terlihat lebih simpel, alur aplikasi buatan kita terlihat jelas dan mudah dipahami, meminimalisir size aplikasi (karena size icon ribbon hanya beberapa kb saja), aplikasi buatan kita terlihat teratur dan pastinya terlihat tidak kaleng-kaleng.

    Bahasa Yang Digunakan Software Custom UI Editor for Office

    Bahasa atau biasa kita sebut code yang digunakan dalam software custom UI Editor telah tersirat di web resmi microsoft yaitu menggunakan code XML atau singkatan dari Extensible Markup Language yang berarti bahasa markup yang berfungsi untuk menyederhankan proses penyimpanan dan pengiriman data antar server.

    Sebenarnya Kode XML yang kita bahas disini adalah kode XML yang dibuat sendiri oleh Microsoft yaitu MSXML Code.

    Adapun XML Code (Entensible Markup Language) ini diciptakan oleh Consorsium World Wide Web (W3C). Siapa sih Consorsium World Wide Web (W3C) itu ?

    Melansir dari Wikipedia.com bahwasanya Consorsium World Wide Web (W3C) adalah Suatu Konsersium Yang Bertugas/Bekerja Mengembangkan Standart-standart Untuk Waring Wera Wanua. Spesifikasi teknologi-teknologi utama yang dipakai sebagai basic utama WEB, seperti URL (Uniform Resource Locator), HTTP (Hypertext Transfer Protocol), dan HTML (Hypertext Marup Language) dikembangkan dan diatur oleh badan ini.

    Udah mulai pusing yha..sama donk..Wkwk :)

    Udah jangan di paksa'in, baca dan ikuti aja dulu artikel ini, Waktu Admin masih pertama belajar kode XML / MSXML juga gitu kok, malah sering tidur malem-malem.

    Dan yang terpenting untuk Anda yang masih pemula, saran admin baca, pahami dan praktikan aja terus, jika udah khatam, ulangi lagi baca dan praktiknya sampai mendapat intinya dan paham/bisa/menguasai hingga Anda bisa mengatasi notifikasi error kode XML.

    Oke, Selanjutnya kita akan mempelajari apa saja sih Istilah-istilah Kode yang terdapat pada MSXML Custom UI Editor.

    Noted : Baca dan Pahami secara perlahan !

    Istilah-istilah Kode MSXML Custom UI Editor for Office

    Pada bagian ini, mungkin kita harus agak teliti dan mengandalkan ingatan untuk menghafal Istilah-istilah Kode MSXML Custom UI Editor beserta fungsi/kegunaannya sebab lumayan banyak dan kodenya agak mirip-mirip.

    Dikarenakan sangat banyak istilah kode MSXML, Admin hanya menjabarkan istilah yang sering digunakan dalam keseharian.

    Untuk memudahkan pemahan, Admin akan mencoba membuat tabel untuk pengelompokan supaya para pembaca tidak terlalu bingung dan pusing.

    Berikut adalah Istilah-istilah Kode MSXML yang sering atau yang digunakan dalam keseharian.

    Kode MSXML Yang Warna Merah
    id Berfungsi sebagai Identitas suatu element tanpa harus berpedoman komponen office
    idMso Berfungsi sebagai Identitas suatu element yang harus berpedoman komponen office
    Label Berfungsi sebagai Caption/Nama dari tombol menu ribbon
    Size Berfungsi untuk mengatur ukuran icon/tombol dari menu ribbon
    image Berfungsi sebagai icon menu ribbon yang tanpa harus berpedoman komponen office
    imageMso Berfungsi sebagai icon menu ribbon yang harus berpedoman komponen office
    startFromScratch Berfungsi untuk menampilkan dan atau menyembunyikan menu default office
    insertAfterMso Berfungsi untuk menaruh tab di sebelah kanan/sesudah menu yang lain
    insertBeforeMso Berfungsi untuk menaruh tab di sebelah kiri/sebelum menu yang lain
    onAction Berfungsi untuk menghubungkan ke kode macro
    enabled Berfungsi sebagai pengaktif dan atau penonaktif dari suatu tombol (tergantung actionnya False or True)
    desabled Berfungsi sebagai penonaktif dan atau pengaktif dari suatu tombol (tergantung actionnya True or False)
    visible Berfungsi untuk menampilkan dan atau menyembunyikan icon tombol (tergantung actionnya True or False)
    Kode MSXML Yang Warna Coklat
    customUI Berfungsi sebagai pembuka <customUI> kode MSXML  dan </customUI> Berfungsi sebagai penutup kode MSXML
    command Berfungsi sebagai element untuk tombol (tombol bawaan office yang mempunyai nilai true/false)
    ribbon Berfungsi sebegai element untuk ribbon office (tergantung fragmentnya menggunakan komponen office yang mana)
    tabs Berfungsi sebagai element untuk membuat banyak tab di ribbon office
    tab Berfungsi sebagai element untuk membuat menu tab di ribbon office
    group Berfungsi sebagai element untuk mengelompokkan beberapa tombol/command
    separator Berfungsi sebagai element garis pemisah antar tombol/command
    button Berfungsi sebagai element untuk tombol didalam tab
    Kode MSXML Yang Warna Biru

    Untuk kode MSXML berwarna biru, tergantung Fragment nya ya sob. Jika Fragmentnya ada embel-embel Mso maka, Actionnya harus berpedoman dengan komponen office, dan jika Fragment nya tidak ada embel-embel Mso maka, tidak berpedoman komponen office (Boleh diberinama sesuka hati Anda).

    Contoh :

    Element MSXML Kode Yang Sering Digunakan Dalam Keseharian

    Dalam membuat aplikasi berbasis Microsoft Excel, adakalanya kita menaruh menu-menu aplikasi buatan kita pada bagian ribbon excel. Pada umumnya, kita sering MenCustomisasi Ribbon Excel menggunakan Software Custom UI Editor yang mana bahasa yang digunakan adalah bahasa XML.

    Untuk lebih singkatnya,Admin akan memberikan gambaran berupa .jpg menu ribbon yang sering digunakan supaya mengerti maksudnya admin.

    Melihat gambar .jpg diatas, menurut admin itulah yang sering digunakan atau yang umum digunakan pada aplikasi-apikasi pendidikan dan perkantoran atau aplikasi-aplikasi yang ada di internet. Tidak itu saja, tapi yang sering juga admin gunakan dalam membuat aplikasi berbasis Microsoft Excel.

    Berikut adalah Element kode XML/MSXMl pada gambar diatas.

    Command, Tabs, Tab, Group, Button, dropdown dan separator.

    Mengenai fungsi dari elemen-elemen diatas, Admin sudah jelaskan pada bagian ini, sehingga anda dapat membaca ulang apabila masih bingung tentang fungsi-fungsinya.

    Noted : Sering praktik lebih efisien dalam pembelajaran.

    Oke, sekarang kita coba Menerapkan serta mempraktikkan Element Kode XML dalam membuat menu-menu aplikasi buatan kita pada bilah ribbon excel.

    Penerapan Kode XML Untuk Meng (Edit, Hapus, Nambah) Menu Ribbon Excel

    Pada bagian ini, admin merekomendasikan kepada sobat exceller untuk praktik, karena bagian ini termasuk inti dari pembelajaran kita.

    Sebelum kita mulai pengkodean, silahkan sobat persiapkan dulu file percobaannya.

    Buat file baru dengan nama dan extensi file Customisasi Ribbon Excel Pertamaku dengan extensi Excel Binary WorkBook .xlsb atau Excel Enable Macros .xlsm, kemudian close file excelnya.

    Jika sudah, sekarang silahkan buka Software Custom UI Editor for Office yang Versi SetUp. Untuk versi portable sama saja, tapi kita pakai versi Setup oke..

    Yang pertama kita akan Membuat Menu Ribbon Excel seperti gambar dibawah ini.

    Untuk membuat menu ribbon excel seperti gambar di atas, ikuti langkah-langkah dibawah ini dengan benar.

    • Buka software custom UI Editor versi setup
    • Open file excel yang anda buat tadi
    • Klik kanan file, lalu pilih 2007 dan 2010
    • Salin kode MSXML dibawah ini dan tempelkan kedalam office 2007
    • Kemudian salin Kode MSXML dibawah ini kedalam office 2010
    • Klik menu Validation untuk mengecek kevalidan kode. Jika tampil Notifikasi vbInformation maka, Kode XML sudah benar dan silahkan klik tombol save. Sekarang lanjutkan ke tahap berikutnya.
    • Untuk mengetahui hasilnya, silahkan close project.
    • Buka file excel yang sudah kita customisasi tadi.
    • djdjsjsjsjsjsjsjbdhdjsj

    Jika anda melakukan langkah-langkah diatas dengan benar maka, menu ribbon file excel anda akan seperti gambar diatas.

    Jika sudah sama persis, silahkan save dan lanjutkan ke tahap berikutnya.

    Jenis-jenis Error Kode XML Software Custom UI Editor for Office

    Ada beberapa Jenis Notifikasi Error yang terdapat pada software Custom UI Editor, diantaranya notifikasi Error vbExlamation dan vbCritical.

    Oke, sekarang kita pelajari notifikasi Error Jenis vbExlamation dulu.

    Ketik selesai pengkodean xml, biasanya kita akan mengklik tombol validation untuk mengetahui apakah kode xml yang kita buat sudah benar atau masih salah.

    Sistem Software Custom UI Editor akan memberitahu kita melalui kotak dialogbox yang disertai alasan lesalahan dan di bagian baris yang mana yang harus diperbaiki, kecuali notifikasi vbInformation.

    Noted : vbInformation tidak menjamin kode XML bisa berjalan 100%, karena Admin pernah mengalami sendiri. Contoh kode XML dibawah ini silahkan dicoba.

    Solusi Jika Kode XML Software Custom UI Editor for Office Error

    Setelah membaca dan mempelajari serta mempraktikkan error kode xml custom ui editor, sekarang waktunya praktik dan bagaimana cara mengatasi notifikasi error xml code.

    Solusi Kode XML Hilang Saat Edit Di Komputer Lain

    Cara Memasang Icon Di Menu Ribbon Excel

    Cara Membuat Icon Ribbon Excel Buatan Sendiri Di PhotoShop

    Download Icon Ribbon Office Semua Ukuran dan Extensi

    Admin juga menyediakan icon untuk customize ribbon office dengan beberapa ukuran dan extension.

    Seperti yang sudah admin sampaikan diawal artikel, link download sudah kami sediakan diatas.

    Untuk bab ini, Jika sobat excel memakai icon ribbon hasil download an diatas maka, admin menyarankan untuk memakai extension .ico dengan ukuran 40*40.

    Sebenarnya sama saja, tergantung kebutuhan, jika size nya large maka lebih baik pakai .ico ukuran 40*40, dan jika sizenya small maka pakai .ico ukuran 24*24. Jika sizenya large kemudian anda memakai .ico ukuran 24*24 maka akan terlihat ngeblur.

    Sesi Tanya Jawab

    Alhamdulillah..sekarang sudah sampai sesi tanya jawab. Ternyata capek juga ya bikin artikel ini. Apalagi sebagian artikel ngetik pakai android, hemm..

    Oke, berikut adalah pertanyaan yang sering admin jumpai.

    • Bagaimana cara membuat beberapa tab di menu ribbon di excel ?
    • Apakah software custom UI Editor bisa digunakan untuk membuat menu ribbon di Microsoft Word ?

    Unduh File Penerapan

    Kesimpulan dan Penutup

    Saran dan Masukan

    Mas Syaref
    Mas Syaref Anggota KKM MTsN 3 Bojonegoro

    Post a Comment for "Kupas Tuntas Belajar Membuat Menu Ribbon Excel By Custom UI"

    Post a Comment