Using a custom template

You can specify a different template for the list items using one of the following methods:

Using the itemTemplate property in the initialization object for setListView( ).

Calling the class-level method, progress.ui.UIHelper.setItemTemplate( ).

By not specifying the format property. In this case, the UIHelper uses the first item element in the list view as the template for the items.

You can also specify a different template for the fields returned when calling getFormFields( ):

Specify the fieldTemplate property in the initialization object for setDetailPage( ).

Call the class-level method, progress.ui.UIHelper.setFieldTemplate( ).

Alternatively, you can define the layout for the detail page using HTML instead of calling getFormFields( ).

<li data-theme="c" data-id="{__id__}">
<a href="#{__page__}" class="ui-link" data-transition="slide">{__format__}</a>
</li>

The default field template looks like this:

<div data-role="fieldcontain">
<label for="{__name__}">{__label__}</label>
<input id="{__name__}" name="{__name__}" placeholder="" value="" type="text" />
</div>

The templates use the following substitution parameters:

Used when building the list items by calling addItem( ):

{__page__} — The name attribute of the object passed as a parameter to setDetailPage( ), which defines the detail page

{__format__} — The format attribute of the object passed as a parameter to setListView( ) or (optionally) to addItem( ), which identifies the fields to be included for each item in the list view

Used for the HTML text returned when calling getFormFields( ):

{__name__} — The field name in a table as defined by the name property in the catalog

{__label__} — The label of the field in a table as defined by the title property in the catalog

The properties itemTemplate and the fieldTemplate can be used to change the template for a specific UIHelper instance.

uiHelper.eCustomer.setListView({
    name: 'cust-listview',
    format: '{CustNum} {Name}<br>{Address}',
    autoLink: true,
    itemTemplate: '<li data-id="{__id__}"><a href="#{__page__}" >{__format__}</a></li>'
});

uiHelper.eCustomer.setDetailPage({
name: 'cust-detail-page',
fieldTemplate: '<input id="{__name__}"></input>'
});

The class-level methods progress.ui.UIHelper.setItemTemplate( ) and progress.ui.UIHelper.setFieldTemplate( ) can be used to change the template to be used by the UIHelper for a JavaScript session.

progress.ui.UIHelper.setItemTemplate('<li data-id="{__id__}"><a href="#{__page__}" >{__format__}</a></li>');

progress.ui.UIHelper.setFieldTemplate('<input id="{__name__}"></input>');