Form Image

Webix JS
#1

I have a form containing user information and I need to include a ID badge image. This will need to change when new data is loaded into the form.
I have looked at the ‘template’ view example, and have tried to adapt it for my own use. I create the forms in php using the JSON format so for a normal text field everything is needed to be quoted as

{
    "id":"frmID",
    "name":"frmID",
    "view":"text",
    "value":"100"
},

This is one of my attempts. The ‘img’ parameter is the one that will change when new data is loaded.

{
    "view":"template",
    "data":{
        "path":"/core/id_photo.php?id=p",
        "img":"0",
        "width":"120",
        "height":"120"
         },
    "template":function(obj){
             return "'<img src="' + obj.path + obj.img +'"/>'";
     }
}

How do I quote the “template” function to get it into a JSON format to run out of php?
Or is there an easier way to create an image that responds to data loading?

Many thanks

#2

JSON can’t contain a function, please check its notation

But the template can be a string:

http://webix.com/snippet/8f43fa71

#3

Brilliant, thought that there must be an easier (and correct) way.
Thanks for you help.

#4

hi

This is working fine and the application is coming along well but …
I have a situation that this image may be on more than one form (main plus a popup) and has the same id.
I would like to use the same json form template in both cases.
I can set the image source for one form using $$(‘image_id’).setValues({img:id},true), but how can I check if this element exists on a form and access information within it on the particular form.
I normally differentiate between form elements using $$(‘form_xx’).setValues().nnn and getValues etc.
I investigated the webix code and checked $$(‘form_xxx’).elements but the image being in a template is not shown, also I am always wary about delving into the underlying code and not relying on the published interfaces.

Your clarity on this matter would be fully appreciated.

#5

Hi,

You can define the name property for your template. It will make it accessible by form.elements.name.

If you want more advaned behaviour like setting and getting template values together with other form fields, you need to add getValue() and setValue() methods for your template: http://webix.com/snippet/aec12f4a

#6

Thanks
A ‘simple’ answer as usual.