Technical Training -Part 7-

Alhamdulillah pada kesempatan kali ini kita akan melanjutkan technical training kita yang saat ini telah mencapai bagian ke 7. Pada tutorial kali ini, kita akan mencoba mengenal dan mempelajari jenis-jenis tampilan (view) pada OpenERP baik berupa List/Tree, Form, Calendars, Search, Gantt Chart, Graph, dan yang terbaru pada v7 yaitu Kanban.

Selama ini kita telah terbiasa membuat tampilan Tree dan Form, untuk itu kita akan lewatkan pembahasannya, dan sekarang kita langsung mencoba membuat view Search untuk yang pertama. Jika pada v6, maka tampilan Search akan memenuhi sisi bagian/panel atas saat kita berada pada view Tree/List. Sedangkan v7 semua tampilan Search akan menjadi satu kolom yang terdapat pada pojok kanan atas pada view Tree.

Tampilan Search digunakan untuk memfilter dan menggrouping data/record berdasarkan data pada sebuah field yang kita input. Kali ini kita akan membuat view Search untuk object kursus yaitu memfilter kursus yang field koordinatornya sesuai dengan user login dan menambahkan beberapa parameter searching berdasarkan field yang ditampilkan pada tampilan tree serta filter dengan fitur grouping. Tambahkan code dibawah ini pada file xml training.


		<record model="ir.ui.view" id="kursus_search_view">
		    <field name="name">training.kursus.search</field>
		    <field name="model">training.kursus</field>
		    <field name="arch" type="xml">
		        <search string="Search">
		            <filter string="Kursus Saya" icon="terp-partner" domain="[('koordinator_id', '=', uid)]"/>
		            <field name="name"/>
		            <field name="keterangan"/>
		            <field name="koordinator_id"/>
		            <group string="Group By...">
                        <filter string="Koordinator" icon="terp-personal" context="{'group_by':'koordinator_id'}"/>
                    </group>
		        </search>
		    </field>
		</record>

Pada code diatas kita telah membuat tampilan searching dalam 3 jenis. Pertama adalah searching jenis filter. Jenis ini akan terlihat tepat dibawah section Filters jika kita menekan ‘tanda panah’ di kolom searching pada pojok kanan atas tampilan tree. Hasilnya, tampilan tree hanya akan menampilkan record-record yang fieldnya bernilai seperti yang ditentukan pada filter tersebut. Jika pada contoh diatas penulis membuat filter dengan parameter nilai field koordinator_id sesuai dengan user login.

Jenis searching yang kedua adalah grouping. Jenis searching ini sama seperti jenis pertama bedanya dari segi tampilan dia berada disebelah kanan dari jenis pertama dan data yang dihasilkan akan dikelompokan seperti layaknya hirarki chart of account (CoA) berdasarkan field yang ditentukan. Pada code diatas kita membuat grouping berdasarkan nilai field koordinator_id. Hasil dari kedua jenis searching diatas seperti gambar dibawah ini :

Screenshot from 2014-03-24 16:15:43

Jenis searching yang terakhir adalah field. Jenis ini tidak terlihat seperti jenis pertama dan kedua, tetapi dia akan terlihat ketika kita sedang menginput nilai berdasarkan field-field yang telah kita tentukan seperti layaknya efek mouseover. Pada code diatas kita telah membuat searching jenis ini dengan 3 field pada tampilan tree yaitu name, keterangan, dan koordinator_id. Ketiga field diatas akan muncul sebagai acuan dari nilai yang kita inputan pada kolom searching di pojok kanan atas. Kita bebas untuk memilih dari field manakah yang akan menjadi acuan searching dari nilai yang kita input. Hasilnya seperti gambar dibawah ini :

Screenshot from 2014-03-24 16:04:06

Tampilan selanjutnya adalah Calendar view. Sesuai dengan namanya tampilan ini akan berbentuk seperti calendar. Untuk lebih jelasnya kita lansung bikin tampilan ini pada object ‘training.sesi’


		<record model="ir.ui.view" id="sesi_calendar_view">
		    <field name="name">training.sesi.calendar</field>
		    <field name="model">training.sesi</field>
		    <field name="arch" type="xml">
		        <calendar string="Calendar Sesi"
		        		  date_start="tanggal_mulai"
		        		  date_delay="durasi"
		        		  day_length="1"
		        		  mode="week"
		        		  color="instructur_id">
		            <field name="name"/>
		        </calendar>
		    </field>
		</record>

Pada code diatas kita telah membuat tampilan calendar yang memiliki beberapa parameter yaitu :
1. date_start : Tanggal mulai untuk item calendar
2. date_stop : Tanggal akhir untuk item calendar. Abaikan jika date_delay diisi
3. date_delay : Durasi satuan waktu dalam hitungan jam
4. day_length : Durasi waktu kerja dalam sehari (hitungan jam, defaultnya 8 jam)
5. color : Field dari record yang akan diberi warna
6. mode : Jenis tampilan view calendar. Nilainya ada day, week, dan month (defaultnya month)

Hasil tampilan akan terlihat seperti gambar dibawah ini :

Screenshot from 2014-03-24 16:06:58

Setelah kita berhasil menambahkan view calendar, jangan lupa untuk menambahkan view icon calendarnya agar terlihat pada tampilan list/tree. Contohnya pada code dibawah ini :

		
		<record model="ir.actions.act_window" id="sesi_list_action">
		    <field name="name">Sesi</field>
		    <field name="res_model">training.sesi</field>
		    <field name="view_type">form</field>
		    <field name="view_mode">tree,form,calendar</field>
		</record>
	

Tampilan view selanjutnya adalah Gantt Chart. View ini mungkin biasa kita kenal dengan bar chart, timeline atau sejenisnya, cara membuatnya cukup mudah hampir sama seperti calendar begitu juga dengan parameternya, bedanya pada gantt chart memiliki parameter tambahan yaitu default_group_by yang akan mengelompokan data berdasarkan inputan fieldnya. Contohnya seperti dibawah ini :

		
		<record model="ir.ui.view" id="sesi_gantt_view">
		    <field name="name">training.sesi.gantt</field>
		    <field name="model">training.sesi</field>
		    <field name="arch" type="xml">
		        <gantt string="Gantt Sesi"
		        		  date_start="tanggal_mulai"
		        		  date_delay="durasi"
		        		  day_length="1"
		        		  default_group_by="instructur_id">	        
		        </gantt>
		    </field>
		</record>

Dan jangan lupa untuk menambahkan icon view Gantt Chart seperti dibawah ini :

		
		<record model="ir.actions.act_window" id="sesi_list_action">
		    <field name="name">Sesi</field>
		    <field name="res_model">training.sesi</field>
		    <field name="view_type">form</field>
		    <field name="view_mode">tree,form,calendar,gantt</field>
		</record>
	

Hasil dari code diatas seperti dibawah ini :

Screenshot from 2014-03-24 16:09:07

Selanjutnya kita masuk ke tampilan Graph view. Sebelum kita membuat tampilannya, kita harus membuat satu field sebagai referensi untuk tampilan Graph ini. Tambahkan python code anda seperti ini :


class Sesi(osv.osv):
    _name = 'training.sesi'
    
    def _get_jumlah_peserta(self, cr, uid, ids, field, arg, context=None):
        val = self.browse(cr,uid,ids,context=context)
        result = {}
        for x in val:
            result[x.id] = len(x.peserta_ids)
        return result
        
    
    _columns = {
        ...
        'jumlah_peserta': fields.function(_get_jumlah_peserta, method=True, type='integer', string='Jumlah Peserta'),
        ...
    }

Setelah kita tambahkan sebuah field referensi untuk tampilan graph yaitu field jumlah_peserta maka selanjutnya kita buat Graph viewnya seperti contoh code dibawah ini :


        <record model="ir.ui.view" id="sesi_graph_view">
            <field name="name">training.sesi.graph</field>
            <field name="model">training.sesi</field>
            <field name="arch" type="xml">
                <graph string="Peserta by Kursus" type="bar" orientation="horizontal">
                    <field name="kursus_id"/>
                    <field name="jumlah_peserta" operator="+"/>
                </graph>
            </field>
        </record>
		

Graph view memiliki beberapa parameter, diantaranya :
1. type : Type grafiknya, nilainya ada bar & pie (nilai default)
2. orientation : Menunjukan tampilan posisi grafiknya, nilainya ada horizontal dan vertical (nilai default)

Terakhir seperti biasa, kita tambahkan icon graph view :


		<record model="ir.actions.act_window" id="sesi_list_action">
		    <field name="name">Sesi</field>
		    <field name="res_model">training.sesi</field>
		    <field name="view_type">form</field>
		    <field name="view_mode">tree,form,calendar,gantt,graph</field>
		</record>

Akhirnya kita sampai pada tampilan view terakhir yang terdapat pada OpenERP yaitu Kanban. Kanban view merupakan salah satu fitur baru yang terdapat pada v7 sedangkan versi dibawahnya tidak disediakan dan merupakan jenis view yang mungkin agak lebih sulit dalam proses pembuatannya. Sebenarnya Kanban view hanya cocok untuk record data yang memiliki foto didalamnya seperti data product, partner, employee, dll. Baiklah, karna ini hanya training tidak salahnya kita mencoba pada object yang sama yaitu ‘training.sesi’. Untuk pembuatan awalnya kita harus menambahkan field function yang akan menyimpan dari foto/image yang kita upload :



class Sesi(osv.osv):
    _name = 'training.sesi'
    

    def _get_image(self, cr, uid, ids, name, args, context=None):
        result = dict.fromkeys(ids, False)
        for obj in self.browse(cr, uid, ids, context=context):
            result[obj.id] = tools.image_get_resized_images(obj.image, avoid_resize_medium=True)
        return result

    def _set_image(self, cr, uid, id, name, value, args, context=None):
        return self.write(cr, uid, [id], {'image': tools.image_resize_image_big(value)}, context=context)

        
    _columns = {
        ...
        'image': fields.binary("Foto"),
        'image_medium': fields.function(_get_image, fnct_inv=_set_image, string="Medium-sized image", type="binary", multi="_get_image",
            store={'training.sesi': (lambda self, cr, uid, ids, c={}: ids, ['image'], 10),}),
        'image_small': fields.function(_get_image, fnct_inv=_set_image, string="Small-sized image", type="binary", multi="_get_image",
            store={'training.sesi': (lambda self, cr, uid, ids, c={}: ids, ['image'], 10)}),        
    }


    

Field tersebut adalah field function yang membutuhkan 2 method private yaitu _set_image & _get_image. Kemudian kita lanjutkan dengan membuat tampilannya view Kanban pada file xml seperti berikut ini :



		<record model="ir.ui.view" id="sesi_form_view">
		     <field name="name">training.sesi.form</field>
		     <field name="model">training.sesi</field>
		     <field name="arch" type="xml">
		         <form string="Form Sesi" version="7.0">
		             <group col="4">
		                <field name="name" colspan="4"/>
		                <field name="instructur_id" />
		                <field name="kursus_id"/>
		                <field name="tanggal_mulai" />
		                <field name="durasi"/>
		                <field name="kursi" on_change="onchange_hitung_kuota(kursi, peserta_ids)"/>
		                <field name="active"/>
		            	<field name="kuota_kehadiran_persen" widget="progressbar" colspan="4"/>
		            	<field name="image"  widget="image" class="oe_avatar oe_left"/>
		             </group>
					 <separator string="Peserta" colspan="4"/>
					 <field name="peserta_ids" colspan="4" nolabel="1" on_change="onchange_hitung_kuota(kursi, peserta_ids)">
						 <tree string="Peserta" editable="top">
						 	<field name="peserta_id"/>
						 </tree>
					 </field>
		         </form>
		     </field>
		</record>
		 

...............



        <record model="ir.ui.view" id="sesi_kanban_view">
            <field name="name">training.sesi.kanban</field>
            <field name="model">training.sesi</field>
            <field name="arch" type="xml">
                <kanban>
                    <field name="image"/>
					<templates>
                        <t t-name="kanban-box">
                            <div class="oe_kanban_vignette oe_semantic_html_override">
                                <a type="open"><img t-att-src="kanban_image('training.sesi', 'image', record.id.value)" class="oe_kanban_image"/></a>
                                <div class="oe_kanban_details">
                                    <h4>
                                        <a type="open"><field name="name"/></a>
                                    </h4>
                                    <div name="tags"/>
                                    <ul>
                                        <li>Kursus: <field name="kursus_id"></field></li>
                                        <li>Tanggal: <field name="tanggal_mulai"></field></li>
                                        <li>Instruktur: <field name="instructur_id"></field></li>
                                    </ul>
                                </div>
                            </div>
                        </t>
                    </templates>
                </kanban>
            </field>
        </record>
        
	

Hasilnya akan tampak seperti ini :

kanban

Alhamdulillah akhirnya kita dapat menyelesaikan tutorial kali yang membahas tentang jenis-jenis view yang ada pada OpenERP. Penulis berharap saran dan kritik yang membangun agar ilmu yang kita miliki menjadi amal jariyah bagi kita semua. Mungkin ini saja yang bisa penulis sampaikan CMIIW …

Advertisements

6 thoughts on “Technical Training -Part 7-

  1. Permisi mas… mohon pencerahannya… saya ikutin tutor dari mas… masih ada yg error di group by nya, saya sudah cb pastiin tanda baca sama ap tidak… (kl group by di kasih tanda <!– …. –> program bisa running tp group by tidak tercantum)
    Berikut sintax group by nya:

    Ini error nya :
    except_orm(‘ValidateError’, ‘\n’.join(error_msgs))
    except_osv: (‘ValidateError’, u’Error occurred while validating the field(s) arch: Invalid XML for View Architecture!’)

    Moh

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s