How to use Template View?

I'm sorry the documentation isn't helping. Are you getting error messages? Can you explain a little about what you are trying to do? It would help pinpoint what the problem may be (and might help me figure out what is not working in the documentation).

Hi  Sara,

      Response from an app

<s:Envelope xmlns:a="http://www.w3.org/2005/08/addressing" xmlns:s="http://www.w3.org/2003/05/soap-envelope">

  <s:Header>
    <a:Action s:mustUnderstand="1">http://www.reuters.com/ns/2006/05/01/webservices/rkd/Quotes_1/RetrieveItem_3_Reply</a:Action>
    <CacheResponse xsi:type="DoNotStoreCacheResponse" xmlns="http://www.reuters.com/ns/2008/03/01/webservices/rkd/Cache_1" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
      <Date>2011-03-29T07:18:23.6682145Z</Date> <DoNotStore/>
    </CacheResponse>
    <a:RelatesTo>gene@jackbe->retrieveItem_3</a:RelatesTo>
  </s:Header>
  <s:Body>
    <ns0:RetrieveItem_Response_3 xmlns="http://www.reuters.com/ns/2006/05/01/webservices/rkd/Quotes_1" xmlns:ns0="http://www.reuters.com/ns/2006/05/01/webservices/rkd/Quotes_1" xmlns:omm="http://www.reuters.com/ns/2006/05/01/webservices/rkd/QuotesCommon">
      <ns0:ItemResponse>
        <omm:Item>
          <omm:RequestKey Name="IBM.N" NameType="RIC" Service=""/>
          <omm:QoS>
            <omm:TimelinessInfo TimeInfo="0" Timeliness="REALTIME"/>
            <omm:RateInfo Rate="TIME_CONFLATED" TimeInfo="10"/>
          </omm:QoS>
          <omm:Status>
            <omm:StatusMsg>OK</omm:StatusMsg>
            <omm:StatusCode>0</omm:StatusCode>
          </omm:Status>
          <omm:Fields>
            <omm:Field DataType="Double" Name="Last Price"><omm:Double>161.370000</omm:Double></omm:Field>
            <omm:Field DataType="Double" Name="Change"><omm:Double>-0.810000</omm:Double></omm:Field>
            <omm:Field DataType="Double" Name="Day_High"><omm:Double>162.570000</omm:Double></omm:Field>
            <omm:Field DataType="Double" Name="Day_Low"><omm:Double>161.120000</omm:Double></omm:Field>
            <omm:Field DataType="Utf8String" Name="Currency"><omm:Utf8String>USD</omm:Utf8String></omm:Field>
            <omm:Field DataType="Utf8String" Name="Trade Date"><omm:Utf8String>28 MAR 2011</omm:Utf8String></omm:Field>
            <omm:Field DataType="Double" Name="Open"><omm:Double>161.560000</omm:Double></omm:Field>
            <omm:Field DataType="Double" Name="Previous Close"><omm:Double>162.180000</omm:Double></omm:Field>
           </omm:Fields>

 Try something like this:

<table>
<th>
  <td>${Name}</td>  
</th>
{{each (index,value) $data['omm:Fields']['omm:Field'] }}
<tr>
  <td>${value['omm:Double']}</td>
</tr>
{{/each}}
</table>

I think that the each statement can take several forms , among them:

{{each $data['omm:Fields']['omm:Field'] }}
<tr>
  <td>${this['omm:Double']}</td>
</tr>
{{/each}}

or 

{{each $data['omm:Fields']['omm:Field'] }}
<tr>
  <td>${$value['omm:Double']}</td>
</tr>
{{/each}}

the jQuery docs about template are not that great, so you have to experiment a little with the above examples, but I think $data is going to make the difference.

(http://api.jquery.com/template-tag-each/ just in case you are curious).

 Additionally you have to use the right path to the repeating node that you want to use, for example:

$data['s:Envelope']['s:Body']['ns0:RetrieveItem_Response_3']['ns0:ItemResponse']['omm:Item']['omm:Fields']['omm:Field']   

Hi Isreal,

Thanks for reply, I made the changes according to your reply, its working fine.

I have one more issue.

How to handle event handler in Template view.

I want to display the region name in one dropdown, in Region name onselect I need to fill "topic code" in another dropdown.

below is the response from an APP
 

<?xml version="1.0" encoding="UTF-8"?>
<s:Envelope xmlns:s="http://www.w3.org/2003/05/soap-envelope"
xmlns:a="http://www.w3.org/2005/08/addressing">
<s:Header>
<a:Action s:mustUnderstand="1">http://www.reuters.com/ns/2006/05/01/webservices/rkd/OnlineReports_1/GetTopics_2_Reply</a:Action>
<CacheResponse xmlns="http://www.reuters.com/ns/2008/03/01/webservices/rkd/Cache_1"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:type="DoNotStoreCacheResponse">
<Date>2011-03-29T14:31:20.6402967Z</Date>
<DoNotStore/>
</CacheResponse>
<a:RelatesTo>gene@jackbe->getTopics_2</a:RelatesTo>
</s:Header>
<s:Body>
<GetTopics_Response_2 xmlns="http://www.reuters.com/ns/2006/05/01/webservices/rkd/OnlineReports_1">
<Region name="UK Online Report">
<topic code="OLGBTOPNEWS" desc="Top News"/>
<topic code="OLGBWORLD" desc="World"/>
<topic code="OLGBBUS" desc="Business"/>
<topic code="OLGBENT" desc="Entertainment"/>
<topic code="OLGBSPORT" desc="Sports"/>
<topic code="OLGBINT" desc="UK Internet Report"/>
<topic code="OLGBODD" desc="UK Oddly Enough Report"/>
</Region>
<Region name="France Online Report">
<topic code="OLFRTOPNEWS" desc="Top News"/>
<topic code="OLFRBUS" desc="Business News"/>
<topic code="OLFRSPORT" desc="Sports"/>
<topic code="OLFRTECH" desc="France Technology Report"/>
<topic code="OLFRODD" desc="France Oddly Enough Report"/>
</Region>
<Region name="Italy Online Report">
<topic code="OLITTOPNEWS" desc="Top News"/>
<topic code="OLITBUS" desc="Top Business"/>
</Region>
<Region name="Spain Online Report">
<topic code="OLESBUS" desc="Business"/>
<topic code="OLESSPORT" desc="Sports"/>
<topic code="OLESTOPNEWS" desc="Top News"/>
<topic code="OLESENT" desc="Entertainment"/>
<topic code="OLESINT" desc="Spain Internet Online Report"/>
</Region>
<Region name="Russian Online Report">
<topic code="OLRUTOPNEWS" desc="Top News"/>
<topic code="OLRUBUS" desc="Top Business News"/>
<topic code="OLRUSPORT" desc="Top Sport News"/>
<topic code="OLRUODDLIFE" desc="Oddly Enough/Lifestyle"/>
</Region>
<Region name="Canada Online Report">
<topic code="OLCABUS" desc="Business"/>
<topic code="OLCACOUNTRY" desc="Canada National"/>
<topic code="OLCAENT" desc="Entertainment"/>
<topic code="OLCASPORT" desc="Sport"/>
<topic code="OLCATECH" desc="Canada Technology"/>
</Region>
<Region name="U.S Online Report">
<topic code="OLUSTOPNEWS" desc="Top News"/>
<topic code="OLUSBUS" desc="Business"/>
<topic code="OLUSWORLD" desc="World"/>
<topic code="OLUSSPORT" desc="Sports"/>
<topic code="OLUSPOLITIC" desc="Politics"/>
<topic code="OLUSENT" desc="Entertainment"/>
<topic code="OLUSSCIENCE" desc="Science"/>
<topic code="OLUSTECH" desc="U.S Technology Online Report"/>
<topic code="OLUSODD" desc="U.S Oddly Enough Online Report"/>
</Region>
<Region name="Middle East Online Report ">
<topic code="OLMETOPNEWS" desc="Top Middle East News"/>
<topic code="OLMEWORLD" desc="World News"/>
<topic code="OLMEBUS" desc="Business"/>
<topic code="OLMESPORT" desc="Sport"/>
<topic code="OLMEENT" desc="Entertainment"/>
<topic code="OLMEITE" desc="Internet, Technology & Environment"/>
</Region>
<Region name="Brazil Online Report">
<topic code="OLBRBUS" desc="Business"/>
<topic code="OLBRTOPNEWS" desc="Top News"/>
<topic code="OLBRENT" desc="Entertainment"/>
<topic code="OLBRSPORT" desc="Sports"/>
<topic code="OLBRWORLD" desc="World"/>
<topic code="OLBRINT" desc="Brazil Technology/ Internet Online Report"/>
</Region>
<Region name="Latam Online Report">
<topic code="OLLTTOPNEWS" desc="Top News"/>
<topic code="OLLTBUS" desc="Business"/>
<topic code="OLLTSPORT" desc="Sports"/>
<topic code="OLLTENT" desc="Entertainment"/>
<topic code="OLLTCOUNTRY" desc="Latam Country News "/>
<topic code="OLLTWORLD" desc="Latam US and World News "/>
<topic code="OLLTINT" desc="Latam Internet Report"/>
</Region>
</GetTopics_Response_2>
</s:Body>
</s:Envelope>

Below is template code

<div>
<script type="text/javascript">
$("#cmbregion").change(function(){   
     
   <div style="font-size:1.2em;">Get Topics</div>
    <select>
         {{each ${topic}}}

         <option value=${code}>${desc}</option>

        {{/each}}
    </select>
});
</script>
</div>

<div style="font-family:Verdana,Helvetica,sa-serif;">
<div style="font-size:1.2em;">Region</div>
<select id="cmbregion" >
{{each GetTopics_Response_2.Region}}
<div>
<option>${name}</option>
</div>
{{/each}}</select>
<button id="btnsearch"  width="100px" height="100px">search</button>
</div>

I have achieved fill the region name in first dropdown. and written code to fill topics in first dropdown onchange event . its not working.

please help me out.

Thanks in advance,

Samiksha.

 Hi Samiksha,

I think I understand the problem here, look, the trick with the template view - or jQuery template for that matter- is that you have to be clear on this: at the end of the day the template is going to generate a huge string and that string is going to be inserted in your document, then the string that you generate has to be valid HTML and JS

With in that in mind the way you generate the HTML for the select is ok, it is as simple as iterating over you repating node and generating the options, right?? i.e <select>{{each GetTopics_Response_2.Region}}   <option>${name}</option>    {{/each}}</select>, right? so that will generate something like:

<select>

<option>UK Online Report</option>

<option>France Online Report</option>

and son on ...

</select>

right?, and that is correct that is well formed HTML.

The problem comes  with this segment:

<script type="text/javascript">
$("#cmbregion").change(function(){    
      
   <div style="font-size:1.2em;">Get Topics</div>
    <select>
         {{each ${topic}}}

         <option value=${code}>${desc}</option>

        {{/each}}
    </select>
});
</script>

it is going to generate HTML inside a JS function and I'm pretty sure it is going to throw an error when you load it into the document.

My suggestion to you is that you must generate all the selects you need from the service response you get,

something like the following schetchy code that you must polish :) :

- the first select, I'll call it the region select:

<select id="regionSelect">{{each(index,region) GetTopics_Response_2.Region}}   <option value="${index}">${name}</option>    {{/each}}</select>

- next all the dropdowns for each region

{{each(rindex,region) GetTopics_Response_2}}

<div id="region-${rindex}" class="regions" style="display:none;"><select>

   {{each(tindex,topic) region}}

        <option value="${topic.code}">${topic.desc}</option>

   {{/each

</select></div>

 {{/each}}

-and finally the script tag 

<script>

(function($){

    $("#regionSelect").change(function(){

          var selectedRegion = $(this).val();

          $("div.regions").hide();          

           $("div#region-"+selectedRegion).show();

    });

})(jQuery);

</script>

and that's it, give at try and please tweak the code and experiment a little with it until you get the result you want, also consider that I wrote the above as I was replying so it might not be perfect but it should give the general idea and put you in the right track.

Good coding,

Israel