Copyright © Cloud Software Group, Inc. All Rights Reserved

Building Custom Layouts

To Add a Custom Layout

1.	In the project panel, select the Form Resource Store.

2.	Click the Create a New Custom Layout button located in the menu bar.

Figure 19 Create New Custom Layout.

3.	A new resources Custom Layout is created in the directory Form Resource Store/WEB-INF/formrunner/templates/Layout. Rename the folder if needed, such as MyLayouts, and click Apply.

4.	The new custom layout folder has two children objects, Panes and Layout.htm.

Figure 20 Children Objects in the Custom Layout Folder

For more information about these objects refer to Panes, and Layout.htm.

Panes

To build panes, you first need to build a form by adding form elements, such as columns, buttons, and so on.

It is recommended to use the Layout Editor, instead of manually modifying the Panes resource. After you complete editing the panes resource, you need to click on the button Generate Layout Template in order to accept the layout. If you don’t generate the layout template in this way, the layout you designed won’t be available for validation and use.

To Edit the Panes Resource

1.	Select the Panes resource in the project panel.

2.	The default layout is presented in the design panel.

If you want to edit this layout, click Edit.

3.	A dialog box appears that allows you to choose an application for editing the Control.htm file.

Figure 21 Choose an Editor for Contro.htm

If you have previously designated a text editor to work with TIBCO Designer, the file opens in that editor immediately.

4.	Edit the default layout if required, save it and close. You will be prompted to reload the file.

5.	Click on Yes.

The edited file is uploaded into the Configuration tab.

Example for the Panes Resource

<div id="form.designer.layoutviewtemplate">

<table align='center' width='99%' bordercolor='#666666'>

<tr>

<td>

<PANE orientation='vertical' id='column1' height='100' width='100' align="left" valign="top"></PANE>

</td>

<td>

<PANE orientation='vertical' id='column2' height='100' width='100' align="left" valign="top"></PANE>

</td>

<td>

<PANE orientation='vertical' id='column3' height='100' width='100' align="left" valign="top"></PANE>

</td>

</tr>

<tr>

<td colspan='3'>

<PANE orientation='horizontal' id='buttonbar' height='100' width='300' valign="top"></PANE>

</td>

</tr>

</table>

</div>

Pane, Table and Cell Properties

For TIBCO Designer templates, the top-level <table> element is required, but the number of rows and cells can be customized. Use the <pane> element to create one or more panes.

 

Table 6 Properties Fields for Panes, Tables, and Cells

Attribute	Description
Pane Properties
Id	The name of the pane. This name is displayed in the design panel in TIBCO Designer. You also use this value to reference the pane in the runtime template. This attribute is required. There are certain restrictions for the Id attribute: It can contain only alphanumeric characters, such as[1-9] or [a-z] or [A-Z]. The following characters cannot be used:!,@,%,&,*,(,),+,_,`. If any of the listed non-alphanumeric characters is used, an error is generated.
orientation	The orientation of controls in the pane. Possible values are horizontal and vertical. For horizontal, controls are organized in a horizontal row. For vertical, controls are stacked in a column. The default value is vertical.
height	The initial height of the pane, in pixels. Panes dynamically resize when a control is added, to accommodate dimensions of the control. The default value is 100.
width	The initial width of the pane, in pixels. Panes dynamically resize when a control is added, to accommodate dimensions of the control. The default value is 150.
repeats	Whether the pane has repeating elements. Possible values are true and false. If true is specified, the pane can contain multiple instances of each control. The default value is false.
horizontal alignment	The horizontal orientation of pane contents. Possible values are left, right, or center. Corresponds to the ALIGN attribute of a table cell.
vertical alignment	The vertical orientation of pane contents. Possible values are top, middle, bottom, or baseline. Corresponds to the VALIGN attribute of a table cell.
Cell Properties
rowspan	The number of rows spanned by the table cell. Corresponds to the ROWSPAN attribute.
width	The width of the cell, in number of pixels or as a percentage of the available horizontal space, which corresponds to the WIDTH attribute.
colspan	The number of columns spanned by the table cell. Corresponds to the COLSPAN attribute.
Table Properties
border	The width in pixels of the border around table, which corresponds to the BORDER attribute.
width	The width of the table, either in number of pixels or as a percentage of the available horizontal space, which corresponds to the WIDTH attribute.

Layout.htm

To build a form, you need to add form elements such as columns and buttons.

After you complete editing the panes resource, click on the button Generate Layout Template to accept the layout. If you don’t generate the layout template in this way, the layout you designed will not be available for validation and for use.

To Edit the Layout.htm Resource

1.	Click to select the Layout.htm resource in the project panel.

The file Layout.htm (or Layout.html) is an HTML template that you can edit in the Content screen.

Figure 22 Edit Layout.htm

The Name filed on the Configuration tab can contain one of these two names: layout.htm or layout.html. Any other name will generate an error upon validation of the project.

2.	To view and edit the Content field, click on Edit.

A dialog box appears that allows you to choose an application for editing the file.

Figure 23 Choose an Editor for Layout.htm

If you have previously designated a text editor to work with TIBCO Designer, the file opens in that editor immediately.

The file Layout.htm opens in a text editor. To see the example, refer to the section Example for Layout.htm.

Edit the file in your text editor, save it and close. You will be prompted to reload the file.

3.	Type a name for the template in the Name field.

4.	Click on Yes.

The edited file is uploaded into the Configuration tab.

Example for Layout.htm

This is a sample file Layout.htm, with marked sections that may be important for users. The file content should be left as is, except for the additions and changes that are explained in Understanding the Layout.htm Example.

 

<!--StartFormRunnerLayout-->

Start Style block

<style type="text/css" media="all">

@import "%%RenderRequest.Attribute('ContextPath')%%/PortalTemplates/css/formrunner/default/style.css";

@import "%%FRLayout.Map.XMLAttribute('style',,,'PortalTemplates/css/formrunner/default/style.css')%%";

End Style block

    </style>

Start Script block

    <script type="text/javascript">

 

function %%RenderResponse.Namespace('popupCalendar')%%(fieldId,dateFormat)

{

top.newWin = window.open("%%RenderRequest.Attribute('ContextPath')%%" + '/PortalTemplates/bui/pickers/Calendar/calendar.html?dField='+escape(fieldId)+'&dFormat='+escape(dateFormat), 'cal', 'dependent=yes,width=210,height=230,screenX=200, screenY=300,titlebar=yes,status=no');

}

 

function %%RenderResponse.Namespace('submit')%%(action, bwaction, updateworkspace, requiresvalidation, rowIndex) {

<!--BeginIterator_FRLayout.false.PreviewMode-->

document.forms['%%RenderResponse.Namespace()%%'].elements['FRaction'].value = action;

document.forms['%%RenderResponse.Namespace()%%'].elements['FRBWaction'].value = bwaction;

document.forms['%%RenderResponse.Namespace()%%'].elements['FRupdateworkspace'].value = updateworkspace;

document.forms['%%RenderResponse.Namespace()%%'].elements['FRrequiresvalidation'].value = requiresvalidation;

document.forms['%%RenderResponse.Namespace()%%'].elements['FRrowIndex'].value = rowIndex;

document.forms['%%RenderResponse.Namespace()%%'].submit();

<!--EndIterator_FRLayout.false.PreviewMode-->

}

 

function %%RenderResponse.Namespace('reset')%%() {

document.forms['%%RenderResponse.Namespace()%%'].reset();

}

 

function %%RenderResponse.Namespace('checkbox')%%(hiddenVarId) {

var value = document.getElementById(hiddenVarId).value;

if (value.toLowerCase() == "true"){

document.getElementById(hiddenVarId).value = "false";

}

else {

document.getElementById(hiddenVarId).value = "true";

}

}

End Script block

</script>

 

    <title>

</title>

</head>

<body>

Start Form block

<form name="%%RenderResponse.Namespace()%%" (see explanation)

action="%%Action.Url('')%%" method="post"

enctype="%%FRLayout.Map.XMLAttribute('enctype',,,'application/x-www-form-urlencoded')%%">

<input type="Hidden" name="FRid" value="%%FRLayout.Map.FRJobId()%%" />

<input type="hidden" name="FRInput.FormName" value="%%FRLayout.Map.XMLAttribute('FormPath')%%">

<input type="hidden" name="FRaction">

<input type="hidden" name="FRBWaction">

<input type="hidden" name="FRupdateworkspace">

<input type="hidden" name="FRrequiresvalidation">

<input type="hidden" name="FRrowIndex">

Start Error block

    <!--BeginIterator_FRLayout.true.TemplateMode('error')-->

%%FRLayout.Attribute('Errors')%%

End Error block

    <!--EndIterator_FRLayout.true.TemplateMode('error')-->

 

Start Form Layout block

<table width="100%" border="1" bordercolor="#666666"

bgcolor="#ffffff" cellspacing="0" cellpadding="0">

<tr>

<td class="regular" valign="%%FRLayout.Map.PaneValign('column1')%%" width="33%">

%%FRLayout.Map.Pane('column1')%%

</td>

<td class="regular" valign="%%FRLayout.Map.PaneValign('column2')%%" width="33%">

%%FRLayout.Map.Pane('column2')%% (see explanation)

</td>

<td class="regular" valign="%%FRLayout.Map.PaneValign('column3')%%">

%%FRLayout.Map.Pane('column3')%%

</td>

</tr>

<tr>

<td colspan="3" class="regular" width="100%" valign="%%FRLayout.Map.PaneValign('buttonbar')%%">

%%FRLayout.Map.Pane('buttonbar')%%

</td>

</tr>

End Form Layout block

</table>

End Form block

</form>

<!--EndFormRunnerLayout-->

Understanding the Layout.htm Example

•	Style Block    This section is used to import the style sheet for the form and is used as is.

•	Script Block   This section contains JavaScript functions used by the formflow. This code is used as is. If you need a JavaScript, you need to add this code in the Form Resource Store.

•	%%RenderResponse.Namespace()%%   This variable is used to generate a unique, random name for a form each time when the form is rendered. To access the form from JavaScript, use this variable.

•	Error Block   This section gets substituted for error messages when the form is rendered in error mode.

•	Form Layout Block   This section corresponds to what you have designed in the Layout editor.

•	%%FRLayout.Map.Pane('column2')%%   This section gets substituted for the content of the pane when the form is rendered.

Runtime Template Example

The following example shows only the portion of a runtime layout template that should be modified. This sample code describes how a three-column layout scheme displays at runtime.

<table width="100%" border="1" bordercolor="#666666"

  bgcolor="#ffffff" cellspacing="0">

  <tr>

    <td class="col1"     valign="%%FRLayout.Map.PaneValign('column1')%%" width="33%">

    %%FRLayout.Map.Pane('column1')%%

    </td>

    <td class="col1"     valign="%%FRLayout.Map.PaneValign('column2')%%" width="33%">

    %%FRLayout.Map.Pane('column2')%%

    </td>

    <td class="col1"     valign="%%FRLayout.Map.PaneValign('column3')%%">

    %%FRLayout.Map.Pane('column3')%%

    </td>

  </tr>

  <tr>

    td colspan="3" class="buttonbar" width="100%"     valign="%%FRLayout.Map.PaneValign('buttonbar')%%">

    %%FRLayout.Map.Pane('buttonbar')%%

    </td>

  </tr>

</table>

In this example, the layout is an HTML table with each layout element in a table row. The text in italic typeface (such as column1, column2) should be replaced with the Id attribute for each custom pane defined in the TIBCO Designer template.

Referenced classes are from the default stylesheet, but you can add a custom stylesheet to a Form Resource Store and then reference classes from the stylesheet in your custom layout.

Copyright © Cloud Software Group, Inc. All Rights Reserved