Using JavaScript Code With HTML Composer Pages

In this section:

 

Although HTML Composer is fully integrated with JavaScript, it is suggested that you do not create custom JavaScript that manipulates HTML Composer generated controls, as WebFOCUS cannot support such custom JavaScript code. Additionally, there is no guarantee that the JavaScript code will work correctly in future releases.

Note:


Top of page

x
Function: IbComposer_populateDynamicCtrl

How to:

IbComposer_populateDynamicCtrl allows you to determine from which control data is drawn from to populate a destination control.



x
Syntax: How to Populate a Control Dynamically
IbComposer_populateDynamicCtrl('controlID', 'fromControlId');

where:

controlID

Alphanumeric

Is the unique identifier of the control from which values are obtained. For example, listbox1.

fromControlId

Alphanumeric

Is the unique identifier of the control from which values are obtained, when two or more controls are chained to a destination control. For example, if listbox1 and listbox2 are both chained to listbox3, by default, the values of listbox3 will be determined by listbox1. You can use IbComposer_populateDynamicCtrl('listbox3','listbox2') to make listbox2 determine the values of listbox3. This identifier is optional.



Example: Populating a Control Dynamically
function button3_onclick(ctrl) {
var acc = IbComposer_populateDynamicCtrl('listbox3', 'listbox2');
acc.selectNextPage();
}

Top of page

x
Function: IbComposer_getComponentById

How to:

The IbComposer_getComponentById function obtains a component by using its ID.



x
Syntax: How to Obtain a Component by Using Its ID
IbComposer_getComponentById('controlID');

where:

controlID

Alphanumeric

Is the unique identifier of the control from which values are obtained. For example, listbox1.



Example: Getting the Accordion Report By Using Its ID
function button3_onclick(ctrl) {
var acc = IbComposer_getComponentById('accordion1');
acc.selectNextPage();
}

Top of page

x
Function: IbComposer_getCurrentSelection

How to:

The IbComposer_getCurrentSelection function gets the current selected values from a control.



x
Syntax: How to Get the Current Selected Value From a Control
IbComposer_getCurrentSelection('controlID', [layer]);

where:

controlID

Alphanumeric

Is the unique identifier of the control from which values are obtained.

layer

Integer

Is an optional parameter used to specify the layer number in a multi source Tree control if a Multi source Tree control is being used. The layer number starts with 1 for the first layer.



Example: Getting the Current Selected Value for a Drop Down List
function button1_onclick(ctrl) {
   var values = IbComposer_getCurrentSelection('combobox1');
   for(var I = 0; i < values.length; i++)		
      alert(values[i]);
}

Top of page

x
Function: IbComposer_getCurrentSelectionEx

How to:

The IbComposer_getCurrentSelectionEx function gets the current selected actual or display values from a control. The function can also be used to get the index values for List Boxes, Drop Down Lists, and Double Lists.



x
Syntax: How to Get the Current Selected Value, Actual Value, or Display Value From a Control
IbComposer_getCurrentSelectionEx('controlID', [layer]);

where:

controlID

Alphanumeric

Is the unique identifier of the control from which values are obtained.

layer

Integer

Is an optional parameter used to specify the layer number in a multi source Tree control if a Multi source Tree control is being used. The layer number starts with 0 for the first layer.



Example: Getting the Current Selected Index Value, Actual Value, and Display Value for a Multi-Select List
function button1_onclick(ctrl) {
var values = IbComposer_getCurrentSelectionEx('combobox1');
for(var i = 0; i < values.length; i++)
{
alert("Index Value: " + values[i].getIndex() + "\n" +
"Actual Value: " + values[i].getValue() + "\n" +
"Display Value: " + values[i].getDisplayValue());
}

Top of page

x
Function: IbComposer_setCurrentSelection

How to:

The IbComposer_setCurrentSelection function sets the current selected values for control parameters.



x
Syntax: How to Set the Current Selected Value for a Control
IbComposer_setCurrentSelection('controlID', arrValues, bUpdateDependencies);

where:

controlID

Alphanumeric

Is the unique identifier of the control for which to set the values.

arrValues

Array

Is the array of values to be set.

bUpdateDependencies

Boolean

Is an operator that can be set to true to update chained controls and triggered events. The default is false.



Example: Setting the Current Selected Value for a List Box
function button2_onclick(ctrl) {
   var arr = [];
   arr.push('ITALY');
   arr.push('JAPAN');
   IbComposer_setCurrentSelection('listbox1', arr, false);
}

Top of page

x
Function: IbComposer_execute

How to:

The IbComposer_execute function executes a report or chart.



x
Syntax: How to Execute a Report or Chart
IbComposer_execute('reportID', ['outputTarget']);

where:

reportID

Alphanumeric

Is the unique identifier of the report or chart to execute.

outputTarget

Alphanumeric

Is the optional parameter to set the target of the output. Is one of the following:

  • The name of a frame.
  • '_blank'.
  • '_target'.
  • The name of a new window.


Example: Executing a Report in a New Window
function button3_onclick(ctrl) {
   IbComposer_execute('report1', 'newwin');
}

Top of page

x
Function: IbComposer_isSelected

How to:

The IbComposer_isSelected function determines if a control or value is selected.



x
Syntax: How to Determine If a Control or Value Is Selected
IbComposer_isSelected('controlID', 'testValue');

where:

controlID

Alphanumeric

Is the unique identifier of the control being tested.

testValue

Alphanumeric

Is the value the control is being checked against.



Example: Determining If a Check Box Is Selected
function checkbox1_onclick(ctrl){
   var curValue = IbComposer_isSelected('checkbox1');	
   IbComposer_showHtmlElement('form1', curValue);
}

Top of page

x
Function: IbComposer_showHtmlElement

How to:

The IbComposer_showHtmlElement function shows or hides an HTML element.



x
Syntax: How to Show or Hide an HTML Element
IbComposer_showHtmlElement('elementID', bShow);

where:

elementID

Alphanumeric

Is the unique identifier of the element which is shown or hidden.

bShow

Boolean

Is an operator that can be set to true to show the element and false to hide it.



Example: Hiding or Showing a Check Box
function checkbox1_onclick(ctrl){
   var curValue = IbComposer_isSelected('checkbox1');
   IbComposer_showHtmlElement('form1', curValue);
}

Top of page

x
Function: IbComposer_enableHtmlElement

How to:

The IbComposer_enableHtmlElement function enables or disables an HTML element.



x
Syntax: How to Enable or Disable an HTML Element
IbComposer_enableHtmlElement('elementID', bEnable);

where:

elementID

Alphanumeric

Is the unique identifier of the element which is enabled or disabled.

bEnable

Boolean

Is an operator that can be set to true to enable the element and false to disable it.



Example: Enabling or Disabling Elements
function checkbox2_onclick(ctrl){
   IbComposer_enableHtmlElement('listbox1', IbComposer_isSelected('checkbox2', 'country'));
   IbComposer_enableHtmlElement('combobox1', IbComposer_isSelected('checkbox2', 'car'));
   IbComposer_enableHtmlElement('listbox2', IbComposer_isSelected('checkbox2', 'model'));
   IbComposer_enableHtmlElement('combobox2', IbComposer_isSelected('checkbox2', 'dcost'));
}

Top of page

x
Function: IbComposer_ResetDownChainControls

How to:

The IbComposer_ResetDownChainControls function resets the controls down the chain from the current control to have correct corresponding values.



x
Syntax: How to Reset Chain Controls
IbComposer_ResetDownChainControls('ctrl');

where:

ctrl

Alphanumeric

Is the unique identifier of the first control.



Example: Resetting the Chain Started by a List Box
function button4_onclick(ctrl) {
   var arr = [];arr.push('ENGLAND');
   IbComposer_setCurrentSelection('listbox1', arr, false);
   IbComposer_ResetDownChainControls('listbox1');
}

Top of page

x
Function: IbComposer_selectTab

How to:

The IbComposer_selectTab function selects the tab specified by the tabNumberToSelect and makes it the active tab.



x
Syntax: How to Select a Tab and Make It Active
IbComposer_selectTab('tabControlID', tabNumberToSelect);

where:

tabControlID

Alphanumeric

Is the unique identifier of the tab control being made active.

tabNumberToSelect

Integer

Is the number of the tab to make active.



Example: Making a Tab Active
<FORM id=form1 onsubmit="OnExecute(this);
IbComposer_selectTab('tab1', 1) name="form1">

Top of page

x
Function: IbComposer_selectTemplateTab

How to:

The IbComposer_selectTemplateTab function selects a tab on a template page and makes it the active tab.



x
Syntax: How to Select a Template Tab and Make It Active
IbComposer_selectTemplateTab('tabId');

where:

tabId

Alphanumeric

Is the unique identifier of the tab control being made active.



Example: Making a Template Tab Active
function submit1_onclick(ctrl) {
IbComposer_selectTemplateTab('tab5');
}

Top of page

x
Function: IbComposer_getAllAmpersValues

How to:

The IbComposer_getAllAmpersValues is used to get the current selected values from all the controls on your page layout. It then takes those values and assembles them as a string that can be added to the end of a URL call. An example of this would be having a REGION control and multiselecting MidEast, NorthEast, and NorthWest. It will assemble these selections as shown below:

&REGION=%27MidEast%27%20OR%20%27NorthEast%27%20OR%20%27NorthWest%27

This function can be used in conjunction with the Business Intelligence Portal, where the generated string is appended to all Business Intelligence Portal calls that run reports or charts. This allows the parameter values to affect all portal components, even if new ones are added or existing ones are removed at runtime.



x
Syntax: How to Get All Parameter Values
IbComposer_getAllAmpersValues([verifySelection]);

where:

verifySelection

Boolean

Is an optional parameter. When true and when the Selection required property for the control is set to Yes, this returns an empty string for the parameter controls that do not have a selection made.

Note: All controls have the Selection required property. This property is set to Yes by default. If a control has no valid selection made at runtime, a red box appears around it and the following status bar message displays:

Please make required selections


Example: Retrieving a List of All Parameters Selected in a Report.
function button1_onclick(ctrl)
{
var val = IbComposer_getAllAmpersValues();
alert(val);
OnExecute(ctrl);
}

Top of page

x
Event: onbeforeload

How to:

The onbeforeload event is an event handler that is used before a control is populated with values.



x
Syntax: How to Use the onbeforeload Event
onbeforeload('ctrl', 'arrValuesToLoad');

where:

ctrl

Is a static term and should not be changed.

arrValuesToLoad

Alphanumeric

Is the array of values that will be loaded into the control.



Example: Populating a List Box With the onbeforeload Event
function listbox1_onbeforeload(ctrl,arrValuesToLoad) {
   for(var i = 0; i < arrValuesToLoad.length; i++) {
   alert(arrValuesToLoad[i].dispValue + "  " + arrValuesToLoad[i].value + "  " + arrValuesToLoad[i].selected); 
   }
}

Top of page

x
Event: onafterload

How to:

The onafterload event is an event handler used after a control is populated with values.



x
Syntax: How to Use the onafterload Event
onafterload('ctrl');

where:

ctrl

Is a static term and should not be changed.



Example: Selecting the ALL Value in a List Box With the onafterload Event
function listbox1_onafterload(ctrl){
   alert(IbComposer_isSelected(ctrl.id, 'ALL'));
}

WebFOCUS