Developing HTML Pages
You can create custom .html pages to control the look and feel of your Longview App, to display information, and to gather information for setting up variables. You can call these .html pages from your main procedure using the Show HTML function.
For more information on this function, see Show HTML.
Displaying the Symbol Selector within HTML pages
You can add JavaScript code to an .html page to display a Symbol Selector in any Longview Apps that you create. You can optionally include up to two attribute filters so that users are presented with a filtered list of symbols for selection.
You can use the following JavaScript code to add the Symbol Selector to a page:
function showSymbolSelector(dimension, spec, initial, allowLeaf, allowParent, allowReadOnly, allowMultiple, attributefilters)
{
return window.external.ShowSymbolSelectorAdvancedView(dimension, spec, initial, allowLeaf, allowParent, allowReadOnly, allowMultiple, attributefilters); }
where:
- dimension is the dimension that should appear in the Symbol Selector.
- spec is the level of symbols to display in the Symbol Selector hierarchy, in relation to a specified symbol name, for example SymbolName### or SymbolName#99.
For more information on symbol hierarchy specifications, see Symbol hierarchies. - initial is the initial symbol selected in the Symbol Selector.
- allowLeaf specifies whether users can or cannot select leaf symbols and can have a value of true or false.
- allowParent specifies the type of parent symbols that users can select and can have one of the following values:
Value Description all
Users can select all parent symbols in the Symbol Selector dialog.
none
Users cannot select any parent symbols in the Symbol Selector dialog.
Static
Users can select static parent symbols only in the Symbol Selector dialog.
- allowReadOnly specifies whether users can select read-only symbols and can have a value of true or false.
- allowMultiple specifies whether users can select multiple symbols and can have a value of true or false.
- attributefilters can be up to two attribute filters linked by AND or OR, enclosed in double quotations marks, using the syntax
FilterType{AttrName{Operation{Expressionwhere:
Field Description FilterType
specifies the method to use to search the hierarchy for symbols matching the filter criteria and can be one of ALL, PARENT, LEAF, or ROOT. If you specify two attribute filters, FilterType must be the same for both filters.
AttrName
is the name of an attribute.
Operation
can be EQ for exactly equal to or NE for not equal to.
Expression
is a character string. If the expression contains spaces, enclose the expression in double quotation marks preceded by a backslash (\"expression with spaces\"). If the expression is a list, separate multiple items with a pipe ( | ).
For Non-List Attributes, the filter behaves as follows:
- Attribute EQ Expression — Matches only if the attribute is an exact match of the expression.
- Attribute NE Expression — Matches if the attribute is not an exact match of the expression.
For List Attributes, the filter behaves as follows:
- Attribute EQ Expression — Matches if the attribute is an exact match of the expression, or is a list of values, any one of which exactly matches the expression.
- Attribute NE Expression — Matches if the attribute is empty or a list of values, none of which exactly matches the expression.
If you specify two attribute filters, enclose each filter in parentheses, for example "(attributefilter1) AND (attributefilter2)".
If you don’t include an attribute filter, use two double quotation marks ( "" ).
The JavaScript below shows a sample script that calls the showSymbolSelector Java Script function and updates a text field. To access the selected symbols from a Symbol Selector, use the SelectedSymbols property.
function invokeSymbolSelector(dimension, tag)
{
var symbolSelector = showSymbolSelector(dimension, "", document.getElementById(tag).value, true, all, false, true, "LEAF{ZGPNativeCurrency{EQ{CAD");
if (symbolSelector.DialogResult == true)
{
document.getElementById(tag).value = symbolSelector.SelectedSymbols;
}
}
The following code is an example of an entire .html page that includes a Symbol Selector:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/
DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Symbol Selection</title>
<script language="javascript" >
function showSymbolSelector(dimension, spec, initial, allowLeaf, allowParent, allowReadOnly, allowMultiple, attributefilter)
{
return window.external.ShowSymbolSelectorAdvancedView(dimension, spec, initial, allowLeaf, allowParent, allowReadOnly, allowMultiple, attributefilters);
}
function invokeSymbolSelector(dimension, tag)
{
var symbolSelector = showSymbolSelector(dimension, "", document.getElementById(tag).value, true, all, false, true, "LEAF{ZGPNativeCurrency{EQ{CAD");
if (symbolSelector.DialogResult == true)
{
document.getElementById(tag).value = symbolSelector.SelectedSymbols;
}
}
</script>
</head>
<body>
<h3>Select Some Symbols!</h3> <form name="TestForm">
<div class="form-content">
<table>
<tr>
<td>Accounts:</td>
<td><input type="text" name="accountsTextBox" value="" id="LV_Accounts" /><Button onclick="javascript:invokeSymbolSelector('Accounts', 'LV_Accounts');">...</Button></td>
</tr>
<tr>
<td>Time Periods</td>
<td><input type="text" name="timePeriodsTextBox" value="" id="LV_TIMEPER" /><Button onclick="javascript:invokeSymbolSelector('TIMEPER', 'LV_TIMEPER');">...</Button>
</td>
</tr>
<tr>
<td>Entities</td>
<td><input type="text" name="entitiesTextBox" value="" id="LV_Entities" /><Button onclick="javascript:invokeSymbolSelector('Entities', 'LV_Entities');">...</Button>
</td>
</tr>
<tr>
<td>Currency</td>
<td><input type="text" name="currenciesTextBox" value="" id="LV_Currency" /><Button onclick="javascript:invokeSymbolSelector('Currency', 'LV_Currency');">...</Button></td>
</tr>
</table>
</div>
</form>
</body>
</html>
Displaying the file browser within HTML pages
You can add JavaScript code to an .html page to display a file browser in any Longview Apps that you create.
Use the following JavaScript function to add the file browser to a page:
function ShowFileDialog()
{
return window.external.ShowFileChooser();
}
You can add other parameters that allow you to customize your file browser. For example:
| To… | Syntax |
|---|---|
Restrict the file types available in the dropdown list |
ShowFileChooser("Description|*.Type| Description2|*.Type2...") where:
Separate multiple entries with a pipe ( | ). If you want to specify subsequent parameters, and you want to leave this parameter blank, you must use two double quotation marks ( "" ). |
Create the file browser as an Open or a Save dialog |
ShowFileChooser("", "Open|Save") If you specify Open, Open appears on the window title and the button. If you specify Save, Save As appears on the window title and Save appears on the button. If you do not specify this parameter, the file browser is created as an Open dialog. If you want to specify subsequent parameters, and you want to leave this parameter blank, you must use two double quotation marks ( "" ). |
Specify the default path for the file browser |
ShowFileChooser("", "", "C:\\temp\\filePath"); You must escape any file separators with a backslash ( \ ). If you do not specify this parameter, the file browser opens at the current directory for Longview Apps (typically MyDocuments\Longview). |
The JavaScript below shows a sample script that calls the file browser Java Script and updates a text field. To access the return value of the file browsers, use the .FullPath property.
function ShowFileDialog()
{
return window.external.ShowFileChooser("csv file|*.csv | text file (*.txt) | *.txt", "Open", "C:\\temp\\filePath");
}
function InvokeFileDialog(tag)
{
var selected = ShowFileDialog();
if (selected.DialogResult == true)
{
document.getElementById(tag).value = selected.FullPath;
}
}
Displaying the Print dialog within HTML pages
You can add JavaScript code to an .html page and hook it to a link, button, or other interface element to display the standard Internet Explorer Print dialog in any Longview Apps that you create.
Use the following JavaScript function to invoke the Print dialog:
function showPrintDialog()
{
window.external.ShowPrintDialog();
}
The following code shows an example of a Print dialog that is invoked when a user clicks a button in an .html form.
<input type="submit" id="Print" value="PRINT" onclick="javascript:showPrintDialog()"/>
Passing variables between Longview Apps and Longview Application Framework
You can pass variable values between the .html pages of your Longview App and the underlying Application Framework code to create reusable Longview Apps. Use the variables that you create in Application
Framework along with the id attribute to pass variable values between Longview Application Framework and .html forms for the following elements in your .html pages:
- input
- select
- textarea
Note: For all other .html elements, you must use JavaScript to get and set the variable values correctly.
The element id that you use should be the corresponding Application Framework variable name, prefixed with LV_.
For example, if you have a variable called Location, the element id should be LV_Location.
The following Application Framework code snippet shows an example of how to create a variable to use within a page called Sample.html and how the variable value can be used after the user makes a selection on the .html page.
// Initialize
Create Variable Location AS STRING
SET VARIABLE Location = "E11111"
Create Variable Msg AS STRING
// Prompt user for input
Show HTML "Sample.html" 600 200
// echo user's selection
Set Variable Msg = "You selected " + $Location$
SHOW MESSAGE $Msg$
The following code is an example of an .html form that includes an Application Framework variable that will be resolved when the .html page is rendered and then passed back to Application Framework once the user clicks on a button on the .html page.
<form name="TestForm">
<div class="form-content">
<fieldset>
<legend>Select a Location</legend>
<label for="LV_Location">Location</label>
<select id="LV_Location" name="LV_Location">
<option value="E11111">E11111 - Toronto Manufacturing</option>
<option value="E11112">E11112 - Toronto Finance</option>
<option value="E11113">E11113 - Toronto Marketing</option>
<option value="E11114">E11114 - Toronto Admin</option>
</select>
</fieldset>
<button type="submit" value="Submit">Submit</button>
</div>
</form>
Using the LV_onclose() JavaScript function
You can use the LV_onclose() JavaScript function if you need to manipulate and/or send values back to Application Framework when a user exits an .html form by clicking the browser window close button (the x in the top right of the window).
LV_onclose() is an optional function that you can use when the OnClose command is used in the procedure that issues the ShowHTML command. The close button is enabled on the browser window displaying the .html file when the OnClose command is used. This gives the user an alternate way to exit the .html and, if the user exits the .html by clicking the close button, you can use the LV_onclose() function to help manipulate and/or submit values to Application Framework.
When a user clicks the browser window close button, Longview Smart Client:
- executes the LV_onclose() function, if it exists
- transfers the values set for the variables in the .html form back to Application Framework
- runs the specified OnClose procedure and terminates the application
Example
The following code is an example of how to use the LV_onclose() function in an external JavaScript file.
function LV_onclose() {
document.getElementById("LVS_buttonClicked").value = "CLOSE"; }
Using the LV_onload() JavaScript function
You can use the LV_onload() JavaScript function if you need Application Framework variable values for items other than input, select, and textarea elements within your .html page. You can write some JavaScript to help retrieve and set those values.
LV_onload() is an optional function that you can use to help retrieve and set values whenever you need to reference any Application Framework variables in your .html in areas other than input, select, and textarea elements. When the Show HTML command is called from Longview Application Framework, Longview Smart Client:
- gets the related .html
- populates the value attribute for any input, select, and textarea elements where the id is LV_variable and variable is the corresponding Application Framework variable's value
- executes the LV_onload() function, if it exists, before showing the .html
- populates the value attribute for any input, select, and textarea elements where the id is LV_variable and variable is the corresponding Application Framework variable's value that were created during the LV_onload()
The regular onload() JavaScript function runs before the Application Framework variables populate the input controls on the form, so if you need to use the values of Application Framework variables in your onload logic, you must use LV_onload() instead.
Example
The following code is an example of how to use the LV_onload() function in an external JavaScript file.
function LV_onload() {
var location = document.getElementById('LV_Location').value;
if (location == 'E11111') {
document.getElementById('Regular_Div').style.cssText = "display: none;";
document.getElementById('Special_Div').style.cssText = "display: block;";
document.getElementById('SpecialInstructions').innerHTML = 'Special instructions only shown for E11111';
} else {
document.getElementById('Regular_Div').style.cssText = "display: block;";
document.getElementById('Special_Div').style.cssText = "display: none;";
document.getElementById('SpecialInstructions').innerHTML = 'Standard instructions for all other entities';
}
}
The following code is an example of how to change the way the .html page is rendered using the Application Framework variable Location and calling the JavaScript above.
<html>
<head>
<script type="text/javascript" src="http://<%[[WEBSERVER]]%><%[[WEBBRIDGE]]%>?LongviewIdentifier=<%[[WEBVARIABLE, LongviewIdentifier]]%>&LongviewAction=GetAppFile&LongviewContentType='application/x- javascript'&LongviewFileName='Sample1/js/ShowInstructions.js'"></script>
</head>
<body>
<h2 id="SpecialInstructions"></h2>
<form name="SampleForm" action="">
<div id="content">
<!-- Hidden field to get the location value -->
<textarea style="display: none;" name="LV_Location" id="LV_Location" /></textarea>
</div>
<div id="Special_Div">
<!-- some special HTML to show only for E11111 -->
</div>
<div id="Regular_Div"> <!-- some regular HTML to show for all other entities -->
</div>
<input type="submit" value="Submit" />
</form>
</body>
</html>