How to change fields.One2Many view in odoo 12?

Question

i trying to create fields.One2Many for my invoice module, i create two different module, one called ms_produk and another called invoice, then for the ms_produk i use as master product, which serve CRUD for item and have a table named "ms_produk_ms_produk"

here is my ms_produk model looked like :

# -*- coding: utf-8 -*-

from odoo import models, fields, api

class ProdukProduk(models.Model):
    _name = 'ms_produk.ms_produk'

    kd_produk = fields.Char(String='Kode Produk', required=True)
    nm_produk = fields.Char(String='Nama Produk', required=True)
    tanggal_input = fields.Datetime(string='Tanggal Input', default=fields.Datetime.now())
    tanggal_aktif = fields.Datetime(string='Tanggal Aktif', default=fields.Datetime.now())
    status_aktif = fields.Boolean('Status Aktif', default=True)
    keterangan = fields.Html(string='Keterangan')

    no_faktur = fields.Many2one('salesorder.salesorder')

i add

no_faktur = fields.Many2one('salesorder.salesorder')

to link this table to my invoice module, since i want to use One2Many function at my invoice module

then here is my invoice module model looked like, this model named "salesorder.py" :

# -*- coding: utf-8 -*-

from odoo import models, fields, api

class SalesorderSalesorder(models.Model):
    _name = 'salesorder.salesorder'

    no_faktur = fields.Char(String='No Faktur', required=True)
    kd_dealer = fields.Char(String='Kode Dealer', required=True)
    nm_dealer = fields.Char(String='Nama Dealer', required=True)
    tanggal_faktur = fields.Datetime(string='Tgl Faktur', default=fields.Datetime.now())
    keterangan = fields.Html(string='Keterangan')
    kd_sales = fields.Many2one('res.users', string='Kode Sales')
    details = fields.One2many('ms_produk.ms_produk','no_faktur','List Item')

this worked, when i click "add a line" it pop out my master product module, but it show in input form, how i changed it to list only? so i can pick some item to add as detail for my invoice?

SNAPSHOT : salesorder form :

when i click "add a line", it showed up a form like this : (this is input form, i need list view of my product)

it should be a list of my item produk, that looked like this : (this is snapshot from my master module)

then i will added like this : (this is a example snapshot i take from Thayif Kabir link

**UPDATED CODE as @Ajmal JK answer, i tried to edit my salesorder_view.xml, and breakdown some code, here is how it looked like now :

<?xml version="1.0" encoding="UTF-8"?>
<odoo>
    <data>

        <record id="salesorder_menu_action" model="ir.actions.act_window">
            <field name="name">SalesOrders</field>
            <field name="res_model">salesorder.salesorder</field>
            <field name="view_type">form</field>
            <field name="view_mode">tree,form</field>
            <field name="domain">[]</field>
            <field name="help" type="html">
                <p class="oe_view_nocontent_create">Create SalesOrders
                </p>
            </field>
        </record>

<!-- newly added -->

        <!-- salesorder view -->
        <record id="salesorder_tree" model="ir.ui.view">
            <field name="name">salesorder.form.tree</field>
            <field name="model">salesorder.salesorder</field>
            <field name="type">tree</field>
            <field name='arch' type="xml">
                <field name='details'>
                    <tree string="SalesOrder" editable="bottom">
                        <field name="kd_produk"/>
                        <field name="nm_produk"/>
                    </tree>
                </field>
            </field>
        </record>
        <!-- end of salesorder view -->

        <!-- master product view -->
        <record id="browse_msproduk_tree_view" model="ir.ui.view">
            <field name="name">ms_produk</field>
            <field name="model">ms_produk.ms_produk</field>
            <field name="view_mode">tree</field>
            <field name="arch" type="xml">
                <tree editable="bottom">
                    <field name="kd_produk"/>
                    <field name="nm_produk"/>
                    <field name="tanggal_input"/>
                </tree>
            </field>
            <field name="view_id" ref="salesorder_tree"/>
            <field name="act_window_id" ref="salesorder_menu_action"/>
        </record>
        <!-- end of master product view -->

<!-- end of newly added -->

        <menuitem id="salesorder_menu" name="SalesOrder"/>
        <menuitem id="Salesorder_neworder_menu" 
                parent="salesorder_menu" 
                name="New Order"
                action="salesorder_menu_action"/>
    </data>
</odoo>

there is no error when i run this code, it worked but not how i want it to be, when giving this code <tree editable="bottom"> in Master Product View section they become inline editable, so i have to type each column, what i need is a popup window that contain list of product so i can pick it and put in the details form, i try do <tree editable="bottom"> then i try <tree string="details"> with no editable tag, it comeback to popup but it's an input form, it should be list of product so i can check the item and add it into the details table, how do i do this?

Answer 1

Change the newly added section as,

       <record id="salesorder_tree" model="ir.ui.view">
        <field name="name">salesorder.form.tree</field>
        <field name="model">salesorder.salesorder</field>
        <field name="type">tree</field>
        <field name='arch' type="xml">
            <field name='details'>
               <tree string="SalesOrder" editable="bottom">
                  <field name="kd_produk"/>
                  <field name="nm_produk"/>
               </tree>
           </field>
        </field>
    </record>