HTML Templates

In the Templates, it’s possible to edit and create models for the Headers, Footers or the User HTML (Grid and Control). These models define the interface structure of the applications. You can create a HTML file and define where the entry data will be, by use curly brackets {} to specify a variable. The User Defined HTML option is used in Grid and Control applications, where it’s possible to define all the structure of the report in HTML and associate the fields of the applications with the variables created on the body of the HTML file. With this it’s possible to create Control and Grid applications with a different layout, being able to place the fields anywhere on the page.

Header and Footer

In the editor for the Header and Footer, you need to create or edit existing models.

To create a new model, there’s a standard code to use as a base of all the HTML.

The creation of fields in the HTML needs to be done with curly brackets, for example: {variable}.

Code example:

<div style="width: 100%">
 <div {NM_CSS_FUN_CAB} style="height:11px; display: block; border-width:0px; "></div>
 <div style="height:37px; background-color:#FFFFFF; border-width:0px 0px 1px 0px;  border-style: dashed; border-color:#ddd; display: block">
    <table style="width:100%; border-collapse:collapse; padding:0;">
        <tr>
            <td id="lin1_col1" {NM_CSS_CAB}><span>{LIN1_COL1}</span></td>
            <td id="lin1_col2" {NM_CSS_CAB}><span>{LIN1_COL2}</span></td>
        </tr>
    </table>         
 </div>
</div>

These fields are displayed in the application where the template is going to be used.

After saving the template, you need to open the application that you’re going to use the template in and go to “Layout > Settings”, choose the model for the Header and Footer that you’ll use and in “Layout > Header & Footer” you’ll associate the created fields in the template with the desired information available by ScriptCase.

User Defined HTML

In the User Defined HTML we can specify where the fields of the applications will be displayed in the HTML file by using curly brackets {variable}. Like the example below:

<table border="0" cellspacing="0" cellpadding="0">
      <tr>
                <td width="247" height="96" align="left" valign="center">
                <font face="verdana" style="font-size:11px">
                <b>{Name}</b><br>{Address}<br>{City} - {State}<br>
                {ZIP}
                </font>
                </td>
      </tr>
</table>

The preview of the code above will be like the following: {Name} {Address} {City}-{State} {ZIP}

Remember that all the content that has curly brackets are considered a field of the application, this is why when you have {Name}, it’ll be referencing a field called ‘Name’ in your application.

In the template we can define a delimiter by using “”:

<table border="0" cellspacing="0" cellpadding="0">
      <tr>
           <!-- BEGIN bl2 -->
                <td width="247" height="96" align="left" valign="center">
                <font face="verdana" style="font-size:11px">
                <b>{Name}</b><br>{Address}<br>{City}- {State}<br>
                {ZIP}
                </font>
                </td>
           <!-- END bl2 -->
      </tr>
</table>

These parts are defined where the loop is going to start and end. The quantity of delimiters are defined as the “Columns per page” on the Grid application.

e.g.: If within the Grid application the option “Lines Per Page” is set to 3, you’ll see the following result.

<table border="0" cellspacing="0" cellpadding="0">
      <tr>
                <td width="247" height="96" align="left" valign="center">
                <font face="verdana" style="font-size:11px">
                <b>{Name}</b><br>{Address}<br>{City}- {State}<br>
                {ZIP}
                </font>
                </td>
                <td width="247" height="96" align="left" valign="center">
                <font face="verdana" style="font-size:11px">
                <b>{Name}</b><br>{Address}<br>{City}- {State}<br>
                {ZIP}
                </font>
                </td>
                <td width="247" height="96" align="left" valign="center">
                <font face="verdana" style="font-size:11px">
                <b>{Name}</b><br>{Address}<br>{City}- {State}<br>
                {ZIP}
                </font>
                </td>
      </tr>
</table>

The preview of the code above will be the following:

If you have a HTML File created in the standards above, you can include it in ScriptCase by accessing “Layout > HTML Templates > User HTML > New Template”. On “New Template” you’ll inform the file that you want to import or create a new template by writing the code in the ScriptCase editor.

After having the User Defined HTML, the next step is open the application that supports the Template (Control or Grid) and go to “Position of Fields” and associate the fields with the application fields.