Membuat Module Odoo (Bagian 6 – Form dan Tree View)

Ngasturi bin Saidi6 commentsOdooBahasa IndonesiaOdooPythonTutorial

Kita sudah membahas model dan field di bagian sebelumnya, lalu bagaimana menampilkan data suatu model ? Sehingga user bisa input data ?. Tibalah waktunya untuk membahas hal paling penting bagi end user, yaitu View.

View pada Odoo ditulis dengan menggunakan bahasa xml, walaupun begitu anda tetap bisa menggunakan bahasa html di sela-sela xml ini. Odoo memiliki banyak tipe view, tetapi pada bagian ini kita akan fokus pada Form, dan Tree. View yang lain akan kita bahas pada bagian lain jika ada kesempatan.

Form adalah view untuk input data, yah seperti umumnya form , view ini adalah tempat text input, number input, date input dll. Sedangkan Tree pada umumnya adalah tabel. Kenapa Odoo tidak menyebutnya Tabel saja ? Karena Tree bisa berubah bentuk mulai dari seperti tabel html, sampai bentuk tree seperti pada windows explorer.

Berikut ini beberapa hal yang perlu anda tahu mengenai view pada Odoo, terutama yang berkaitan dengan Form dan Tree.

  1. Kode Minimal

    Berikut ini adalah kode minimal suatu view.

    <?xml version="1.0"?>
<odoo>
    <data>
     <!-- script diatas ini adalah script default, sebaiknya ada -->
     
        <!-- Tempatkan kode view anda disini -->
     
     <!-- script dibawah ini adalah script default, sebaiknya ada -->
    </data>
</odoo>
  2. Action

    Action adalah proses yang dijalankan oleh Odoo jika user menekan suatu tombol atau menu tertentu. Ada banyak tipe action pada Odoo, seperti action window, action client, action server, action report dll. Untuk menggunakan view Form dan Tree kita biasanya menggunakan action window.

    Sebagai contoh kasus, misal kita memiliki model seperti ini. 

    # -*- coding: utf-8 -*-
from odoo import api, fields, models, exceptions, _
import datetime

class MyService(models.Model):    
    _name = 'my.service'
    _description = 'Service'

    customer = fields.Char(string="Nama Pelanggan")
    device = fields.Char(string="Nama Mesin")
    device_sn = fields.Char(string="Serial Number Mesin")
    is_guarantee = fields.Boolean(string="Garansi",default=False)
    description = fields.Text(string="Keluhan Pelanggan")
    service_date = fields.Datetime(string="Tanggal Service",default=fields.Datetime.now)
    scheduled_date = fields.Datetime(string="Perkiraan Selesai",default=fields.Datetime.now)
    finish_date = fields.Datetime(string="Tanggal Selesai")
    take_by_customer_date = fields.Datetime(string="Tanggal Ambil")
    type_of_service = fields.Selection([
            ('normal','Normal'),
            ('quick','Kilat'),
            ('extra','Super Kilat')
        ],default='normal',string="Tipe Service")
    state = fields.Selection([
            ('draft','Draft'),
            ('in_progress','In Progress'),
            ('stuck','Stuck'),
            ('cancel','Cancelled'),
            ('finish','Finish'),
            ('take','Take by User')
        ],default='draft')

    Untuk membuat action agar user bisa input data, buat kode seperti ini 

    <?xml version="1.0"?>
<odoo>
    <data>
     <!-- script diatas ini adalah script default -->

     <!-- buat action untuk aksi utama-->
     <record model="ir.actions.act_window" id="open_service_form">
         <field name="name">Service Form</field>
         <field name="type">ir.actions.act_window</field>
         <field name="res_model">my.service</field>
         <field name="view_type">form</field>
         <field name="view_mode">tree,form</field>
     </record>     
        
    </data>
</odoo>

    Penjelasan kode diatas adalah sebagai berikut

    • model

      Kode default jika ingin membuat action window. Jangan diubah

    • id

      Identitas action anda, anggap saja ini adalah primary key. Dalam satu module anda tidak boleh memiliki id dengan nama yang sama. Jika nama sama tetapi beda module tidak masalah . Bagian ini penting. Isi bebas asalkan tidak mengandung spasi atau karakter aneh2.

    • name

      Nama action. Isi bebas, hanya untuk tampilan saja. Sebaiknya kata-kata yang jelas, karena bagian ini terlihat oleh user.

    • type

      Kode default jika ingin membuat action window. Jangan diubah

    • res_model

      Model yang ingin ditangani oleh action ini. Dalam kasus ini adalah model “my.service” yang sudah kita buat diatas. Bagian ini penting.

    • view_type

      Jika diisi “form” tombol Create dan Edit akan tampil. Jika diisi “tree” tombol Create dan Edit tidak akan tampil. Sebaiknya isi saja “form”.

      • Update Penting !!!

      Sejak odoo versi 14, view_type sudah tidak ada, hapus saja bagian ini.

    • view_mode

      List tampilan yang dapat ditangani oleh action ini. Kode diatas maksudnya saat pertama kali action ini dijalankan Odoo akan menampilkan data service dalam bentuk Tree (tabel), sehingga semua datanya terlihat. Jika user klik pada salah satu baris Tree maka akan tampil dalam bentuk Form yang berisi data lengkap untuk baris tersebut. Jika anda isi Tree saja anda tidak akan bisa lihat data secara detail atau jika anda isi Form saja anda tidak akan bisa lihat semua data service yang tersimpan di database.

  3. Main Menu

    Main menu adalah menu yang tampil pertama kali saat anda membuka aplikasi Odoo. Menu ini biasanya memiliki sebuah icon, hal ini tidak wajib, tapi sebaiknya anda menyiapkan icon dalam bentuk file png. Dalam source code yang saya sertakan dibawah, saya menggunakan icon web saya yang lain tolong jangan pakai untuk tujuan komersial. Berikut ini contoh pembuatan Main Menu. 

    <!-- Menu utama service -->
<menuitem name="Service"
    id="service_main_menu"
    web_icon="module_odoo_bag_enam,static/description/icon.png"
    action="open_service_form"
    sequence="0"/>

    Penjelasan kode diatas adalah sebagai berikut

    • name

      Isi bebas, bagian ini tampak oleh user dibawah icon

    • id

      Lihat penjelasan id pada bagian Action

    • web_icon

      Icon Main menu anda. Tidak wajib diisi. Format penulisannya adalah : nama_folder_module_anda,path_dimana_file_icon_anda_disimpan. File icon harus berada didalam folder module anda.

    • action

      Action yang akan diprosess jika menu ini diklik. Isi dengan id action yang sudah anda buat.

    • sequence

      Urutan menu ini ditampilkan. Diisi 0 artinya menu ini ditampilkan pertama kali / paling kiri.

    Jika anda sudah punya Model, Action dan Menu (Main Menu termasuk) anda sudah bisa membuat CRUD lengkap. Tidak perlu memikirkan routing, controller, query dll. Form input akan dibuat oleh Odoo secara otomatis, tentu saja dengan tampilan default.

    Berikut ini adalah tampilan awal yang berisi Main Menu yang sudah kita buat.

    Berikut ini adalah tampilan Form default yang dibuat Odoo dari model yang sudah kita buat yaitu “my.service”.

    Sedangkan ini adalah tampilan Tree / tabel default.

  4. Manipulasi Form

    Jika anda tidak puas dengan Form yang dibuat secara otomatis oleh Odoo, anda dapat mengubahnya. Berikut ini caranya.

    • Kode Dasar

      Berikut ini adalah kode dasar suatu form. 

      <record id="service_form" model="ir.ui.view">
    <field name="name">Service Form</field>
    <field name="model">my.service</field>
    <field name="type">form</field>
    <field name="arch" type="xml">
        <form>
            <header>
                <!-- tempatkan kode header seperti tombol dll disini -->
            </header>
            <sheet>
                <!-- tempatkan kode yang berhubungan dengan input disini -->
            </sheet>
        </form>
    </field>
</record>

      Pada kode diatas bagian yang bisa anda edit adalah id, name dan model. Pengisiannya sama dengan Action dan Main menu.

    • Menampilkan Form Input Field

      Berikut ini adalah contoh bagaimana kita menampilkan form input suatu field. 

      <record id="service_form" model="ir.ui.view">
    <field name="name">Service Form</field>
    <field name="model">my.service</field>
    <field name="type">form</field>
    <field name="arch" type="xml">
        <form>
            <header>
                <!-- tempatkan kode header seperti tombol dll disini -->
            </header>
            <sheet>
                <!-- tempatkan kode yang berhubungan dengan input disini -->
                <!-- usahakan kode pertama adalah group, group digunakan untuk membagi view dalam beberapa kolom, juga untuk menampilkan string/label -->
                <!-- membagi tampilan dalam 2 kolom -->
                <group>
                    <group>
                        <field name="customer" />
                        <field name="device" />
                        <field name="is_guarantee" />
                    </group>
                    <group>
                        <field name="service_date" />
                        <field name="device_sn" />
                        <field name="type_of_service" />
                    </group>
                </group>
                <!-- membagi tampilan dalam 3 kolom -->
                <group col="12">
                    <group colspan="4">
                        <field name="scheduled_date" />
                    </group>
                    <group colspan="4">
                        <field name="finish_date" />
                    </group>
                    <group colspan="4">
                        <field name="take_by_customer_date" />
                    </group>
                </group>
                <!-- tampilan penuh untuk input text yang panjang -->
                <group>
                    <field name="description" />
                </group>
                <!-- kode html dengan bootstrap -->
                <div>
                    <p>
                        Ini adalah kode <span class="label label-success">HTML</span> dengan <span class="label label-primary">Bootstrap</span>
                    </p>
                </div>
            </sheet>
        </form>
    </field>
</record>

      Untuk menampilkan field kedalam form view anda hanya perlu mengetikkan kode field diikuti nama field saja. Anda tidak perlu menentukan apakah tampilan berupa text input, text area, date input atau check box. Semua itu ditangani Odoo secara otomatis berdasarkan tipe data suatu field.

      • Status Bar

      Jika anda memiliki form yang terdiri dari banyak status, misal form service yang baru saja kita buat, anda bisa menggunakan status bar untuk menampilkan status form saat itu. Misal untuk menampilkan status apakah sedang dikerjakan, apakah sudah selesai dll. Dengan Status Bar tampilan akan jadi lebih menarik. Berikut ini contoh menggunakan status bar. 

      <header>
    <!-- tempatkan kode header seperti tombol dll disini -->
    <field name="state"
        widget="statusbar"
        statusbar_visible="draft,in_progress,finish,take"/>
</header>

      Field yang akan digunakan sebagai penanda status bar harus bertipe data Selection. statusbar_visible adalah selection yang secara default tampil, dalam hal ini kita hanya menampilkan status “draft,in_progress,finish,take” karena ini adalah status yang normalnya saling berurutan. Sedangkan status yang tidak berurutan dengan status lainnya misal stuck dan cancel hanya ditampilkan pada konsisi tertentu.

    • Button

      Ada 2 type suatu button yaitu Action dan Object. Pada contoh kali ini kita akan menggunakan tipe button object, yaitu button yang meng-eksekusi kode python. Berikut ini contoh penggunaan button. 

      <button name="update_form_to_in_progress"
    type="object"
    class="oe_highlight"
    string="Set to In Progress"/>

      Isi name dengan nama function dalam model anda. Sedangkan string adalah label yang tampak pada user. Berikut ini contoh function untuk button diatas. 

      @api.multi
def update_form_to_in_progress(self):
    for record in self:
        record.write({'state':'in_progress'})

      Update Penting !!!

      Sejak odoo versi 13, @api.multi telah dihapus. Kode diatas dapat ditulis tanpa kode @api.multi dengan fungsi yang tidak berubah.

      Berikut ini tampilan form dengan button dan status bar.

  5. Tree

    Berikut ini adalah contoh kode pembuatan Tree. 

    <record id="service_tree" model="ir.ui.view">
    <field name="name">Service Tree</field>
    <field name="model">my.service</field>
    <field name="type">tree</field>
    <field name="arch" type="xml">
        <tree >
            <field name="customer"/>
            <field name="device"/>
            <field name="service_date" />
            <field name="scheduled_date" />
            <field name="state"/>
        </tree>
    </field>
</record>

    Kode Tree umumnya sangat sederhana, yaitu hanya untuk menentukan field mana saja yang ditampilkan. Berikut ini tampilan Tree dari kode diatas.

Bagaimana mudah bukan ?

Download Source Code

Tulisan Serupa
facebookShare on Facebook
TwitterTweet
FollowFollow us
← →

6 Replies to “Membuat Module Odoo (Bagian 6 – Form dan Tree View)”

    1. Maaf ada banyak yang sudah berubah pada odoo sejak artikel ini ditulis, saya akan mulai mereview seri tutorial ini mulai dari bagian pertama, agar bisa berjalan di odoo 14. Mungkin butuh waktu untuk sampai ke bagian 6

Leave a Reply