Membuat Menu Dropdown Custom UI

Membuat Menu Dropdown Custom UI


Sudah sepekan lebih saya tidak membuat artikel baru diblog iparengan, bukan karena ikut aksi damai 212 lo ya karena saya tidak suka dengan aksi aksi yang rame rame semacam itu, saya hanya beraksi dirumah saja. Pada kesempatan kali ini saya akan melanjutkan artikel tentang Custom menu ribbon excel 2007 2010 2013 2016 (baca custom UI red) yaitu cara membuat menu dropdown dengan custom UI

Untuk memulai membuat menu dropdown dengan custom UI silahkan anda download terlebih dahulu aplikasi custom UI pada link ini Custom menu ribbon excel 2007 2010 2013 2016, silahkan anda instal dan pahami, custom UI merupakan aplikasi kecil yang membantu anda dalam membuat menu tambahan dimicrosoft excel, dengan aplikasi ini kita bisa menyembunyikan menu defauld yang ada pada microsoft excel dan menambahkan menu pada microsoft excel

Saya akan membagikan tiga style dropdown yang bisa kita buat dengan menggunakan aplikasi Custom UI, berikut ini caranya
- Buat file baru microsoft excel dan save as dengan enabled macro
- Buka aplikasi custom UI yang telah anda instal tadi
- Pilih Open, pilih file excel yang baru anda buat tadi
- Klik kanan lalu pilih Office 2010 custom UI part atau bisa juga Office 2007 custom UI part

1. Membuat menu dropdown dengan custom UI

Style pertama membuat menu dropdown dengan custom UI hanya berupa teks dropdown, langsung saja tambahkan kode XLM dibawah ini, lalu save / simpan

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
<ribbon>
<tabs>
<tab id="myTab" label="MyTab">
<group id="myGroupDD" label="iParengan">
<dropDown id="dd1"
label="Dropdown"
getItemCount="DDItemCount"
getItemLabel="DDListItem"
onAction="DDOnAction"
getSelectedItemIndex="DDItemSelectedIndex"/>
</group>
</tab>
</tabs>
</ribbon>
</customUI>
Untuk style ini masih memerlukan tahap selanjutnya yang akan saya teruskan dibagian akhir artikel ini

2. Membuat menu dropdown dengan custom UI

Style kedua dropdown dengan icon bawaan microsoft excel, langsung saja tambahkan kode XLM dibawah ini, lalu save / simpan

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
<ribbon>
<tabs>
<tab id="myTab" label="MyTab">
<group id="myGroupDD" label="iParengan">
<menu id="MyDropdownMenu" label="My Menu" size="large" imageMso="TextAlignGallery" >
<button id="customButton8" label="Caption 8" onAction="Macro8" imageMso="TextAlignGallery" />
<button id="customButton9" label="Caption 9" onAction="Macro9" imageMso="TextAlignGallery" />
<button id="customButton10" label="Caption 10" onAction="Macro10" imageMso="TextAlignGallery" />
<button id="customButton11" label="Caption 11" onAction="Macro11" imageMso="TextAlignGallery" />
<button id="customButton12" label="Caption 12" onAction="Macro12" imageMso="TextAlignGallery" />
</menu>
</group>
</tab>
</tabs>
</ribbon>
</customUI>

3. Membuat menu dropdown dengan custom UI

Style ketiga dropdown dengan icon yang kita buat sendiri, langsung saja tambahkan kode XLM dibawah ini, lalu save / simpan
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
<ribbon>
<tabs>
<tab id="myTab" label="MyTab">
<group id="myGroupDD" label="iParengan">

<menu id="DropDown" label="Bulanan" size="large" image="DropDown" >
<button id="B1" label="Januari" onAction="Januari" image="Bulanan" />
<button id="B2" label="Februari" onAction="Februari" image="Bulanan" />
<button id="B3" label="Maret" onAction="Maret" image="Bulanan" />
<button id="B4" label="April" onAction="April" image="Bulanan" />
<button id="B5" label="Mei" onAction="Mei" image="Bulanan" />
<button id="B6" label="Juni" onAction="Juni" image="Bulanan" />
<button id="B7" label="Juli" onAction="Juli" image="Bulanan" />
<button id="B8" label="Agustus" onAction="Agustus" image="Bulanan" />
<button id="B9" label="September" onAction="September" image="Bulanan" />
<button id="B10" label="Oktober" onAction="Oktober" image="Bulanan" />
<button id="B11" label="November" onAction="November" image="Bulanan" />
<button id="B12" label="Desember" onAction="Desember" image="Bulanan" />
</menu>
</group>
</tab>
</tabs>
</ribbon>
</customUI>
Sebelum ditutup upload terlebih dahulu icon yang ingin anda gunakan sebagai ID image="DropDown" dan ID image="Bulanan", gunakan icon yang telah saya lampirkan dibawah ini
Setelah anda selesai mengupload icon tersebut silahkan disimpan dan tutp aplikasi Custom UI.

Lanjutan Membuat menu dropdown dengan custom UI style pertama

- Buka file excel custom UI style pertama, pilih sheet1, buatlah menu dari kolom A3 sampai Kolom A13, misal pada kolom A3 "Dropdown 1" pada kolom A4 "Dropdown 2" pada kolom A5 "Dropdown 3" dan seterusnya
- Masuk ke jendela VBE tekan Alt + F11, buat modul dan ketikan kode macro dibawah ini kedalam modul tersebut

Dim ItemCount As Integer
Dim ListItemsRg As Range
Dim MySelectedItem As String
Sub DDItemCount(control As IRibbonControl, ByRef returnedVal)
With Sheet1.Range("A3:A100")
Set ListItemsRg = Range(.Cells(1), .Offset(.Rows.Count).End(xlUp))
ItemCount = ListItemsRg.Rows.Count
returnedVal = ItemCount
End With
End Sub

Sub DDListItem(control As IRibbonControl, index As Integer, ByRef returnedVal)
returnedVal = ListItemsRg.Cells(index + 1).Value
End Sub

Sub DDOnAction(control As IRibbonControl, ID As String, index As Integer)
MySelectedItem = ListItemsRg.Cells(index + 1).Value
End Sub
Sub DDItemSelectedIndex(control As IRibbonControl, ByRef returnedVal)
returnedVal = 0
MySelectedItem = ListItemsRg.Cells(1).Value
End Sub
Sub ValueSelectedItem(control As IRibbonControl)
MsgBox "The variable MySelectedItem have the value = " & MySelectedItem & vbNewLine & _
"You can use MySelectedItem in other code now to use the dropdown value"
End Sub

- Sampai disini anda bisa mencoba hasil tutorial diatas

Menggabungkan menu dropdown ketiga style

Jika anda menginginkan agar ketiga style dropdown diatas terdapat pada satu workbook maka anda bisa menggabungkanya dengan cara yang mudah, untuk mempermudah langkahnya gunkan workbook style pertama, dan gunakan kode XLM dibawah ini, kode dibawah ini merupakan kode XLM gabungan dari style pertama kedua dan ketiga

<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
<ribbon>
<tabs>
<tab id="myTab" label="MyTab">
<group id="myGroupDD" label="iParengan">
<dropDown id="dd1"
label="Dropdown"
getItemCount="DDItemCount"
getItemLabel="DDListItem"
onAction="DDOnAction"
getSelectedItemIndex="DDItemSelectedIndex"/>

<menu id="MyDropdownMenu" label="My Menu" size="large" imageMso="TextAlignGallery" >
<button id="customButton8" label="Caption 8" onAction="Macro8" imageMso="TextAlignGallery" />
<button id="customButton9" label="Caption 9" onAction="Macro9" imageMso="TextAlignGallery" />
<button id="customButton10" label="Caption 10" onAction="Macro10" imageMso="TextAlignGallery" />
<button id="customButton11" label="Caption 11" onAction="Macro11" imageMso="TextAlignGallery" />
<button id="customButton12" label="Caption 12" onAction="Macro12" imageMso="TextAlignGallery" />
</menu>


<menu id="DropDown" label="Bulanan" size="large" image="DropDown" >
<button id="B1" label="Januari" onAction="Januari" image="Bulanan" />
<button id="B2" label="Februari" onAction="Februari" image="Bulanan" />
<button id="B3" label="Maret" onAction="Maret" image="Bulanan" />
<button id="B4" label="April" onAction="April" image="Bulanan" />
<button id="B5" label="Mei" onAction="Mei" image="Bulanan" />
<button id="B6" label="Juni" onAction="Juni" image="Bulanan" />
<button id="B7" label="Juli" onAction="Juli" image="Bulanan" />
<button id="B8" label="Agustus" onAction="Agustus" image="Bulanan" />
<button id="B9" label="September" onAction="September" image="Bulanan" />
<button id="B10" label="Oktober" onAction="Oktober" image="Bulanan" />
<button id="B11" label="November" onAction="November" image="Bulanan" />
<button id="B12" label="Desember" onAction="Desember" image="Bulanan" />
</menu>

</group>



</tab>

</tabs>
</ribbon>
</customUI>

Demikianlah Membuat menu dropdown custom UI berbasis microsoft excel, silahkan ikuti blog www.iparengan.com untuk memperoleh update seputar microsoft excel VBA dan mencari tahu kode macro. Silahkan share Membuat menu dropdown custom UI ke facebook twitter google plus untuk membantu blog ini, dan berikut inimerupakan file sampel yang bisa anda pelajari lebih lanjut


Share this: