Rearrange details view-form

278 views
Skip to first unread message

R. T.

unread,
Dec 26, 2020, 7:10:23 AM12/26/20
to Jam.py Users Mailing List
Приложение отличное, но я застрял на одном моменте. Мне нужно сделать свой вид таблицы, для этого мне нужно добавить детали записей непосредственно в их блоки(<tr>) каждой записи в виде дополнительных полей(<td>). Если конкретнее, то мне нужно разместить несколько иллюстраций к одной записи(функция деталей в плане обращения для этого хорошо подходит, но меня смущает визуальное расположение). Основная проблема заключается в том что я не могу найти способ обращения к блоку записи(строки <td>) и наилучшее событие(event) для применения модификации таблицы.  

R. T.

unread,
Dec 26, 2020, 7:15:59 AM12/26/20
to Jam.py Users Mailing List
The app is great, but I'm stuck on one point. I need to make my own table view, for this I need to add the details of the records directly to their blocks (<tr>) of each record as additional fields (<td>). More specifically, I need to place several images for one entry("details" function works perfect, but I am confused by the visual arrangement). The main problem is that I cannot find a way to access the record block (<td> line) and the best event to apply the table modification.

суббота, 26 декабря 2020 г. в 15:10:23 UTC+3, R. T.:

yush...@gmail.com

unread,
Dec 29, 2020, 4:10:03 AM12/29/20
to Jam.py Users Mailing List
Hi, there is the row_callback of the create_table options attribute.
The row_callback is a function, first parameter is JQuery object of the table row and item is the clone of the table item.
You can get full access to the row, maybe it would help.

function process_table_row(row, item) {
    if (item.not_active.value) {
        row.css('background-color', 'gray');
    }
}

function on_view_form_created(item) {
    item.table_options.striped = false;
    item.table_options.row_callback = process_table_row;
}

Regards,
Andrew Yushev


суббота, 26 декабря 2020 г. в 15:15:59 UTC+3, defo...@gmail.com:

R. T.

unread,
Dec 30, 2020, 1:18:14 PM12/30/20
to Jam.py Users Mailing List
Thx, it worked pretty well.

вторник, 29 декабря 2020 г. в 12:10:03 UTC+3, yush...@gmail.com:

Drazen D. Babic

unread,
Dec 31, 2020, 1:33:41 AM12/31/20
to Jam.py Users Mailing List
Hello there, 

could you please share your findings?  How did you manage to place several images for one record?

Cheers

R. T.

unread,
Jan 6, 2021, 1:05:42 PM1/6/21
to Jam.py Users Mailing List
I'm still in solving problem of multi-image block for each row, using details structure. But now I am stuck at implementing .each(function()) to make table of images(now it has a test view, only to check workflow) and console shows NOTHING!!! 
I've tested the item.images itself and it gives dataset with several entries as it is intended.

Here what i have for now in .js file of particular table with images table as details:

function process_table_row(row, item) {
    item.images = task.images.copy();
    var id_l = item.id.value;
    if (item.view_form.length) {
        if (item.rec_count) {
            item.images.set_where({master_rec_id: id_l});
            item.images.open(true);
            item.images.each(function(i) {
                console.log('testing-text:', i.path.value);
            });
            var img_path = []
            if (item.images) {
                item.images.each(function(p) {
                    console.log('testing-text:', p);
                });
            }
        }
        else {
            item.images.close();
        }
    };
}

function on_view_form_created(item) {
    item.table_options.row_callback = process_table_row;
}

Hope anybody can help me with .each problem.

P.S. I tested .each method several times in different places, for different datasets and still have zero result in console. I hope the problem is that i do something wrong and you'll help me to manage with that.
четверг, 31 декабря 2020 г. в 09:33:41 UTC+3, Drazen D. Babic:

Andrew Yushev

unread,
Jan 6, 2021, 2:13:11 PM1/6/21
to R. T., Jam.py Users Mailing List
Hi, 

I checked console.log in each. It works ok.
each.png
What browser do you use?

ср, 6 янв. 2021 г. в 21:05, R. T. <defo...@gmail.com>:
--
You received this message because you are subscribed to the Google Groups "Jam.py Users Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jam-py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jam-py/086d8a9c-c39d-4c10-9c3f-4abb115a3b40n%40googlegroups.com.

Andrew Yushev

unread,
Jan 6, 2021, 2:25:53 PM1/6/21
to R. T., Jam.py Users Mailing List
When you set the breakpoint on the line is p an item object?


ср, 6 янв. 2021 г. в 22:12, Andrew Yushev <yush...@gmail.com>:
Message has been deleted

R. T.

unread,
Jan 6, 2021, 3:23:11 PM1/6/21
to Jam.py Users Mailing List
If I put breakpoint before .each  for item.images it looks like this:
report.pngreport_1.pngreport_2.pngreport_3.png


среда, 6 января 2021 г. в 22:25:53 UTC+3, yush...@gmail.com:

R. T.

unread,
Jan 6, 2021, 3:30:34 PM1/6/21
to Jam.py Users Mailing List
UPD: Checked in pure Chrome - same result.

среда, 6 января 2021 г. в 23:23:11 UTC+3, R. T.:

Andrew Yushev

unread,
Jan 6, 2021, 4:00:35 PM1/6/21
to R. T., Jam.py Users Mailing List
Странно, это только в each или в console.log(item.images) тоже?


ср, 6 янв. 2021 г. в 23:30, R. T. <defo...@gmail.com>:
To view this discussion on the web visit https://groups.google.com/d/msgid/jam-py/535a16c2-51a7-42fc-a298-064aa4619ed2n%40googlegroups.com.

R. T.

unread,
Jan 6, 2021, 4:21:00 PM1/6/21
to Jam.py Users Mailing List
Только метод each. В остальных местах всё пока работает нормально. Такое впечатление, что программа его игнорирует. Так как с item.image вроде бы всё в порядке. Я собственно и стал его проверять потому что этот метод ничего не хотел выполнять. Но если использовать его с неправильным классом, то выдаёт ошибку "not a function".

четверг, 7 января 2021 г. в 00:00:35 UTC+3, yush...@gmail.com:

R. T.

unread,
Jan 6, 2021, 4:32:15 PM1/6/21
to Jam.py Users Mailing List

UPD: Выше я присылал скриншоты с  console.log(item.images).  Вписывал как раз выше строчки с ".each".
четверг, 7 января 2021 г. в 00:21:00 UTC+3, R. T.:

R. T.

unread,
Jan 7, 2021, 10:56:28 AM1/7/21
to Jam.py Users Mailing List
Here is partial solution to add several images to each table row(entry) as one field using details(this code for .js file of the corresponding table with images table as details):

function process_table_row(row, item) {
    var id_l = item.id.value;
    if (item.view_form.length) {
        if (item.rec_count) {
            var images_table = $("<div>", {
                "class": "images", style:"overflow: hidden", id: id_l});
            var images = $("<td>", {
                "class": "images", style:"overflow: hidden"}).html(images_table);
            row.find('td:visible:last').after(images);
        }
    }
    item.images = task.images.copy();
    item.images.paginate = false;
    item.images.create_table(row.find('.images').last(), {
        height: 100,
        form_border: false,
        summary_fields: ['path'],
    });
    item.images.set_where({master_rec_id: id_l});
    item.images.open(true);
};

function on_view_form_created(item) {
    item.table_options.row_callback = process_table_row;
}

Will be updated as soon as developed.

четверг, 7 января 2021 г. в 00:32:15 UTC+3, R. T.:

Drazen D. Babic

unread,
Jan 8, 2021, 12:37:04 AM1/8/21
to Jam.py Users Mailing List
Hi there, 
thanks for your input. I've tested it with Details/customer_files table and field document (image), and this code:

function process_table_row(row, item) {
    var id_l = item.id.value;
    if (item.view_form.length) {
        if (item.rec_count) {
            var customer_files = $("<div>", {
                "class": "images", style:"overflow: hidden", id: id_l});
            var images = $("<td>", {
                "class": "images", style:"overflow: hidden"}).html(customer_files);
            row.find('td:visible:last').after(images);
        }
    }
    item.images = task.customer_files.copy();
    item.images.paginate = false;
    item.images.create_table(row.find('.images').last(), {
        height: 100,
        form_border: false,
        summary_fields: ['path'],
    });
    item.images.set_where({master_rec_id: id_l});
    item.images.open(true);
};

function on_view_form_created(item) {
    item.table_options.row_callback = process_table_row;
}

Quite weird results :)

Andrew, can we do something about viewing multiple images?

R. T.

unread,
Jan 8, 2021, 2:49:59 AM1/8/21
to Drazen D. Babic, Jam.py Users Mailing List
UPD: Forgot to notice that "path" is for image field in images details table.

пт, 8 янв. 2021 г., 08:37 Drazen D. Babic <bab...@gmail.com>:
You received this message because you are subscribed to a topic in the Google Groups "Jam.py Users Mailing List" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jam-py/cZmBMbqeQkI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jam-py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jam-py/7b9c6469-8f24-4942-8064-64959624dd27n%40googlegroups.com.

R. T.

unread,
Jan 16, 2021, 4:03:18 AM1/16/21
to Jam.py Users Mailing List
Here is the solution for making view_form with several images for each row. You have to:
   1) create table with images indexed to corresponding row id's of the parent table (image field and reference field)
   2) set view form option: uncheck all options in form tab and set only image field to be visible
   2) put this code into .js file of the corresponding(parent) table (client_module) 
   3) change all occurrence images_table in code for your images table name and part_id for reference field to row id of the parent table in images table
   4) as a result you will have images table instance in each row of the table view_form with corresponding images only and further you have to set css the way want the content to be displayed

I'm going to rework this for server-side solution. But still it's already usable. Feel free to mail me if you have questions.
   
function process_table_row(row, item) {
    var id_l = item.id.value;
    if (item.view_form.length) {
        if (item.rec_count) {
            var images_div = $("<div>", {
                "class": "images", style:"overflow: hidden", id: id_l});
            var images = $("<td>", {
                "class": "images", style:"overflow: hidden"}).html(images_div);
            row.find('td:visible:last').after(images);
        }
    }
    task.images_table.paginate = false;
    task.images_table = task.images_table.copy();
    task.images_table.create_table(row.find('.images').last(), {
        height: 200,
        form_border: false,
    });
    task.images_table.set_where({part_id: id_l});
    task.images_table.open(true);
    var sub_tables = $("div.images_table table")
    sub_tables.each(function(){
        $(this).removeClass("table-bordered")
    });
};

function on_view_form_created(item) {
    item.table_options.row_callback = process_table_row;
}


пятница, 8 января 2021 г. в 10:49:59 UTC+3, R. T.:

Dražen Babić

unread,
Jan 16, 2021, 5:30:40 AM1/16/21
to Jam.py Users Mailing List
Awesome, thank you so much!

Cant wait to try it out. Any suggestion for css?

To view this discussion on the web visit https://groups.google.com/d/msgid/jam-py/1aaf155e-326e-4ed8-aea6-40698fbb3400n%40googlegroups.com.

R. T.

unread,
Jan 16, 2021, 5:38:22 AM1/16/21
to Dražen Babić, Jam.py Users Mailing List
I'll post my css for rows as square product cards today evening, when I'll got home.

сб, 16 янв. 2021 г., 13:30 Dražen Babić <bab...@gmail.com>:
To view this discussion on the web visit https://groups.google.com/d/msgid/jam-py/CAMvz_Hr36U3U2bjJcZKGbfGDUzMkq%3D_dVNvy53oBsONwQY1Zog%40mail.gmail.com.

R. T.

unread,
Jan 16, 2021, 10:09:47 AM1/16/21
to Jam.py Users Mailing List
Here is my css(task -> project.css). I have no time today to edit it for general use, so here is some clues :
"parts" - name of the parent table
"images" - name of the elements with images(set same as in .js file row  "class": "images", style:"overflow: hidden", id: id_l});   (!!! check all occurrence !!!)
"images_test" - name of the images table( set equal as yours )
This is not final variant, but shows general idea. Still can have some small mistakes, again i'm sorry, but have no time today.( booze can't wait XD )
Here is code:

.parts .inner-table {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}
.parts .inner {
    display: BLOCK;
    width: calc(25% - 12px);
    height: 300px;
    padding: 5px 5px 10px 5px;
    border: solid 1px lightgray;
}

.parts .inner td {
    display: flex;
    border: none;
}

.parts thead, .images thead {
    display: none;
}

td.images {
    height: 100px;
}

.images_test * {
    border: none;
}

.images_test .inner {
    height: 50px;
    border: none;
}

.images_test .table th, .images_test .table td {
    height: 50px;
}

.parts img {
    height: auto;
}

суббота, 16 января 2021 г. в 13:38:22 UTC+3, R. T.:

Drazen D. Babic

unread,
Jan 17, 2021, 11:58:46 PM1/17/21
to Jam.py Users Mailing List
Hello, 

thanks for posting. I've tried the code and not quite sure if this is ok :)

Screenshot from 2021-01-18 12-15-34.png

Using v6 though with:

function process_table_row(row, item) {
    var id_l = item.id.value;
    if (item.view_form.length) {
        if (item.rec_count) {
            var images_div = $("<div>", {
                "class": "images", style:"overflow: hidden", id: id_l});
            var images = $("<td>", {
                "class": "images", style:"overflow: hidden"}).html(images_div);
            row.find('td:visible:last').after(images);
        }
    }
    task.images.paginate = false;
    task.images = task.images.copy();
    task.images.create_table(row.find('.images').last(), {
        height: 200,
        form_border: false,
    });
    task.images.set_where({master_rec_id: id_l});
    task.images.open(true);
    var sub_tables = $("div.images table")
    sub_tables.each(function(){
        $(this).removeClass("table-bordered")
    });
}

and

.customer_documents .inner-table {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
}
.customer_documents .inner {
    display: BLOCK;
    width: calc(25% - 12px);
    height: 300px;
    padding: 5px 5px 10px 5px;
    border: solid 1px lightgray;
}

.customer_documents .inner td {
    display: flex;
    border: none;
}

.customer_documents thead, .images thead {
    display: none;
}

td.images {
    height: 100px;
}

.images * {
    border: none;
}

.images .inner {
    height: 50px;
    border: none;
}

.images .table th, .images .table td {
    height: 50px;
}

.customer_documents img {
    height: auto;
}

customer_documents is the Master and images is the Detail

Maybe its a v6 thing though. 

R. T.

unread,
Jan 18, 2021, 3:22:25 AM1/18/21
to Jam.py Users Mailing List
switch off details for the parent table

понедельник, 18 января 2021 г. в 07:58:46 UTC+3, Drazen D. Babic:

Drazen D. Babic

unread,
Jan 18, 2021, 3:59:03 AM1/18/21
to Jam.py Users Mailing List
Than can't add any images or edit :(

With Details, I can even open an image :)

To be fair, I do not think Parent Table needs any displaying of images, the Details are used for that. Like this:

Screenshot from 2021-01-18 16-50-55.png

The question is why the same images are showing on "Customer Details" tab as well.

And how to scale the image when one double-click on the Details, since sometimes a tiny Logo will be displayed bigger than a desktop screenshot :(
Interestingly, I can't double-click on it any more, something I've changed and it does not work. Nothing in the console either...

Anyways, great stuff tho!

Cheers

R. T.

unread,
Jan 18, 2021, 4:08:48 AM1/18/21
to Drazen D. Babic, Jam.py Users Mailing List
To make it full-saized need further code additions. Still there quiet a lot of job to do.

пн, 18 янв. 2021 г., 11:59 Drazen D. Babic <bab...@gmail.com>:
To view this discussion on the web visit https://groups.google.com/d/msgid/jam-py/89eb5198-9380-480c-97df-2e05e263e4b4n%40googlegroups.com.
Reply all
Reply to author
Forward
0 new messages