[Odoo 10] Technical Documentation -Part 8-

Alhamdulillah kita bisa melanjutkan kembali tutorial ini. Insya Allah kali ini kita akan membahas tentang pembuatan berbagai view, seperti list, form, calendar, kanban, graphs, dll.

A. Search Views

Untuk yang pertama kita akan membahas Search View. Perbedaan mendasar dari versi sebelumnya adalah fitur Group By otomatis ada pada Advanced Search untuk semua field sebagaimana filter. Secara default field name akan menjadi filter jika kita tidak membuat search view. Sekarang kita tambahkan search view object Kursus kita seperti berikut :

(tambahkan coding dibawah ini DI ATAS action view kursus)



	<!-- ### Membuat Search View Kursus ### -->
		
	<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>
				<field name="name"/>
				<field name="responsible_id"/>
				<field name="description"/>
			</search>
		</field>
	</record>
		

Setelah kita tambahkan code diatas, maka search boxnya akan mengalami perubahan seperti berikut :

Kemudian kita tambahkan custom filter dan custom group seperti berikut :



	<!-- ### Membuat Search View Kursus ### -->
		
	<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>
				<field name="name"/>
				<field name="responsible_id"/>
				<field name="description"/>
				<filter name="my_courses" string="Kursus Saya" domain="[('responsible_id', '=', uid)]"/>
				<group string="Group By">
					<filter name="by_responsible" string="Penanggung Jawab" context="{'group_by': 'responsible_id'}"/>
				</group>				
			</search>
		</field>
	</record>
		

Sehingga menu dropdown Filters dan Group By pada Advanced Search bertambah pilihannya.

B. Tree/List View

Kita telah membuat tampilan tree view pada kedua object Kursus dan Sesi. Sekarang kita akan berikan ‘dekorasi’ yang dimiliki oleh view ini. Ada beberapa attribute tree/list view yang bisa kita gunakan, diantaranya :

# Merubah font menjadi bold

decoration-bf=”[nama_field][operator][nilai_field]”

# Merubah font menjadi italic

decoration-it=”[nama_field][operator][nilai_field]”

# Merubah font dengan berbagai warna

decoration-info=”[nama_field][operator][nilai_field]”

decoration-muted=”[nama_field][operator][nilai_field]”

decoration-danger=”[nama_field][operator][nilai_field]”

decoration-primary=”[nama_field][operator][nilai_field]”

decoration-success=”[nama_field][operator][nilai_field]”

decoration-warning=”[nama_field][operator][nilai_field]”

Contohnya seperti ini :


<tree string="Quotation" decoration-bf="state=='confirm'" decoration-info="state=='draft'" decoration-warning="date_action and (date_action &lt; current_date)">
	<field name="name"/>
	<field name="date_action"/>
	<field name="state"/>
</tree>

Selanjutnya kita tambahkan ‘dekorasi’ warna berdasarkan field durasi, yaitu jika durasi harinya kurang dari 5 hari maka berwarna biru dan jika durasinya lebih dari 15 hari maka berwarna merah. Kita tambahkan pada object Sesi seperti berikut :



	<!-- ### Membuat Tampilan Tree/List Sesi ### -->
	
	<record model="ir.ui.view" id="sesi_tree_view">
	    <field name="name">training.sesi.tree</field>
	    <field name="model">training.sesi</field>
	    <field name="arch" type="xml">
	        <tree string="Sesi List" decoration-info="duration&lt;5" decoration-danger="duration&gt;15">
				<field name="name"/>
				<field name="course_id"/>
				<field name="start_date"/>
				<field name="duration"/>
				<field name="seats"/>
				<field name="instructor_id"/>
				<field name="taken_seats" widget="progressbar"/>     
	        </tree>
	    </field>
	</record>
	
	

Hasilnya akan terlihat seperti ini :

Selain hal diatas, tree view juga memiliki attribute-attribute di bawah ini :


<!-- Menghilangkan pop up form saat create dan edit -->
	
<tree string="" editable="bottom">

<!-- Mensorting tabel berdasarkan nama field -->

<tree string="" default_order="name desc">

<!-- Menghilangkan tombol create -->

<tree string="" create="false">

<!-- Menghilangkan tombol edit -->

<tree string="" edit="false">

<!-- Menghilangkan tombol delete -->

<tree string="" delete="false">

C. Calendar Views

Calendar view berfungsi untuk menampilkan record dalam bentuk calendar. Kita juga bisa langsung membuat record dengan memilih salah satu atau beberapa tanggal (drag) yang kita inginkan seperti halnya pembuatan Leaves (cuti) dll. Selain itu, calendar view juga memudahkan kita untuk mengedit field tanggal dengan fitur drag and drop, tanpa harus masuk kedalam form view terkait.

Sekarang kita akan tambahkan calendar view pada object Sesi, ikuti langkah-langkah berikut :


from datetime import timedelta

Kita import library baru yaitu timedelta. Library ini kita butuhkan untuk pembuatan field end_date, dimana field ini akan menghitung secara otomatis tanggal waktu berakhir sesi dari tanggal mulai ditambah durasi hari.


    
class Sesi(models.Model):
    ...

    
    end_date = fields.Date(string="Tanggal Selesai", store=True, compute='_get_end_date', inverse='_set_end_date')
    
    @api.depends('start_date', 'duration')
    def _get_end_date(self):
        for r in self:
            # Pengecekan jika field duration & start_date tidak diisi, maka field end_date akan di update sama seperti field start_date
            if not (r.start_date and r.duration): 
                r.end_date = r.start_date
                continue
    
            # Membuat variable start yang isinya tanggal dari field start_date 
            start = fields.Datetime.from_string(r.start_date)
            
            # Membuat variable duration yang isinya durasi hari dari field duration
            # Durasi hari dikurangi 1 detik agar start_date masuk kedalam durasi hari
            duration = timedelta(days=r.duration, seconds=-1)
            
            # Mengupdate field end_date dari perhitungan variabel start ditambah variabel duration 
            r.end_date = start + duration
    
    def _set_end_date(self):
        for r in self:
            if not (r.start_date and r.end_date):
                continue
        
            # Membuat variable start_date yang isinya tanggal dari field start_date
            start_date = fields.Datetime.from_string(r.start_date)
            
            # Membuat variable end_date yang isinya tanggal dari field end_date
            end_date = fields.Datetime.from_string(r.end_date)
            
            # Mengupdate field duration (jika ada perubahan dari field end_date) dari perhitungan variabel end_date dikurangi variabel start_date (ditambah 1 hari agar end_date termasuk durasi hari) 
            r.duration = (end_date - start_date).days + 1
    

Kita menambahkan field dengan attribute compute dan inverse, sehingga disana ada 2 method. Method _get_end_date (compute) untuk menupdate field end_date berdasarkan perhitungan start_date ditambah duration. Sedangkan method _set_end_date (inverse) berfungsi untuk menentukan field lain (duration) dari field end_date.

Kita perhatikan juga, untuk perhitungan tanggal, kita harus mengconvert tanggal kepada object datetime, karna field date atau datetime yang di simpan odoo dengan format string.

Sekarang kita update viewnya untuk melihat hasil dan mencobanya :


	
	<!-- ### Membuat Tampilan Tree/List Sesi ### -->
	
	<record model="ir.ui.view" id="sesi_tree_view">
	    <field name="name">training.sesi.tree</field>
	    <field name="model">training.sesi</field>
	    <field name="arch" type="xml">
	        <tree string="Sesi List" decoration-info="duration&lt;5" decoration-danger="duration&gt;15">
				<field name="name"/>
				<field name="course_id"/>
				<field name="start_date"/>
				<field name="end_date"/>
				<field name="duration"/>
				<field name="seats"/>
				<field name="instructor_id"/>
				<field name="taken_seats" widget="progressbar"/>     
	        </tree>
	    </field>
	</record>
	
	
	<!-- ### Membuat Tampilan Form Sesi ### -->
		
	<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="Sesi Form">
				<sheet>
					<group>
						<group string="Informasi">
							<field name="course_id"/>
							<field name="name"/>
							<field name="end_date"/>
							<field name="instructor_id"/>
						</group>
						<group string="Jadwal">
							<field name="start_date"/>
							<field name="duration"/>
							<field name="seats"/>
							<field name="taken_seats" widget="progressbar"/>							
						</group>
						<group string="Peserta" colspan="2">
							<field name="attendee_ids" nolabel="1"/>
						</group>						
					</group>
				</sheet>
			</form>
		</field>
	</record>
	


Attribute yang ada pada calendar view ini adalah :


color
date_start
date_stop
date_delay
event_open_popup
quick_add
display
all_day
mode

Kita membuat field end_date karna field ini dibutuhkan attribute date_stop. Jika kita tentukan attribute date_stop, maka calendar view dapat menampilkan durasi harinya. Terakhir, kita buat calendar viewnya seperti berikut :



	<!-- ### Membuat Tampilan Calendar 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="Sesi Calendar" date_start="start_date" date_stop="end_date" color="instructor_id" mode="month">
				<field name="name"/>
			</calendar>
		</field>
	</record>

	<!-- ### Membuat Action/Event Object Sesi ### -->
	
	<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>


Sehingga hasilnya seperti ini :

D. Gantt Views

Gantt view berbentuk seperti bar chart yang biasa digunakan untuk membuat timeline seperti progress project, production, leaves, dll. Semenjak v9, fitur ini tidak ada di versi community, salah satu alasannya seperti pembahasan disini :

“The library we used for the gantt view was GPL, we removed it from the LGPL community edition. For enterprise we use a proprietary edition of the library (used in the task planner).” – Antony Lesuisse (CTO in Odoo)

Penampakan Gantt Chart view seperti ini :

Bagi yang memiliki versi enterprise mungkin bisa melanjutkan dengan mengikuti coding di bawah ini :

    
class Sesi(models.Model):
    ...


    hours = fields.Float(string="Durasi Jam", compute='_get_hours', inverse='_set_hours')

    @api.depends('duration')
    def _get_hours(self):
        for r in self:
            r.hours = r.duration * 24
    
    def _set_hours(self):
        for r in self:
            r.duration = r.hours / 24
    


Kemudian update file xmlnya (perhatikan id xmlnya – replace jika sama) :




	<!-- ### Membuat Tampilan Tree/List Sesi ### -->
	
	<record model="ir.ui.view" id="sesi_tree_view">
	    <field name="name">training.sesi.tree</field>
	    <field name="model">training.sesi</field>
	    <field name="arch" type="xml">
	        <tree string="Sesi List" decoration-info="duration&lt;5" decoration-danger="duration&gt;15">
				<field name="name"/>
				<field name="course_id"/>
				<field name="start_date"/>
				<field name="end_date"/>
				<field name="duration"/>
				<field name="hours"/>
				<field name="seats"/>
				<field name="instructor_id"/>
				<field name="taken_seats" widget="progressbar"/>     
	        </tree>
	    </field>
	</record>
	

	<!-- ### Membuat Tampilan Gantt Sesi ### -->
	
	<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="Sesi Gantt" color="course_id" date_start="start_date" date_delay="hours" progress="progress" default_group_by='instructor_id'>
				<field name="name"/>
			</gantt>
		</field>
	</record>
	
	
	<!-- ### Membuat Action/Event Object Sesi ### -->
	
	<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>
	


E. Graph Views

Pada tampilan ini (seperti BI sederhana) kita bisa mengambil informasi sebagai overview untuk analisa dan pengambilan keputusan strategis selanjutnya. Ada 3 tipe grafik pada view ini yaitu bar (default), pie dan line. Graph view juga sebagai agregasi data dari database, jadi field compute yang nilainya tidak disimpan (on the fly), maka tidak bisa dijadikan parameter pada tampilan ini. Sebelum kita membuatnya, kita akan tambahkan dulu beberapa field yang dibutuhkan pada tampilan ini, yaitu :


    
class Sesi(models.Model):
    ...


    attendees_count = fields.Integer(string="Jumlah Peserta", compute='_get_attendees_count', store=True)


    @api.depends('attendee_ids')
    def _get_attendees_count(self):
        for r in self:
            # Mengupdate field attendees_count berdasarkan jumlah record di tabel peserta 
            r.attendees_count = len(r.attendee_ids)


Kita buat field compute baru beserta methodnya yang fungsinya menjumlahkan semua Peserta yang ada. Setelah itu kita langsung buat Graph view tanpa menampilkan field tersebut pada form dan list view :



	
	<!-- ### Membuat Tampilan Graph Sesi ### -->
	
	<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="pie">
				<field name="course_id"/>
				<field name="attendees_count" type="measure"/>
			</graph>
		</field>
	</record>


	<!-- ### Membuat Action/Event Object Sesi ### -->
	
	<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>
	


Setelah kita update modulnya, maka hasilnya seperti ini :

F. Pivots Views

Tampilan ini pada versi sebelumnya di gabung dengan graph view, karna datanya saling berkaitan. Sesuai namanya, maka tampilan ini memberikan view seperti pivots yang biasa kita lihat pada pada excel. Karna menggunakan data yang sama seperti graph view, maka kita langsung tambahkan saja dengan mengupdate file xml seperti berikut :



	<!-- ### Membuat Tampilan Pivot Sesi ### -->
	
	<record model="ir.ui.view" id="sesi_pivot_view">
		<field name="name">training.sesi.pivot</field>
		<field name="model">training.sesi</field>
		<field name="arch" type="xml">
			<pivot string="Peserta by Kursus" disable_linking="True" display_quantity="true">
				<field name="course_id"/>
				<field name="attendees_count" type="measure"/>
			</pivot>
		</field>
	</record>
	
	<!-- ### Membuat Action/Event Object Sesi ### -->
	
	<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,pivot</field>
	</record>
	

Pivot view memiliki 2 attribute yaitu :

disable_linking (boolean) = Nilai defaultnya False, jika diisi True maka akan menghapus link ke data terkait ketika cell di klik

display_quantity (boolean) = Nilai defaultnya false, jika diisi true maka akan menambah 1 kolom sebagai summary (count) dari data aggregat

Hasil dari tampilan ini adalah :

G. Kanban Views

Kanban view seperti tampilan tumbnails dengan tambahan beberapa informasi. Kanban view menampilkan record seperti ‘kartu’ yang merupakan ‘gabungan’ antara form view dan list view. Dengan kanban view kita juga dapat merubah state record hanya dengan drag and drop. Sekarang kita akan tambahkan kanban view pada object Sesi kita seperti berikut :



class Sesi(models.Model):
    .....

    color = fields.Integer('Warna')


Field color berfungsi untuk menyimpan warna pada kanban, field tersebut akan otomatis terisi ketika kita memberikan warna pada kanban kita di mode kanban view. Selanjutnya kita update file xml kita (replace dengan id xml yang sama) :



	
	<!-- ### Membuat Tampilan Tree/List Sesi ### -->
	
	<record model="ir.ui.view" id="sesi_tree_view">
	    <field name="name">training.sesi.tree</field>
	    <field name="model">training.sesi</field>
	    <field name="arch" type="xml">
	        <tree string="Sesi List" decoration-info="duration&lt;5" decoration-danger="duration&gt;15">
				<field name="name"/>
				<field name="course_id"/>
				<field name="start_date"/>
				<field name="end_date"/>
				<field name="duration"/>
				<field name="hours"/>
				<field name="seats"/>
				<field name="instructor_id"/>
				<field name="color"/>
				<field name="taken_seats" widget="progressbar"/>     
	        </tree>
	    </field>
	</record>
	
	

	
	<!-- ### Membuat Tampilan Kanban Sesi ### -->
	
	<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 default_group_by="course_id">
				<field name="color"/>
				<templates>
					<t t-name="kanban-box">
						<div t-attf-class="oe_kanban_color_{{kanban_getcolor(record.color.raw_value)}} oe_kanban_global_click_edit oe_semantic_html_override oe_kanban_card {{record.group_fancy==1 ? 'oe_kanban_card_fancy' : ''}}">
							
							<div class="o_dropdown_kanban dropdown">
								<!-- MENU DROPDOWN -->
								<a class="dropdown-toggle btn" data-toggle="dropdown" href="#" >
                                	<span class="fa fa-bars fa-lg"/>
                            	</a>
                            	<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
									<li>
										<a type="delete">Hapus</a>
									</li>
									<li>
										<ul class="oe_kanban_colorpicker" data-field="color"/>
									</li>
								</ul>	
							</div>
							
							<div t-attf-class="oe_kanban_content" >
								<!-- JUDUL -->
								Nama Sesi : <b><i><field name="name"/></i></b><br/>	
								Tanggal Mulai : <field name="start_date"/><br/>
								Durasi : <field name="duration"/>
							</div>
							
						</div>
					</t>
				</templates>
			</kanban>
		</field>
	</record>
	

	
	
	<!-- ### Membuat Action/Event Object Sesi ### -->
	
	<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,pivot,kanban</field>
	</record>
		
	


Hasil kanban view diatas seperti ini :

Mungkin ini saja yang bisa saya sampaikan, bagi yang mau download modul bisa disini

Saran dan kritik yang membangun selalu di tunggu, CMIIW
Semoga bermanfaat …

Advertisements

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