Custom UI – Membuat Split Button Pada Ribbon


Split Button Ribbon

Split button adalah sebuah tombol yang menggabungkan Togle button dan juga Dropdown. Biasanya jenis button ini digunakan untuk membuat tombol yang memiliki kesamaan fungsi.

Split button bisa digunakan untuk menghemat ruang tombol dalam satu Group. Karena Menu yang sama dikumpulkan dalam satu tombol dan tombol utama tersebut akan menampilkan menu seperti dropdown tetapi dalam bentuk button.

Split Button Ribbon

Dengan menggunakan split button penataan tombol menjadi lebih efisien dan juga tertata rapih.

Untuk membuatnya, langkah pertama buka Custom UI Editor atau Office RibbonX Editor. Jika kamu belum menginstall salah satu Editor tersebut silahkan download di halaman Download Custom UI Editor.

Pada jendela Custom UI Editor, klik open file, lalu pilih File yang akan di tambahkan Custom Ribbon atau yang akan di Cutsomize dengan Custom UI.

Klik File dan Insert Office 2010+ Custom UI Part dan juga Office 2007 Custome UI Part. Dibuatkan keduanya agar File bisa dibuka di versi office mana saja.

Insert CustomUI Part

Script XML Split Button

Untuk menambahkan Split Button, berikut script yg digunakan untuk Office 2010+ Custom UI Part. Simpan script dibawah ini pada bagian CustomUI14.xml

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
    <ribbon startFromScratch="true">
        <tabs>
            <tab id="customTab" label="Excel Noob">
                <group id="group" label="group 1">
                    <splitButton id="Splitbutton1" size="large" >
                        <button 
                            id="button" 
                            imageMso="BlogCategories" 
                            label="Split Button" />
                        <menu id="menu">
                            <button 
                                id="button1" 
                                imageMso="BlogPublish" 
                                label="Button 1" />
                            <button 
                                id="button2" 
                                imageMso="BlogPublishDraft"  
                                label="Button 2" />
                            <button 
                                id="button3" 
                                imageMso="BlogManageAccounts"  
                                label="Button 3" />
                        </menu>
                    </splitButton>
                </group>
           </tab>
        </tabs>
    </ribbon>
</customUI>

Silahkan edit sesuai dengan kebutuhan, jika sudah kemudian klik Validate dan pastikan muncul pesan seperti dibawah ini. Itu artinya penulisan script sudah benar.

Custom UI well Formated

Jika masih mengalami error, pastikan semua penulisan script sudah sesuai ketentuan penulisan XML Custom UI dan perbaiki Error sesuai dengan pesan Error yang ditampilkan.

Sedangkan untuk bagian CustomUI.xml atau bagian Office 2007 Custom UI Part, Copy Kembali script diatas dan hanya perlu mengganti Namespace dari office/2009/07 menjadi seperti dibawah ini.

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">

Kemudian klik Validate kembali untuk memastikan script sudah ditulis dengan benar.

Jika sudah benar, pada Custom UI Editor Klik Save dan tutup Custom UI Editor.

Silahkan buka kembali File Excel yang sudah ditambahkan dengan Custom UI, jika berhasil maka kamu akan menemukan Custom UI Ribbon seperti pada gambar diatas.

File diatas juga bisa kamu download disini: Excelnoob – Split Button

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *