Add a Child Table Doctype in a anoter Child Table Doctype?

1

Hello all,

I try to add a new DocType (checked as “is Child Table”) as a field (type Table) into the Sales Order Item Doctype.

The result is : it’s broken.
The detail form of Sales Order Item do not display anymore, error in js part.

I’ve dig into frappe framework and see that’s it’s not currently supported, not explicitly, but just not coded to be possible.
In layout.js and gris.js, it make a mix up on the refresh() method about this new field (set as parent of this new field the grand parent doctype)

My question is, should I propose a PR to avoid this try of design in frappe ?
This kind of control already exists for other not logical design.
This one can be “logic” but not possible for now.

But may be I’ve miss something in my customization ? Didn’t find any clues in documentation, but only not answered post in this forum

Did you manage to make something possible with this use case ?
Like use a HTML field (instead of try the type table field with child table doctype ) and populate it with your own code (with embedded datatable for example)?

1 Like
2

Really useful, many use cases.

Some tries time ago …

3

So many changes since v8 vs develop…
Even if this PR was from Rushabh himself it was never merge… Sad

May be one day or another solution ?

4

Hi @FHenry:

Yes. Seems that no many people showed interest at that time …
I am interested on this feature, I don’t how many people could be interested too.

I’ve made some experimental tentatives … but just for data output …

image
image963×754 36 KB

frappe.ui.form.on("YourChildDoctype", {
	form_render(frm, cdt, cdn) {
        var d = locals[cdt][cdn]
                        
        let html = `
    
        
        <style>
            /* Custom styles for the table */
            .wide-table {
                width: 100%; /* Make table wider */
            }
            .first-column {
                width: 60%; /* First column gets 60% width */
            }
            .text-right {
                text-align: right; /* Align text to the right for numeric columns */
            }
        </style>
    
    
    
    <div class="container mt-3">
      <table class="table table-bordered table-hover wide-table">
        <!-- Table Head -->
        <thead class="thead-light">
          <tr>
            <th scope="col" class="first-column">Description</th>
            <th scope="col" class="text-right">Qty</th>
            <th scope="col" class="text-right">Amount</th>
          </tr>
        </thead>
        <!-- Table Body -->
        <tbody>
          <tr>
            <td>Product 1</td>
            <td class="text-right">5</td>
            <td class="text-right">€50.00</td>
          </tr>
          <tr>
            <td>Service 2</td>
            <td class="text-right">2</td>
            <td class="text-right">€200.00</td>
          </tr>
          <tr>
            <td>Product 3</td>
            <td class="text-right">3</td>
            <td class="text-right">€150.00</td>
          </tr>
          <tr>
            <td>Service 4</td>
            <td class="text-right">1</td>
            <td class="text-right">€100.00</td>
          </tr>
          <tr>
            <td>Product 5</td>
            <td class="text-right">10</td>
            <td class="text-right">€500.00</td>
          </tr>
          <tr>
            <td>Service 6</td>
            <td class="text-right">4</td>
            <td class="text-right">€400.00</td>
          </tr>
        </tbody>
      </table>
    </div>
        
        `;

        frm.cur_grid.grid_form.fields_dict.your_html_field.html(html);
	}
});

Just a try, without fetching data from other doctypes, but is doable.
Hope this helps.

4 Likes
5

@avc Many thank’s , I’ll give it a try with that, and few happy API call to make update this doctype

1 Like
6

I have an issue regarding same subject here of your reply if you may.
When I render.html code with jinja from js, it doesn’t work.

Let me explain in detail:
First, I created an html field in my custom DocType of my custom app.

Then I created an html file with simple structure:

IMG-20231218-WA0045
IMG-20231218-WA00451069×679 104 KB

Then, render it in js:

IMG-20231218-WA0043
IMG-20231218-WA0043715×392 53.9 KB

It works perfectly:

IMG-20231218-WA0044
IMG-20231218-WA00441080×234 15.5 KB

Now, I want to use jinja, for loop for example:

IMG-20231218-WA0042
IMG-20231218-WA0042712×419 48.9 KB

It broke. And console shows the following error:

IMG-20231218-WA0041
IMG-20231218-WA0041585×876 147 KB

Thank you in advance

7

Are you sure about
for _ in range (1,32) ?
It seems to be another subject by the way.

1 Like
8

Hi @Omar_M_K_Shehada:

Try

{% for(var i=1, l=32; i<l; i++) { %}
            <tr>
                <td>{{ i }}</td>
                <td class="text-right">5</td>
                <td class="text-right">€50.00</td>
            </tr>
{% } %}

https://frappeframework.com/docs/user/en/guides/app-development/using-html-templates-in-javascript

Check this sample on ERPNext code:

Hope this helps.

1 Like
9

This worked perfectly. Thank you!

1 Like
10

Yes, yes. It was the issue :sweat_smile:

11

Hi @Omar_M_K_Shehada @FHenry:

I think that the root problem is that from .js side we need to use John Resig JS microtemplating, and from server side we use Jinja2. Pretty the same thing, but not exactly the same thing :slight_smile: There are some differences in syntax, Jinja is python-like, and JR microtemplating is like javascript …

I was confused with this, and not totally sure about what I am talking about :upside_down_face: :joy: