Imprimir

HTML Templates

In the Templates, we can edit and create models for the Headers, Footers or the User HTML (Grid and Control). These models define the interface structure of the applications. It’s possible to create a HTML file and define where the entry data will be, by use curly brackets {} to specify a variable. The user 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 possible to place the fields anywhere on the page.

HTML Templates

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.

HTML Templates Header

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 visualized 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”, select the model for the Header and Footer that you’ll use in “Layout > Header & Footer” you’ll associate the create fields in the template with the desired information available by ScriptCase.

User HTML

HTML Templates User Defined

In the User Defined HTML we can specify where the fields of the applications will be presented 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 delimitator 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 delimitators are defined as the “Columns per page” on the Grid application.

e.g.: If the Grid application the option “Lines Per Page” is 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:

{Name} {Name} {Name}
{Address} {Address} {Address}
{City}-{State} {City}-{State} {City}-{State}
{ZIP} {ZIP} {ZIP}

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 HTML, the next step is open the application that supports the Template (Control or Grid) and “Position the Fields” and associate the fields with the application fields.