Search
Clear search
Close search
Google apps
Main menu
true

Fusion Tables is an experimental app.

Tip: Use dynamic templating

You may want to adjust your info window or card contents based on your data values, such as skipping blank columns showing a readable label instead of a numeric code. There is an alternate custom template format that allows this kind of control.

The alternate format uses Closure Templates. The following examples use this table: List of statues by height with advanced info window formatting. Though the examples use info windows the same templates can be used with cards.

To use the new format, the first line must be {template .contents} and the last line must be {/template}. To include a column's value, use {$data.value.ColumnName} or {$data.value['Column Name']}:
{template .contents}
<div style="width: 300px; height: 300px; overflow: auto">
  <div style="align: center">
    <b>{$data.value.Statue}</b>
    <p>Statue of {$data.value.Depicts}</p>
    <p>{$data.value['Height (m)']} meters tall</p>
  </div>
  <img src="{$data.value.Photo}" width="200">
</div>
{/template}

So far, this is what you can already do. The next example adds an {if} tag to remove the img tag if there's no photo:

{template .contents}
<div style="width: 300px; height: 300px; overflow: auto">
  <div style="align: center">
    <b>{$data.value.Statue}</b>
    <p>Statue of {$data.value.Depicts}
    <p>{$data.value['Height (m)']} meters</p>
  </div>
  {if $data.value.Photo}
  <img src="{$data.value.Photo}" width="200">
  {/if}

</div>
{/template}

This more complete example changes the overall size of the info window based on the presence of the photo, puts in some alternate content when the photo is missing, and uses different text colors based on the height:

{template .contents}
<div style="width: 300px; {if $data.value.Photo}height: 300px;{/if} overflow: auto">
  <div style="align: center">
    <b>{$data.value.Statue}</b>
    <p>Statue of {$data.value.Depicts}</p>
    <p style="color: {if $data.value['Height (m)'] > 30}red{else}green{/if}">
    {$data.value['Height (m)']} meters tall</p>
  </div>
  {if $data.value.Photo}
  <img src="{$data.value.Photo}" width="200">
  {else}
  <i>No image available</i>

  {/if}
</div>
{/template}
You can also combine conditions with and and or and compare values with the == and != operators. See the expression documentation for full details.

Including formatted data values

The values inserted with {$data.value.ColumnName} are the raw values, and so do not use any numeric or date format you applied to the column. Use {$data.formatted.ColumnName} to insert the formatted value instead. When comparing numbers or dates you must use {$data.value}, but for displaying you can use either version.

Referring to columns

You can use simple references like {$data.value.ColumnName} or {$data.formatted.ColumnName} if the column name has only letters and numbers and starts with a letter. Otherwise use {$data.value['Column Name']} or {$data.formatted['Column Name']}. You can see this in use in the examples: {$data.value['Height (m)']}.

You can also use column numbers instead of names. "Height (m)" is the sixth column so it could be included as {$data.value.col5} (the count starts from zero).

When you are composing your custom template, clicking on a column name in the left panel will insert the proper column reference, either the simple version or the quoted one.

Comparing dates

Dates are converted to numbers as YYYYMMDDHHMMSS, so March 21, 2013 1:42:23 pm is 20130321134223. You can use numeric comparisons like this (the trailing ".0" is required):

{if $data.value.date > 20130321134223.0}Springtime 2013{/if}

Fixing problems

Errors in processing the template are reported in the info window or card itself. For instance, if you leave off a closing brace the info window will show an error like the following:

In file template contents, template infowindow.contents: Left brace '{' not allowed within a Soy tag delimited by single braces (consider using double braces to delimit the Soy tag) [line 24, column 1].

As this example shows, the messages can be a bit obscure. So the best approach is to make small changes and test them frequently so you can easily tell which change caused the problem.