Execute code into templates

Hello. I have two questions because I want to do something with dhtmlxDataView and I don’t know how to do.

First, I need to choose one of three fields to enter as a link depending on a global variable:

<div class="det"><a href={obj.URL1}>text</a></div>

Where depending on the variable ‘origin’ with values of 1, 2 or 3 I want to put {obj.URL1}, {obj.URL2} or {obj.URL3}.

And second, I don’t know how to insert images into a

depending on the value of some fields. For example, if field ‘tag1’ has a value of 1 or 3 I want to put ‘image1’, and if the value is 2 or 3 then ‘image2’. The JavaScript code is simple, but I cant attach the function into the template.

Can you help me whit this both issues? I’ve read the documentation and found how to create a method like this:

view.define("type",{ template:"#a# - {common.mymethod()}", mymethod:function(obj){ return obj.b.toUpperCase(); } }) // a - B

But I can’t understand how to apply this in the code, supposing this is what I must do. I don’t know if have to change words like ‘type’ or ‘common’. Can you help me, please?

Many thanks in advance.

Hello
Adding links the next way:

data.parse([{ "id": "1", "Package": "<a href='dhtmlx.com'>dhtmlx.com</a>", "Version": "DHTMLX", "Maintainer": "DHTMLX Docs & Samples Explorer" }], "json");

About pictures: you can define pictures the next way:

data = new dhtmlXDataView({ container:"data_container", type:{ template: "#Package# #Version# : #Maintainer#", height:60 } }); data.customize({ icons_src_dir: "../___img/" }); data.parse([ { "id": "1", "Package": "<img src=../___img/dhtmlx.gif>", "Version": "DHTMLX", "Maintainer": "DHTMLX Docs & Samples Explorer" }], "json");

If you need to variate these types - you need the next:

[code] data = new dhtmlXDataView({
container:“data_container”,
type:{
template: “ #Version# : #Maintainer#”,
height:60
}
});

    data.parse([
        {
            "id": "1",
            "Version": "DHTMLX",
            "Maintainer": "DHTMLX Docs & Samples Explorer",
            "Type": '_blue'
        },{
            "id": "2",
            "Version": "DHTMLX",
            "Maintainer": "DHTMLX Docs & Samples Explorer",
            "Type": '_blue'
        },{
            "id": "3",
            "Version": "DHTMLX",
            "Maintainer": "DHTMLX Docs & Samples Explorer",
            "Type": '_green'
        },{
            "id": "4",
            "Version": "DHTMLX",
            "Maintainer": "DHTMLX Docs & Samples Explorer",
            "Type": '_blue'
        }], "json");[/code]

Result:

Hello again. I’m very sorry, but I’m giving the best of me but I can’t figure out how to relate ‘origin’ variable and JSON structure. I’m not ver familiar with JSON. I guess I must use something like:

[code]

#desc#
;

dhxView.parse([{
“origin”: “1”,
“desc”: “Description 1”,
“theURL”: “obj.URL1”
},{
“origin”: “2”,
“desc”: “Description 2”,
“theURL”: “obj.URL2”
},{
“origin”: “3”,
“desc”: “Description 3”,
“theURL”: “obj.URL3”
}], “json”);[/code]

But this, of course, is only a bad try. Can you put me in the right way, please?

Thank you again for your help.

Try to put your links directly in “theURL” attribute:

dhxView.parse([{ "id": "1", "origin": "1", "desc": "Description 1", "theURL": "<a href='obj.URL1'>object1</a>" },{ "id": "2", "origin": "2", "desc": "Description 2", "theURL": "<a href='obj.URL2'>object2</a>" },{ "id": "3", "origin": "3", "desc": "Description 3", "theURL": "<a href='obj.URL3'>object3</a>" }], "json");

And pas ID correctly: you may need them in the future.

I tryed your proposition and always get “undefined”.

But how can I say in the template: “If in variable ‘origin’ has a value of 1, this item uses obj.URL1? And the same with values 2 and 3.” I think I can understand the code of the blue and green aquare GIFs, but it has 4 IDs (1 to 4) and 4 items in the viewer. It seems that relate each ID with each item in the viewer. I need to build only 3 rules in the JSON and use it in all items in the viewer, depending on the value of the variable.

Thanks for your patience.

Could you attach you completed demo?
docs.dhtmlx.com/doku.php?id=othe … leted_demo
We need to see all you rules and ect to understand this part of your app.

Yes, I can build a demo for you, of course, but I think it’s not necessary. My real problem is I don’t know how to use the parse JSON data. I understand the structure of JSON, but I can’t figure out how to use it to make decisions. I simply need to use one field or another from the ‘obj’ object (who has all the fields inside it) on each item in the viewer depending on a global variable. If in this moment the variable has a ‘1’, the items in the DataView must show ‘obj.description1’. If ‘2’, ‘obj.description2’, and so on.

Hope been more clear this time. English isn’t my first language.

Thank you.

It seems to me, that if you have ‘undefined’ result - you can set the wrong settings not only in json.
All you need i’ve already gave you.

  1. what kind of data will you have?
  2. how many items will you have?

Just one more thing: i’ve missed the target on the link.
“Package”: “dhtmlx.com”,

I load the viewer with data from a database with a connector, and that works fine. I have a number of items, not always the same, maybe 200 or 300. In the template I use {obj.field} or #field# to get data and show each item as I want: one picture (in {obj.photo}), two descriptions (in {obj.title} and {obj.date}), and the whole item is a link (in {obj.URL1}).

But, depending on the situation, sometimes I need to use {obj.URL1}, others {obj.URL2} and others {obj.URL3}. The global variable ‘origin’ has the value 1, 2 or 3 that defines the situation.

There are more decisions to take, depending on the values of other fields, but if you teach me to do the URLs example, probably I will resolve by myself.

Again, thanks for your patience.

Hello,

template for dataview items can be specified by a function, not only a string. This function takes data an item as an argument and should return html string. Template is applied to each item of datavew. Here is an example:

var urls = {1: "url1", 2: "url2", ... }; var titles = {1: "object1", 2: "object2", ... }; dhxView= new dhtmlXDataView({ ... type:{ template:function(data){ return "<a href='"+urls[data.origin]+"'>"+titles[data.origin]+"</a>" } } });

Or you can define all values in datasource:

dhxView= new dhtmlXDataView({ ... type:{ template:function(data){ return "<a href='"+data.url+"'>"+data.object+"</a>" } } }); dhxView.parse([{ "id": "1", "origin": "1", "desc": "Description 1", "url": "URL1", "object": "object1" }, ... ]);

template:function(data){ return "<a href='"+data.url+"'>"+data.object+"</a>" }
is the same as as

template: "<a href='#url#'>#object#</a>"

You also asked about the following code snippet:

view.define("type",{ template:"#a# - {common.mymethod()}", mymethod:function(obj){ return obj.b.toUpperCase(); } }) // a - B

‘common’ can not be changed here. It refers to ‘type’ object in dataview config. obj is argument of the mymethod function, so it can be changed

Thank you for the clue. And what can you say about muy second question? I have an html->type template, and need to show several images into each item depending on the tags it has. For example, item 1 has ‘FieldTag1=1’, ‘FieldTag2=0’ and ‘FieldTag3=1’, so I must include in the template and , but not (because has 0 in the tag2). Item 2 has tags ‘0,0,1’ so only Image3 must be shown. And so on with every item and diferent combinations. How can I define this template?

Does not function definition of template solve the issue ?

Here one more example of using function:

template:function(data){ var html = ""; if(data.FieldTag1 ==1){ html += '<img src="Image1">' } if(data.FieldTag2 ==1){ html += '<img src="Image2">' } ... return html; }

But I have a template defined in a like this:

<textarea id="type_detail" style="display:none;"> <div class="det"><a href={obj.URL1>} target="_blank"> <div class="img" style="background-image:url({obj.Photo});"><span>{obj.Name}<br><i>(#Date#)</i></span></div> <div class="icons"> <img src="Icon1.png"> <img src="Icon2.png"> <img src="Icon3.png"> </div> </a></div> </textarea>

and I can’t be able to adapt it into a var as ‘html’ in your example (I don’t know why, maybe te quotes, maybe the carriage returns…). I think if I could do that it will resolve my problem.

Really grateful for your help.

But I have a template defined in a like this:

You need to use function as template instead of textarea. String template as well html template doesn’t allow to use conditions.

Thanks a lot! Works perfectly. You saved my project.

Eternally grateful. Best regards.

I was happy to help )