Template defaults: creating and re-applying your own defaults

  • 3 April 2023
  • 1 reply
  • 98 views

Userlevel 3
Badge +2

Factory default

In Web Designer, the factory default is the default set of page and control classes that USoft supplies initially. These are the classes presented in the Pages catalog and the Controls catalog before you have done any work in Web Designer, as well as the display and navigation features offered by default on the basis of the your metadata. Metadata is information that you declare in USoft Definer and that describes the existence and the properties of Domains, Tables, Columns, and Relationships of your application.

USoft supplies a single factory default. This is largely a static collection of Page classes and Control classes - static in the sense that it is absolutely identical for all USoft web applications. When you inspect the classes in the catalogs, the only variable elements in this factory default are the subclasses that USoft creates automatically on the basis of metadata:

  • For Page classes, these are leaf-node InfoPage, LookupPage and RelatedPage subclasses.
  • For Control classes, these are leaf-node TableDataSource subclasses.

The factory default is described by the following 2 XML files:

USoft-install-dir\APP\WebDefault.xml
USoft-install-dir\APP\WebControls.xml

Template default

For a given application, you can tailor the factory default to your likings: turn the factory default into a template default.

Creating a template default is replacing the factory default. Appreciate that this is completely different from customising the factory default.

This is achieved by applying to the factory default an extension script with special instructions or directives to change or extend the factory default XML.

Syntax principles for the special directives are explained later in this article. The actual commands are listed in a number of reference articles hyperlinked at the very end of this article.

For an application, to turn the factory default into a template default:

  1. On the file system, create and edit a custom XML script containing the special instructions that define your template default.
  2. From USoft Binder, open Web Designer, making sure that the application you want to import the instructions for is correctly specified in the Application field of the Properties sheet of the Binder item.
  3. From the Web Designer menu, choose Tools, Import Default Definition. In the dialog, locate the file with your instructions. Press OK.

USoft recommends you only import a template default initially, that is, before doing any Web Designer work. If you import or re-import later, this could have adverse implications for existing paintings. No mechanism or tooling is offered for analysing these implications beforehand or debugging them afterwards, nor indeed to debug or upgrade the imported instructions themselves.

To create an initial template default, work in a sandbox environment until you are happy with the result. Do not start production work in Web Designer before that time.

After import, your instructions are “picked up” by Web Designer and should reflect in the Pages and Controls catalogs that you get to see on the left-hand side. The instructions are imported as records into ESI tables (eg., T_E_TYPE). These records are specific to the application.

When you come to create a second application, you can choose if you want that second application to have the same template default as the first, or a different template default, or the factory default. The terminology “template” is used because you can re-apply the same customised default to multiple applications or Development environments.

No separate operation is needed to deliver the template default when you release your application to Production. When you publish web pages, the resulting page XML will be based on the template default as a matter of fact.

Template default scripting

The script directives use extra attribute directives and placeholders to describe the template default that you want. Their syntax may look familiar if you know Vue.js.

e-for directive

In template default instructions, you can use the e-for directive to iterate over a list of items.

Syntax

e-for="item in items"

where items is the source data list and item is an alias for the element iterated over. The e-for directive will duplicate the element and all of its containing elements for each element in items.

The item alias can be used in placeholders that have a “moustache” syntax (= are surrounded by curly braces). A placeholder allows you to declaratively bind ESI XML to the repository data.

Example

<esi:class name="{table.getName()}" access_type="ownership" e-for="table in dictionary.getTables()">

</esi:class>

If the metadata describe 3 tables TABLE_A, TABLE_B, TABLE_C, this example template instruction translates into:

<esi:class name="TABLE_A" access_type="ownership">

</esi:class>
<esi:class name="TABLE_B" access_type="ownership">

</esi:class>
<esi:class name="TABLE_C" access_type="ownership">

</esi:class>

The number of possible expressions within the placeholder is limited, but you can concatenate values:

<esi:class name="{'Info ' + table.getName()}" access_type="ownership" e-for="table in dictionary.getTables()">
<esi:heritage name="{table.getName()}"/>
</esi:class>

e-if directive

The directive e-if is used to conditionally render a block. The block will only be rendered if the directive's expression returns a true value. You can express a logical negation by prefixing an exclamation mark (!):

<esi:property name="deletable" value="false" e-if="!table.isDeleteAllowed()"/>
<esi:property name="insertable" value="false" e-if="!table.isInsertAllowed()"/>
<esi:property name="updatable" value="false" e-if="!table.isUpdateAllowed()"/>

Template defaults: Reference Guide

Template default: Dictionary

Template default: Domain Allowed Values

Template default: Relationships, Relationship Columns

Template default: Roles

Template default: Tables, Table Columns


1 reply

 

 

Escaping characters within properties

 

Within propterties there are a few handy-to-know rules for dealing with special characters. Some are discussed here.

 

Tab

Escape the tab with &#x9; otherwise it wil be replaced by a space.

 

Space

Can be used. No need to replace it with &#x20;

 

Newline

Use &#xD;&#xA;

 

Apostrophe, single quote

Use ‘ or &apos;.

When using template scripting you can escape the apostrophe ‘ with a backslash \

<esi:property name="sql" value="{'select \'' + table.getName() + '\' &quot;TABLE_NAME&quot;'}"/>

This will result in the following script within the WebDesigner:

select 'MyTable' "TABLE_NAME"

 

The double quote

Use &quot;.

 

Accolade {

If you have a property that starts with an {, then you need to escape it

  1. By surrounding the whole property value by {<property value>}
  2. By surrounding the property valye by {'<property value>’}
  3. Add a space before the {

This is useful for example if you use handlebars for example to make a string translatable.

Say you want to make a property with the following value:

{{lang "Translatable string"}}

Then the WebDefault line would look like:

<esi:property name="label" value="{'{{lang &quot;translatable string&quot;}}'}"/>

or 

<esi:property name="label" value="{{{lang &quot;translatable string&quot;}}}"/>

Alternatively you can add a space before the {

<esi:property name="label" value=" {{lang &quot;translatable string&quot;}}"/>

 

Reply