Using JavaScript Code with HTML Canvas Pages

In this section:

Although the HTML canvas is fully integrated with JavaScript, it is suggested that you do not create custom JavaScript that manipulates the HTML canvas 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:

Function: IbComposer_removeSelectOption

How to:

IbComposer_removeSelectOption removes values from a list box, drop down, or the 'from' list box of a double list control.

Syntax: How to Remove List Box or Drop Down Values 

IbComposer_removeSelectOption(controlID,arr[]);
controlID

Alphanumeric

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

arr[]

Alphanumeric Array

Is the array that contains single or multiple values.

Note: When the IbComposer_removeSelectOption method is called, the values specified by the second parameter (arr[]) will be removed.

Example: Removing Values From a List Box 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   var readVals = [];
   readVals = IbComposer_getCurrentSelection('listbox1');
   IbComposer_removeSelectOption('combobox1',readVals);
}

Function: IbComposer_runAnimation

How to:

IbComposer_runAnimation runs the animation defined by the user in the Tasks and Animations panel.

Syntax: How to Run an Animation 

IbComposer_runAnimation(name);
name

Alphanumeric

Is the name of the animation specified by the user in the Tasks and Animations panel.

Example: Running an Animation 

function submit1_onclick(event) {
   IbComposer_runAnimation('animation1');
}

Function: IbComposer_triggerExecution

How to:

IbComposer_triggerExecution allows the user to execute a specific task defined in the Tasks section of the Tasks and Animations panel.

Syntax: How to Execute a Specific Task 

IbComposer_triggerExecution(taskName,index [, paramName, paramValue]);

where:

taskName

Alphanumeric

Is the name of the task specified by the user in the Tasks section of the Tasks and Animations panel in the HTML canvas.

index

Numeric

Is the index value of the action assigned to the task that you want to execute. The first action has an index value of 1, the second an index value of 2, and so on.

paramName, paramValue

Alphanumeric

Optionally, are the name and value of a parameter to be applied when the task is executed. You can specify multiple parameters by using multiple name-value pairs.

Example: Executing a Task

The following example executes the first task, called task1, when a button called submit1 is clicked.

function submit1_onclick(event) {
	IbComposer_triggerExecution('task1',1);
}

Example: Executing a Task From a Procedure

The following syntax appears in the StyleSheet section of a report procedure. It creates a JavaScript drilldown, launched from a menu item labeled Drill to InfoWindow, that uses the IbComposer_triggerExecution function to execute a task called task2, which has an index value of 1. It sets the value of the parameter &BUSINESS_SUB_REGION to the value selected from the first column in the report (N1). The report is loaded in a frame on the page, as identified by ib_frameName, that has the unique identifier report1. 

TYPE=DATA,
     COLUMN=N1,
     DRILLMENUITEM='Drill to InfoWindow',
          JAVASCRIPT=parent.IbComposer_triggerExecution( \
     'task2' \
     '1' \
     'BUSINESS_SUB_REGION' \
     N1 \
     'ib_frameName' \
     'report1' \
     ),
          TARGET='_parent',
$

The report can then be added to an HTML page in a report component called report1. You can then create a task called task2, which is the first task after the load task, in the Tasks & Animations panel. Use a Trigger Type of TBD to set the task to execute when a drill-down link in the report is clicked. You can then specify a request in the Requests/Actions section to be executed using the selected parameter value when a drill-down link is clicked.

Function: IbComposer_getRequestRefProcedure

How to:

IbComposer_getRequestRefProcedure returns the name of the procedure, given the unique identifier of the request referencing the procedure. This was formerly available in the myXmlRoot document.

Syntax: How to Return the Procedure Name 

IbComposer_getRequestRefProcedure(Drilldown);

where:

Drilldown

Alphanumeric

Is the name of the request provided.

Example: Returning a Procedure Name 

function button1_onclick(event) {
   IbComposer_getRequestRefProcedure('Drilldown');
}

Function: IbComposer_getRequestTarget

How to:

IbComposer_getRequestTarget returns the name of all the target frames used by the request. This was formerly available in the myXmlRoot document.

Syntax: How to Return the Target Frame Names 

IbComposer_getRequestTarget(Drilldown,bShow);

where:

Drilldown

Alphanumeric

Is the name of the request provided.

bShow

Boolean

Is an operator that can be set to true to show the names, or set to false to hide them.

Example: Returning Target Frame Names 

function button1_onclick(event) {
   IbComposer_getRequestTarget('Drilldown','true');
}

Function: IbComposer_getMapObject

How to:

IbComposer_getMapObject returns the map object for the map container that is passed as the parameter. This object can then be used as a parameter in other API functions.

Syntax: How to Return a Map Object 

IbComposer_getMapObject(mapId);

where:

mapId

Alphanumeric

Is the unique identifier of the map container.

Example: Returning the Map Object for a Map 

function onInitialUpdate() {
   var map = IbComposer_getMapObject('mapcontrol1');
}

Function: IbComposer_getMarkers

How to:

IbComposer_getMarkers returns an array of markers for a specific layer of a map.

Syntax: How to Return an Array of Markers for a Map 

IbComposer_getMarkers(mapId,layerName);

where:

mapId

Alphanumeric

Is the unique identifier of the map container.

layerName

Alphanumeric

Is the name of the layer for which the markers are returned.

Example: Returning an Array of Markers for a Map 

function  onInitialUpdate() {
   var map = IbComposer_getMapObject('mapcontrol1');
   var markers = IbComposer_getMarkers('mapcontrol1','Customers');
}

Function: IbComposer_populateDynamicCtrl

How to:

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

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.

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(event) {
   var acc = IbComposer_populateDynamicCtrl('listbox3','listbox2');
   acc.selectNextPage();
}

Function: IbComposer_getComponentById

How to:

IbComposer_getComponentById obtains a component by using its ID.

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.

Example: Obtaining the Accordion Report By Using Its ID 

function button3_onclick(event) {
   var acc = IbComposer_getComponentById('accordion1');
   acc.selectNextPage();
}

Function: IbComposer_getCurrentSelection

How to:

IbComposer_getCurrentSelection retrieves the current selected values from a control.

Syntax: How to Retrieve the Current Selected Value From a Control 

IbComposer_getCurrentSelection(controlID,[layer],[bDateObj]);

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.

bDateObj

Boolean

Is an optional operator that can be set to true to return a date object or to false to return a string. If you do not specify a value for this operator, it returns a string.

Example: Retrieving the Current Selected Value for a Drop Down List 

function button1_onclick(event) {
   var values = IbComposer_getCurrentSelection('combobox1');
   for(var i = 0; i < values.length; i++)
   alert(values[i]);
}

Function: IbComposer_getCurrentSelectionEx

How to:

IbComposer_getCurrentSelectionEx retrieves 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.

Syntax: How to Retrieve 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: Retrieving the Current Selected Index Value, Actual Value, and Display Value for a Multi-Select List 

function button1_onclick(event) {
   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());
}

Function: IbComposer_getClickedRow

How to:

IbComposer_getClickedRow retrieves the current clicked row of an HTML table.

Syntax: How to Retrieve the Current Clicked Row of an HTML Table 

IbComposer_getClickedRow(clickEventTarget);

where:

clickEventTarget

Alphanumeric

Is the name of the event for the clicked row.

Example: Retrieving the Current Clicked Row of an HTML Table 

function IbComposer_getClickedRow(clickEventTarget) {
    return getCurrentClickedRow(clickEventTarget);
}

Function: IbComposer_getClickedColumn

How to:

IbComposer_getClickedColumn retrieves the current clicked column of an HTML table.

Syntax: How to Retrieve the Current Clicked Column of an HTML Table 

IbComposer_getClickedColumn(clickEventTarget);

where:

clickEventTarget

Alphanumeric

Is the name of the event for the clicked column.

Example: Retrieving the Current Clicked Column of an HTML Table 

function IbComposer_getClickedColumn(clickEventTarget) {
    return getCurrentClickedColumn(clickEventTarget);
}

Function: IbComposer_getClickedCellValue

How to:

IbComposer_getClickedCellValue retrieves the current clicked cell value of an HTML table.

Syntax: How to Retrieve the Current Clicked Cell Value of an HTML Table 

IbComposer_getClickedCellValue(clickEventTarget);

where:

clickEventTarget

Alphanumeric

Is the name of the event for the clicked cell.

Example: Retrieving the Current Clicked Cell Value of an HTML Table 

function IbComposer_getClickedCellValue(clickEventTarget) {
    return getClickedCellValue(clickEventTarget);
}

Function: IbComposer_setCurrentSelection

How to:

IbComposer_setCurrentSelection sets the current selected values for control parameters.

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

The following example selects the values ITALY and JAPAN from a multiselect list box called listbox1.

function button1_onclick(event) {
   var arr = [];
   arr.push('ITALY');
   arr.push('JAPAN');
   IbComposer_setCurrentSelection('listbox1',arr,'false');
}

Function: IbComposer_execute

How to:

IbComposer_execute executes a report or chart.

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(event) {
   IbComposer_execute('report1','newwin');
}

Function: IbComposer_isSelected

How to:

IbComposer_isSelected determines if a control or value is selected.

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 optional parameter the control is being checked against.

Example: Determining If a Check Box Is Selected 

function checkbox1_onclick(event) {
   var curValue = IbComposer_isSelected('checkbox1');	
   IbComposer_showHtmlElement('form1',curValue);
}

Function: IbComposer_showHtmlElement

How to:

IbComposer_showHtmlElement shows or hides an HTML element.

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: Showing or Hiding a Check Box 

function checkbox1_onclick(event) {
   var curValue = IbComposer_isSelected('checkbox1');
   IbComposer_showHtmlElement('form1',curValue);
}

Function: IbComposer_enableHtmlElement

How to:

IbComposer_enableHtmlElement enables or disables an HTML element.

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(event) {
   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'));
}

Function: IbComposer_ResetDownChainControls

How to:

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

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(event) {
   var arr = [];arr.push('ENGLAND');
   IbComposer_setCurrentSelection('listbox1',arr,'false');
   IbComposer_ResetDownChainControls('listbox1');
}

Function: IbComposer_selectTab

How to:

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

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">

Function: IbComposer_selectTemplateTab

How to:

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

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(event) {
   IbComposer_selectTemplateTab('tab5');
}

Function: IbComposer_goToPageOfMultiPageControl

How to:

IbComposer_goToPageOfMultiPageControl selects a page in a multipage control, such as a tab, accordion, or window.

Syntax: How to Select a Page in a Multipage Control 

IbComposer_goToPageOfMultiPageControl(controlID, page)

where:

controlID

Alphanumeric

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

page

Alphanumeric

Specifies a page number (for example 1, 2, and so on), or true for the previous page and false for the next page.

Example: Selecting a Page for a Multipage Control

The following example shows how to select a page in a window multipage control. In this example, the control will start on page 3. 

function button2_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
IbComposer_goToPageOfMultiPageControl('windowPanel1', '3');
}

The following example shows how to select the previous page in a window multipage control.

function button2_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
IbComposer_goToPageOfMultiPageControl('windowPanel1', 'true');
}

The following example shows how to select the next page in a window multipage control.

function button2_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
IbComposer_goToPageOfMultiPageControl('windowPanel1', 'false');
}

Function: IbComposer_getAllAmpersValues

How to:

IbComposer_getAllAmpersValues is used to retrieve 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 run time.

Syntax: How to Retrieve 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 run time, 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(event) {
   var val = IbComposer_getAllAmpersValues();
   alert(val);
   OnExecute(event);
}

Function: IbComposer_showLayer

How to:

IbComposer_showLayer shows or hides the specified layer.

Syntax: How to Show or Hide a Layer 

IbComposer_showLayer(layerName,bShow);

where:

layerName

Alphanumeric

Is the name of the layer, which will be shown or hidden.

bShow

Is an operator that can be set to true to show the layer or false to hide it.

Example: Showing or Hiding a Layer 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_showLayer('Customers','true');
}

Function: IbComposer_toggleMapLayer

How to:

IbComposer_toggleMapLayer toggles the visibility of the specified layer.

Syntax: How to Toggle Map Layer Visibility 

IbComposer_toggleMapLayer(mapId,layerName);

where:

mapId

Alphanumeric

Is the unique identifier of the map control.

layerName

Alphanumeric

Is the unique identifier of a layer within the map.

Example: Toggling Map Layer Visibility 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_toggleMapLayer('mapcontrol1','Customers');
}

Function: IbComposer_toggleMapMarker

How to:

IbComposer_toggleMapMarker toggles the visibility of the specified marker.

Syntax: How to Toggle Map Marker Visibility 

IbComposer_toggleMapMarker(mapId,layerName,markerName);

where:

mapId

Alphanumeric

Is the unique identifier of the map control.

layerName

Alphanumeric

Is the unique identifier of a layer within the map.

markerName

Alphanumeric

Is the unique identifier of a marker within the map.

Example: Toggling Map Marker 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_toggleMapMarker('mapcontrol1','Stores','EMart');
}

Function: IbComposer_refreshMapLayer

How to:

IbComposer_refreshMapLayer refreshes the specified layer from the database.

Syntax: How to Refresh a Map Layer 

IbComposer_refreshMapLayer(mapId,layerName);

where:

mapId

Alphanumeric

Is the unique identifier of the map control.

layerName

Alphanumeric

Is the unique identifier of a layer within the map.

Example: Refreshing the Layer 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target : 
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_refreshMapLayer('mapcontrol1','Customers');    
}

Function: IbComposer_panToAddress

How to:

IbComposer_panToAddress allows the user to pan to the point on a map for the specified address and zoom level.

Syntax: How to Pan to an Address 

IbComposer_panToAddress(address,mapId,zoom);

where:

address

Alphanumeric

Is the address you want to pan to.

mapId

Alphanumeric

Is the unique identifier of the map control.

zoom

Integer

Is how much you wish to zoom.

Example: Panning to an Address 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_panToAddress('2 Penn Plaza,NY,NY','mapcontrol1',10);
}

Function: ibComposer_panToPoint

How to:

ibComposer_panToPoint allows the user to pan to the point on a map for the specified coordinates and zoom level.

Syntax: How to Pan to a Point 

IbComposer_panToPoint(lat,long,mapId,zoom);

where:

lat

Integer

Is the latitude coordinate of the point you want to pan to.

long

Integer

Is the longitude coordinate of the point you want to pan to.

mapId

Alphanumeric

Is the unique identifier of the map control.

zoom

Integer

Is how much you wish to zoom.

Example: Panning to a Point 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_panToPoint(37.0625,-95.677068,'mapcontrol1',5); 
}

Function: IbComposer_preventModifyIFrameDocument

How to:

IbComposer_preventModifyIFrameDocument can prevent CSS modification of any iframe within a document, by calling it from onInitialUpdate.

Syntax: How to Prevent Modification of a Document within an IFrame 

function onInitialUpdate() {
   IbComposer_preventIFrameUpdates();}

Function: IbComposer_showAllMapMarkers

How to:

IbComposer_showAllMapMarkers displays all markers for the specified layer.

Syntax: How to Show All Map Markers 

IbComposer_showAllMapMarkers(mapId,layerName);

where:

mapId

Alphanumeric

Is the unique identifier of the map control.

layerName

Alphanumeric

Is the unique identifier of a layer within the map.

Example: Showing All Map Markers 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_showAllMapMarkers('mapcontrol1','Customers');  
}

Function: IbComposer_drawBullseye

How to:

IbComposer_drawBullseye draws a bullseye at a point on the map. This function has optional parameters to select whether to display markers, the units of measure used for the bullseye, the number of rings, the size of the rings, and the color of the rings.

Syntax: How to Draw a Bullseye 

IbComposer_drawBullseye(mapId,lat,long,selectmarkers,units,
rings,[list-of-sizes],[list-of-colors]);

where:

mapId

Alphanumeric

Is the unique identifier of the map control.

lat

Integer

Is the latitude coordinate of the point you want to pan to.

long

Integer

Is the longitude coordinate of the point you want to pan to.

selectmarkers

Boolean

Is an operator that, when set to true, selects all markers within the Bullseye.

units

Alphanumeric

The unit of measure for the Bullseye rings.

rings

Integer

The number of rings the bullseye uses.

list-of-sizes

Integer

Is an optional parameter, as a comma (,) separated list of sizes for the bullseye rings. For example, 1, 3, 5.

list-of-colors

Alphanumeric

Is an optional parameter, as a comma (,) separated list of colors for the bullseye rings. The colors can be RGB values or hexadecimal values. For example, Blue or #FFFF.

Example: Drawing a Bullseye 

function button1_onclick(event) {
   var eventObject = event ? event : window.event;
   var ctrl = eventObject.target ? eventObject.target :
   eventObject.srcElement;
   // TODO: Add your event handler code here
   IbComposer_drawBullseye('mapcontrol1',37.0625,-95.677068,'true','mi',3);
}

Function: IbComposer_setCalendarDatesRange

How to:

IbComposer_setCalendarDatesRange sets the range for the target calendar, given the date on the source calendar and a range in days.

Syntax: How to Set a Date Range for a Target Calendar 

IbComposer_setCalendarDatesRange(elementId, fromDate, toDate)

where:

elementID

Alphanumeric

Is the unique identifier of the target calendar control for which you want to set the date range.

fromDate

Date object

Is the value of the date from the source calendar.

Note: This can be obtained by using the IbComposer_getCurrentSelection function. This function should have the third parameter set to True to return a Date object.

toDate

Date object

This value must be calculated using fromDate and the number of days needed to show the range.

Example: Setting the Date Range for a Target Calendar 

function button1_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
     var curDate = IbComposer_getCurrentSelection('calendar1', 0, true);
       var fromDate= new Date(curDate);
       var toDate = new Date();
       var nOfDays= IbComposer_getCurrentSelection('slider1');
       if (isNaN (nOfDays-0)&& nOfDays != null) {
            alert("Please enter a numeric value!!");
       }
       else {
           var time = fromDate.getTime()+(nOfDays*3600000 * 24);
           toDate.setTime(time);
           IbComposer_setCalendarDatesRange("calendar2", fromDate, 
           toDate);
       }
}

Function: IbComposer_loadNextGroup

The IbComposer_loadNextGroup function allows you to load the next group in a table.

Reference: How to Load the Next Group in a Table 

IbComposer_loadNextGroup("tableId", groupObject, updateDependencies);

where:

tableId

Alphanumeric

Is the unique identifier of the table from which to load the next group.

groupObject

Object

Is an object representing the group displayed in the table.

updateDependencies

Boolean

If true, controls chained to the table are updated when IbComposer_loadNextGroup is executed. If false, they are not updated.

Example: Loading the Next Group in a Table

In the following example, clicking a button with the unique identifier next loads the next group of the table, called tablectrl1, using the IbComposer_loadNextGroup function. A button called prev, which executes the IbComposer_loadPrevGroup function, is not enabled until you have executed IbComposer_loadNextGroup for the first time, so that it is only available if there is a previous group to display. The next button is not available if the last group in the table is displayed.

In order to execute properly, a variable called numOfRows has been used to set the length of the displayed group to 3 rows.

var numOfRows=3;

function tablectrl1_onbeforeload(ctrl,arrValuesToLoad) {
 if(IbComposer_isCompleteReloading("tablectrl1") && arrValuesToLoad.length>numOfRows)	
{	
IbComposer_enableHtmlElement("prev",false);	
IbComposer_enableHtmlElement("next",true);
		return numOfRows;
	}
return false;
}

function next_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
var groupObj = {};
IbComposer_loadNextGroup("tablectrl1", groupObj, false);
IbComposer_enableHtmlElement("prev",true);
if(groupObj.end== groupObj.total)
	IbComposer_enableHtmlElement("next",false);

}

Function: IbComposer_loadPrevGroup

The IbComposer_loadPrevGroup function allows you to load the previous group in a table.

Reference: How to Load the Previous Group in a Table 

IbComposer_loadPrevGroup("tableId", groupObject, updateDependencies);

where:

tableId

Alphanumeric

Is the unique identifier of the table from which to load the next group.

groupObject

Object

Is an object representing the group displayed in the table.

updateDependencies

Boolean

If true, controls chained to the table are updated when IbComposer_loadPrevGroup is executed. If false, they are not updated.

Example: Loading the Previous Group in a Table

In the following example, clicking a button with the unique identifier prev loads the previous group of the table, called tablectrl1, using the IbComposer_loadPrevGroup function. The prev button is not available if you are viewing the first group in the table, so that it is only available if there is a previous group to display. You must click the button called next, which executes the IbComposer_loadNextGroup function, in order to enable it.

In order to execute properly, a variable called numOfRows has been used to set the length of the displayed group to 3 rows.

var numOfRows=3;

function tablectrl1_onbeforeload(ctrl,arrValuesToLoad) {
 if(IbComposer_isCompleteReloading("tablectrl1") && arrValuesToLoad.length>numOfRows)	
{	
IbComposer_enableHtmlElement("prev",false);	
IbComposer_enableHtmlElement("next",true);
		return numOfRows;
	}
return false;
}

function prev_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
var groupObj = {};
IbComposer_loadPrevGroup("tablectrl1", groupObj, false);
IbComposer_enableHtmlElement("next",true);
if(groupObj.begin== 1)
	IbComposer_enableHtmlElement("prev",false);    

}

Function: IbComposer_isCompleteReloading

The IbComposer_isCompleteReloading can be used to check if an element has finished reloading. It returns true if the element has reloaded, and false if it has not.

Reference: How to Check if an Element Has Finished Reloading 

IbComposer_isCompleteReloading("elementId");

where:

elementId

Alphanumeric

Is the unique identifier of the element whose reloading status you are checking.

Example: Checking if an Element Has Finished Reloading

In the following example, clicking a button with the unique identifier button1 displays a message indicating whether or not a table called tablectrl1 has finished reloading. 

function button1_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
alert(IbComposer_isCompleteReloading("tablectrl1"))

}

Function: getImageScale

When creating an Esri map that uses image markers in an HTML page, you can use the getImageScale function to enable the images to scale as you zoom in and out of the map. This helps to prevent the image markers from excessively overlapping as you zoom out of the map, making it more readable, while also maintaining reasonable image sizes as you zoom in. You can also set the maximum and minimum size of the images so that they comfortably fit on your map, regardless of how many markers it contains.

The getImageScale function does not require an event, and can be added directly to your embedded JavaScript.

Reference: How to Configure Image Resizing at Zoom Levels on a Map 

function getImageScale(layerName, scaleObj)
{     
	scaleObj.scale=boolean;
	scaleObj.minSz=minSize;
	scaleObj.maxSz=maxSize; 
		}

where:

layerName

Is a static value that does not need to be set. All map layers using image markers are affected by the getImageScale function.

scaleObj

This name, for example, scaleObj, should match the name of the objects for the scale, minSz, and maxSz properties.

boolean

Boolean

Type true to enable image resizing, or false to disable.

minSize

Integer

The minimum height, in pixels, of the image. The minimum size is used when fully zoomed out of the map. This value overrides the sizes set for the image marker in the Settings panel, but the height to width ratio is maintained.

maxSize

Integer

The maximum height, in pixels, of the image. The maximum size is used when fully zoomed into the map. This value overrides the sizes set for the image marker in the Settings panel, but the height to width ratio is maintained.

Example: Configuring Image Resizing at Zoom Levels on a Map

In the following example, the minimum size of all image markers in the map is set to 15 pixels, and the maximum size is set to 60 pixels. When you run the HTML page, the markers expand up to a height of 60 pixels as you zoom in, and shrink down to a height of 15 pixels as you zoom out. 

function getImageScale(layerName, scaleObj)
{     
	scaleObj.scale=true;
	scaleObj.minSz=15;
	scaleObj.maxSz=60; 
		}

Event Handlers

In addition to the typical event handlers, such as onclick, there are two event handlers that enable you to perform an action before a control is loaded and after a control is loaded.

Example: Modifying Display Values Before a Control is Loaded

The following example uses the onbeforeload event handler to modify the value DATSUN with the display value of Modified. 

//Begin function listbox1_onbeforeload
function listbox1_onbeforeload(ctrl,arrValuesToLoad) { 
for(var i = 0; i < arrValuesToLoad.length; i++) { 
    //alert(arrValuesToLoad[i].dispValue + "  " + arrValuesToLoad[i].value + "  " + arrValuesToLoad[i].selected);
    if (arrValuesToLoad[i].value == 'DATSUN') 
{         arrValuesToLoad[i].dispValue = 'Modified';     } 
    }
}
//End function listbox1_onbeforeload

Example: Copying Values From One Control to Another After Values are Loaded

The following example uses the onafterload event handler to copy values from one control to another. 

//Begin function listbox1_onafterload
function listbox1_onafterload(ctrl) 
{      IbComposer_getComponentById("listbox2").innerHTML = IbComposer_getComponentById("listbox1").innerHTML } 
//End function listbox1_onafterload

Note: If a control has more than 100 values, WebFOCUS App Studio will load only 100 values at a time, repeatedly, until all values are loaded. You will need to modify the JavaScript, as follows: 

function listbox1_onafterload(ctrl) 
{ if (arguments && arguments.length==2 && arguments[1])
IbComposer_getComponentById("listbox2").innerHTML = IbComposer_getComponentById("listbox1").innerHTML
}

This JavaScript will be called incrementally after each 100 items are added to the list box drop-down control. An additional parameter (a boolean value true/false arguments[1]) will be sent. It will be set to false for each incremental load of 100 items, and true for the final call.