CustomUI : Konsep Dasar

Sejak Microrosft Office 2007, File Microsoft office mengalami perubahan. Misalnya dalam Excel yang awalnya XLS menjadi XLSX ataupun di Ms Word dari DOC menjadi DOCX.

File XLSX atau DOCX ini sebenrnya adalah sebuah File ZIP dimana didalamnya terdapat Folder dan File-File yang membentuk File XML.

Salah satunya didalamnya ada configurasi untuk CustomUI.

Jika File XLSX dibuka maka akan terlihat seperti dibawah ini isinya.

Membuat CustomUI Manual

Sebelum belajar bagaimana membuat CustomUI dengan bantuan Aplikasi pihak ketiga seperti CustomUI Editor, RibbonX Editor dll.

Disini saya akan jelaskan bagaimana CustomUI dibuat secara manual hanya menggunakan Notepad.

Setelah kita membuka isi dari File Excel dan terlihat banyak folder didalamnya, yang selanjutnya harus dilakukan adalah membuah Folder customUI dan sebuah File customui.xml didalamnya.

Pada Customui.xml bisa diisi dengan script untuk membuat sebuah Custom Ribbon dimulai dari Customui Namespace

XML NameSpace

Dalam XML, namespace memungkinkan pengguna untuk membuat prefiks yang terkait dengan suatu URI (Uniform Resource Identifier) untuk mengidentifikasi elemen dan atribut secara unik.

Namespace umumnya didefinisikan menggunakan atribut xmlns dalam elemen root dari dokumen XML atau dalam elemen yang membutuhkan identifikasi unik.

Dengan menggunakan namespace ini, pengembang dapat menentukan tata letak Ribbon, tab, grup, dan kontrol Custom yang ingin ditambahkan ke antarmuka pengguna Office.

Ada 2 namespace yang digunakan dalam CustomUI Office

  • Namespace Office Fluent UI pada Office 2007:
<customUI xmlns="http://schemas.microsoft.com/office/2006/01/customui">
  • Namespace Office Fluent UI pada Office 2010
<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">

Script CustomUI selanjutnya bisa diisi dengan Tab, group ataupun Button sesuai dengan apa yang ingin dibuat.

Misalnya disini saya contohkan membuat 1 Tab dan 1 buah Group dan didalamnya terdapat 1 buah button, maka script bisa ditulis menjadi.

<customUI xmlns="http://schemas.microsoft.com/office/2009/07/customui">
    <ribbon startFromScratch="true">
        <tabs>
            <tab id="customTab" label="VBA.CO.ID">
                <group id="customGroup1" label="Group 1">
                    <button id="Dash" 
                        visible="true" 
                        size="large" 
                        label="Dashboard" 
                        imageMso="OpenStartPage" 
                        onAction="Dashboard"/>
                    <button id="Input" 
                        visible="true" 
                        size="large" 
                        label="Input Data" 
                        imageMso="SignatureLineInsert" 
                        onAction="InputData"/>
                    <button id="DB" 
                        visible="true" 
                        size="large" 
                        label="Database" 
                        imageMso="AccessTableContacts" 
                        onAction="Database"/>
                </group>
                <group id="customGroup2" label="Tentang">
                    <button id="tentang" 
                        visible="true" 
                        size="large" 
                        label="vba.co.id" 
                        imageMso="BlogCategories" 
                        onAction="tentang"/>
                </group>
            </tab>
        </tabs>
    </ribbon>
</customUI>

Relationship

Script customUi diatas tidak akan dibaca oleh Office jika belum memiliki relationship pada folder .rels. Tambahkan script relationship pada filte rels agar file xml yang tadi telah dibuat bisa terbaca.

Berikut ini adalah relationship untuk pengguna Office 2010

<Relationship Id="rId5" Type="http://schemas.microsoft.com/office/2007/relationships/ui/extensibility" Target="/customUI/customUI.xml"/>

sedang ini adalah relationship untuk pengguna Office 2007

<Relationship Id="rId5" Type="http://schemas.microsoft.com/office/2006/relationships/ui/extensibility" Target="/customUI/customUI.xml"/>

simpan relationship ini tepat sebelum tag penutup </relationship>.

Leave a Reply

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

Chat WhatsApp
WhatsApp