How can i make a custom layout for editor window and show image for the selected product

hanssonrickard

Hi.
I have an table in mysql with products.
The productID column (which is actually the row ID also) have an file id that i would like to use to show an larger image preview (by calling an api with the file id that gives me back the actuall image) in the Editor form when i edit the product details.
But i can not find any information how to call that fileID and show it as an static image in an custom form.
There are plugins for the editor, to make your own input fields, but that i do not wish to do.

Any suggestions?

How can i access the values and show them in my custom form without having them as input fields?

My columns in DB:
productID (unique, primary key)
productName
campaign
customer
....

I would like to on the left show the static image based on the productID
and to the right in the form show the input fields such as "productName", "campaign", "customer"

hanssonrickard

The src for the img tab should be (illustrated only):
<img src="api/getimage.php?filetype=small&fileid='productID'">

Where "productID" should refer to the productID of the edited product.

allan

You can provide a template for Editor to use as described here. Then in a initEdit event handler you could update the template based on the data of the row being edited (i.e. set the src attribute of the img element).

Allan

hanssonrickard

Ok, thanks. Will have a look at the "initEdit" event.
The template function i had already looked at, but "all" in fo in there is related to edit fields, therefor i had no idea of how to handle static elements on the form with "dynamic data".
I will update this thread after i have given it a test.

hanssonrickard

Hmm. I thought i could do something like this. But the src is not changed for the img tag i have in my custom form.

JS code:

editor.on('initEdit', function( e, node, data ) {
            editor.show(); //Shows all fields
            editor.hide('products.productID');
            console.log(data.products.productID);
            $("#preview").attr("src","api/image_api.php?filetype=small&fileid=" + data.products.productID);
        });

The custom form looks like this (just as an sample for the moment to see that i get correct info and then i will change styling).

<div id="customForm">
            <div class="container">
                <div class="row">
                    <div class="col-6">
                        <img id="preview" src="#">
                    </div>
                    <div class="col-6">
                        <fieldset class="name">
                            <legend>Produktdata</legend>
                            <editor-field name="products.productGroupID"></editor-field>
                            <editor-field name="products.customerID"></editor-field>
                            <editor-field name="products.campaignID"></editor-field>
                            <editor-field name="products.processID"></editor-field>
                            <editor-field name="products.countryID"></editor-field>
                    </div>
                </div>
            </div>
        </div>

doing the console.log() in my initEdit function shows that i get the correct value.

Sorry for being such an newbie when it comes to JS and jquery...

hanssonrickard

Finally got it working after searching and testing stuff i finally found this forum thread
https://datatables.net//forums/discussion/comment/102386/
which gave me the info that the form is not in the DOM yet when initEdit happens.

Here is my final code:

editor.on('initEdit', function( e, node, data ) {
            editor.show(); //Shows all fields
            editor.hide('products.productID');
            editor.on( 'open', function () {
                $("img#preview").attr("src","api/image_api.php?filetype=small&fileid=" + data.products.productID);
            } );
        });

This thread can be closed.

allan

I think you'd need to cache the element first - e.g.:

var preview = $("#preview");

editor.on('initEdit', function( e, node, data ) {
            editor.show(); //Shows all fields
            editor.hide('products.productID');
            console.log(data.products.productID);
            preview.attr("src","api/image_api.php?filetype=small&fileid=" + data.products.productID);
        });

The reason being is that Editor will remove the element from the document, thus it wouldn't be selectable from the document (which is what jQuery is doing).

Allan

hanssonrickard

Allan, which is better/worse between your "cache" approach and mine above where i do it in an editor.on("open") function?

I clearly get the correct result using the "open" event. But maybe yours is an better approach?

What if i would like to decorate my form with more elements based on the data, would the "open" event be better in that case, not needing to cache each element i wish to decorate or alter?

allan

Open event is absolutely fine - in fact probably better. But I'd suggest you use one() rather than on() to attach the open event handler. Otherwise the event will trigger multiple times on each activation if opened multiple times.

Allan