Menambahkan Video Youtube di Form Odoo 16

Assalamualaikum..

Pada materi ini saya akan membagikan cara menambahkan video youtube di form odoo. Versi Odoo yang saya gunakan disini adalah versi 16, jadi untuk versi dibawah nya atau yang lebih baru implementasi nya kemungkinan akan berbeda.

Berikut Hasilnya:

Disini saya akan mencoba menambahkannya di form product.

Kita inherit dahulu model product.template dan menambahkan beberapa field, yaitu field url_video dan embeded_code.

url_video bertipe data char, sedangkan embeded_code bertipe data Html dan juga merupakan field compute

class ProductProduct(models.Model):
    _inherit = 'product.template'

url_video= fields.Char('Youtube Url')
embeded_code = fields.Html(compute='_compute_embeded_code')

    @api.depends('')
def _compute_embeded_code(self):
            pass

Untuk field embeded_code kita berikan juga atribute sanitize=False, hal ini berfungsi agar url video kita terbaca dan tidak diblock security odoo

embeded_code = fields.Html(compute='_compute_embeded_code', sanitize=False)

Selanjutnya kita import function get_video_embed_code yang berfungsi untuk mengkonversi url video menjadi code embeded

from odoo.addons.web_editor.tools import get_video_embed_code

Setelah itu kita akan menggunakannya di function compute.

Di function compute kita tambahkan depends ke field url_video, lalu assign field embeded_code dengan hasil dari convert url dari field url_video

    @api.depends('url_video')
    def _compute_embeded_code(self):
        for rec in self:
            rec.embeded_code = get_video_embed_code(rec.url_video)

Di manifest, tambahkan depends ke modul yang akan kita inherit yaitu stock dan website_sale untuk menggunakan widget video_preview nanti

    # any module necessary for this one to work correctly
    'depends': ['base','stock','website_sale'],

Setelah itu kita inherit tampilan form nya, dan tambahkan kedua field seperti ini:

<record id="product_product_view_form_inherit" model="ir.ui.view">
      <field name="name">product.template.form.inherit</field>
      <field name="model">product.template</field>
      <field name="inherit_id" ref="product.product_template_only_form_view"/>
      <field name="arch" type="xml">
        <xpath expr="//notebook/page[@name='general_information']/group[1]" position="after">
          <group col="4">
            <field name="url_video"/>
            <field name="embeded_code"/>
          </group>
        </xpath>
      </field>
    </record>

Untuk field embeded_code kita tambahkan widget video_preview dan juga atribut attrs invisible seperti ini agar ketika url yang kita masukan tidak sesuai atau tidak terbaca pada field embeded_code maka field tersebut akan tersembunyi

<field name="embeded_code" widget='video_preview' attrs="{'invisible': [('embeded_code', '=', False)]}"/>

Setelah itu tambahkan tag div yang di dalamnya kita masukan text warning jika embeded_code tidak sesuai

<span></span>
<div class="text-muted" attrs="{'invisible': [('embeded_code', '!=', False)]}">
    URL video yang anda masukan salah.
</div>

Berikut hasilnya:

Terimakasih

Pengalaman Menjadi Moderator di Forum Odoo.com