Using Custom Rendering Templates for Web Development with VoiceObjects

Introduction

Mobile web pages can be customized and branded, in VoiceObjects, to quite some extend by object configuration and tuning parameters (such as references to cascading style sheets and logo images). Still, it is sometimes necessary to tweak or change the underlying HTML rendering templates - for example, when you want to design complex web forms, or when the standard layout doesn't quite meet your fancy UI requirements.

This article describes how to change the rendering of HTML for VoiceObjects.

Please read before starting

Before you begin, please read the VoiceObjects documentation: Design Guide, chapter 12 How to Build Mobile Web Applications, and chapter 10 How to Support Multiple Phone Channels.

Sample application

If you want to get familiar with the way multi-channel applications are built in VoiceObjects, we recommend to download and install the sample application Prime Telecom. Navigate to the Demos & Templates section on the VoiceObjects Developer portal to retrieve the required resources.

You want to download 3 files:

1. Prime Telecom Primer(PDF file) - Contains instructions how to install and use the Prime Telecom application, and gives in-depth information about the highlights and functionality.
2. Formatting Bus extension (zip file) - Required extension of the Formatting Bus. Please read the Prime Telecom Primer for detailed information on how to install this package.
3. Prime Telecom resources (zip file) - All resources of the Prime Telecom sample application. Please read the Prime Telecom Primer for detailed information on how to install this package

Please see additionally attached to this knowledgebase article a sample custom rendering templates configuration file, and a sample CSS document.

Customize now!

Standard RenderTemplates.xml

The standard rendering templates can be found in the

[eclipse]\plugins\com.voiceobjects.eclipseDesktop_x.y.z\config

folder in a Desktop for Eclipse (DfE) installation, and in

[VoiceObjects]\Platform\WEB-INF\config

in a VO Server installation.

This is the mapping from XML elements to VO object types:

<promptset> <!-- Output (also embedded Output in Module) -->
<input> <!-- Input -->
	<template id="0"> <!-- Presentation Input = "text" -->
	<template id="1"> <!-- Presentation Input = "menu" -->
	<template id="2"> <!-- Presentation Input = "password" -->
	<template id="3"> <!-- Presentation Input = "radio" -->
	<template id="4"> <!-- Presentation Input = "list" -->
	<template id="5"> <!-- Multi-slot (mixture of input types) -->
<summary> <!-- Confirmation -->
<menu> <!-- Menu -->
<exit> <!-- Exit -->
<finalexit> <!--- Exit -->
<report> <!-- List -->

Definition of service-specific render templates file

Make a copy of a subset of rendering templates and deploy them to a file called RenderTemplates_{VSN}.xml into the same folder (/WEB-INF/config) as the original RenderTemplates.xml. Replace {VSN} with the name of a service. With DfE in standalone mode, the one and only service object uses the VSN testService, so the file must be named RenderTemplates_testService.xml.

Whenever the service identified by this VSN is called, these templates from the custom file will be used. In case a specific template is not found in that custom file, VoiceObjects Server falls back to the standard definition in RenderTemplates.xml.

Definition of object-specific render templates

In the custom rendering templates document that we created in the previous step, you may add templates that are specific to one or several objects. E.g., to add a specific template for an output object with the referenceID "mySpecialOutputObject", add this xml markup:

<promptset referenceID="mySpecialOutputObject"> 
	<template id="0">
		…
	</template>
</promptset> 

If this template should be used by several objects, you can assign a comma-separated list of referenceIDs to the referenceID attribute.

Definition of custom tuning properties

Define a custom tuning property in the "Tuning" section of an object. Say, you assigned the name "foobar" as the property name. This property can be referenced in your custom rendering templates with this syntax: @TUNING_foobar@ or, if it is optional,  {%@TUNING_foobar@%} .

Attachments

Sample custom rendering templates configuration file