OpenSocial Templates

OpenSocial Templates are a tool which developers can use to easily build gadgets with relatively little of no Javascript coding. Templates make use of OpenSocial Markup Language (OSML) and Expression Language (EL) and are typically used in conjunction with Data Pipelining.

To use OpenSocial Templates developers must require the opensocial-template features

<Require feature="opensocial-templates"/>

Because OpenSocial Templates are typically used in conjunction with data pipelining developer should consider requiring this feature as well.

<Require feature="opensocial-data"/>

Template Tags

Template tags can be used either from within a <Templates> element

<Templates>

or the <Context> element by invoking them via script tags

<script type="text/os-template">

<Templates> v. <script type="text/os-template">

Defining templates via <Templates> element allows them to be accessible from all the different views. Templates defined this way are not rendered until they are called from within the Javascript gadget code.

Example:

Defining templates via <script type="text/os-template"> allows them to be place directly into the <Context> element and rendered via the gadget.

Example:

Required Data

Data which is require for rendering the template. This is declared using the @require attribute.

Example

<script type="text/os-template" require="Viewer, Owner">
  Hello, <os:Name person="${Viewer}"/>, welcome to <os:Name person="${Owner}"/>'s application 
</script>

Auto Update

Because more OpenSocial Templates are rendering external data which may be changing frequently, OpenSocial templates offer a way to allow the template to be re-rendered anytime the required data changes. This is done via the @autoUpdate attribute.

Example

Inline Variables

<os:Var> - Used to declare variables inline with the a template

Special Variables

${Top} - the data context passed into the template rendering

${Context} - holding area for template specific variables

• ${Context.UniqueID} - Unique ID of the template currently being rendered
• ${Context.Index} - index of the current item being processed via a repeat tag
• ${Context.Count} - Count of items being process via a repeat tag

${Cur} - The current data item being processed

${My} - Data passed into the template via a Custom XML Tag. This is only available in template that use Custom Tags

Conditional Content

Content within templates can be displayed conditionally based on the value of an expression.

Conditions can be used in templates in two ways:

• Tags

<os:If condition="${Condition.To.Test}">
This information you want to display conditionally

</os:If>

• Attributes

<div if="${Condition.To.Test}">The information you want to display conditionally</div>

Repeated Elements

• Tag

<os:Repeat expression="${Top.ViewerFriends}">
  <div>
    Your friend's name is ${Cur.Name}
  </div>
</os:Repeat>

• Attribute

<div repeat="${Top.ViewerFriends}">
  Your friend's name is ${Cur.Name}
</div>

Further Information

• OpenSocial Templates Developer's Guide at OpenSocial.org
• Social Mashup Tutorial at OpenSocial.org