App Studio > Creating HTML Pages > Using JavaScript Code with HTML Canvas Pages

Using JavaScript Code with HTML Canvas Pages

Topics:

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 listbox, drop down, or the 'from' listbox of a double list control.

Syntax: How to Remove Listbox 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 Listbox 

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_setCurrentSelection2

How to:

IbComposer_setCurrentSelection2 sets the current selected values for radio button and check box controls using an index value.

Syntax: How to Set the Current Selected Value for a Radio Button or Check Box Control 

IbComposer_setCurrentSelection2(controlID,index,bUpdateDependencies);

where:

controlID

Alphanumeric

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

index

Numeric

The index value of the item to select. The first item in the control object has an index value of 0.

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 uses a button called button1 to select the third value, indicated by the index value of 2, in a radio button control called radio1. 

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_setCurrentSelection2("radio1",2,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_goToPortalPage

You can use the IbComposer_goToPortalPage function to navigate to a specified page within the same a collaborative portal. Create an HTML page with a trigger for the IbComposer_goToPortalPage function, configure the IbComposer_goToPortalPage function to target a portal page, and add the HTML page to a portal page in the same collaborative portal as the targeted portal page.

Reference: How to Navigate to a Page in a Collaborative Portal 

IbComposer_goToPortalPage("Page_Name");

where:

Page_Name

Alphanumeric

Is the name of another portal page within the same collaborative portal as the HTML page containing the IbComposer_goToPortalPage function, in double quotation marks.

Make sure to type the portal page name instead of the title. You can see the name of a portal page in the Name field of the File/Folder Properties panel in App Studio. Do not include the .page extension in the IbComposer_goToPortalPage function.

Example: Navigating to a Page in a Collaborative Portal

In the following example, clicking a button with the unique identifier button1, which is available on a portal page, opens the page named Page_1, contained in the same collaborative portal. 

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_goToPortalPage("Page_1"); 

}

Function: IbComposer_isSelectionRequired

The IbComposer_isSelectionRequired function allows you to determine whether a selection is required for a specified control. If selection is required from the control, the HTML element is returned. If selection is optional, null is returned.

Reference: How to Determine if Selection Is Required 

IbComposer_isSelectionRequired("controlId");

where:

controlId

Alphanumeric

Is the unique identifier of the control whose status you are checking.

Example: Determining if Selection Is Required

In the following example, clicking a button with the unique identifier button1 displays a message that says whether a selection is required in combobox1, based on the value returned by IbComposer_isSelectionRequired. Since the item being checked is an HTML select element, the message is different depending on whether the returned value is [object HTMLSelectElement] or null. 

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 required = IbComposer_isSelectionRequired("combobox1")
if (required == "[object HTMLSelectElement]") {
	alert("Selection is required")
	} 
else if (required == null) {
	alert("No selection required")
	}

}

Function: IbComposer_getNumberOfRecordsReturned

The IbComposer_getNumberOfRecordsReturned function produces the number of records returned by a request executed by an Ajax call. To use the IbComposer_getNumberOfRecordsReturned function, create a task that executes a request using an Ajax call. The value in the Function name field for the task, in the Tasks & Animations panel, should be the name of the callback function. This function and the IbComposer_getNumberOfRecordsReturned function should have the same result object as an argument.

Reference: How to Return the Number of Records in a Request 

IbComposer_getNumberOfRecordsReturned(resultObject);

where:

resultObject

Alphanumeric

Is a result object that matches the argument of the callback function for the Ajax call.

Example: Returning the Number of Records in a Request

For the following example, a task has been created in the Tasks & Animations panel to execute an external procedure request, with Ajax call set as the Target type. The Ajax call is specified to use a callback function named showResult. The showResult function then passes the value, called result, to the IbComposer_getNumberOfRecordsReturned function, the resulting value of which is shown in a message. This value is the number of records in the request. 

function showResult(result)
{
alert(IbComposer_getNumberOfRecordsReturned(result));
}

Function: IbComposer_doSelectionByTableRow

The IbComposer_doSelectionByTableRow function returns the values of specified fields in the selected row of a table. You can use another JavaScript function, such as IbComposer_setCurrentSelection, to enable selection values in the table.

Reference: How to Retrieve Values From a Selected Row in a Table 

IbComposer_doSelectionByTableRow("tableId", fieldnames, setSelection, displayOnly);

where:

tableId

Alphanumeric

Is the unique identifier of the table to return values from.

fieldnames

Is an array of field names, for example:

["field1", "field2", "field3"]
dontSetSelection

Boolean

Determines whether to select values so that you can pass them to chained controls. When true, values are not selected. When false, the values are selected.

displayOnly

Boolean

When true, selections are display values. When false, selections are values from the data source.

Example: Retrieving Values From a Selected Row in a Table

In the following example, clicking a button with the unique identifier button1 displays a message containing the values of the Country and Model fields for the selected row in table1, if a row has been selected. 

function button3_onclick(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here 

var fields = ["CAR.ORIGIN.COUNTRY", "CAR.CARREC.MODEL"];
var values = IbComposer_doSelectionByTableRow("tablectrl1", fields, true, true);

if(values && values.length)
{
for(var i = 0; i <values.length; i++)
    alert(values[i]);
}
}

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: IbComposer_setCalendarDate

The IbComposer_setCalendarDate function allows you to input a date for a target calendar.

Reference: How to Set the Date of a Target Calendar 

IbComposer_setCalendarDate("controlId", dateObject);

where:

controlId

Alphanumeric

Is the unique identifier of the calendar whose date you are setting.

dateObject

Is a JavaScript date object.

Example: Setting the Date of a Target Calendar

In the following example, clicking a button with the unique identifier button1 sends the current date to a calendar control called calendar1. 

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_setCalendarDate("calendar1",new Date());
}

In the following example, clicking a button with the unique identifier button1 sends the specified date, June 25, 2015, to the calendar control called calendar1.

Note: In JavaScript, months start at 0 (January), so month 5 in the example below represents June. 

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 today= new Date();
today.setDate(25);
today.setMonth(5);
today.setYear(2015);

IbComposer_setCalendarDate("calendar1",today);
}

Function: IbComposer_saveSelectedFile

The IbComposer_saveSelectedFile function allows you to upload a file, selected in an edit box with the Type property set to File, to a specified application folder in the Data Servers area. This location is specified using the Copy file to property for the edit box.

Reference: How to Upload a File Selected in an Edit Box 

IbComposer_saveSelectedFile("controlId");

where:

controlId

Alphanumeric

Is the unique identifier of the edit box where you selected the file to upload.

Example: Uploading a File Selected in an Edit Box

In the following example, clicking a button with the unique identifier button1 uploads the file selected in the edit box edit1 to a location set using the Copy file to property. The Type property for edit1 has been set to File. 

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_saveSelectedFile("edit1")

}

Function: IbComposer_loadFromSelectedFile

The IbComposer_loadFromSelectedFile function allows you to display a file, selected in an edit box with the Type property set to File, in a container in an HTML page.

Reference: How to Display a File Selected in an Edit Box 

IbComposer_loadFromSelectedFile(controlId,containerId,[callBack]);

where:

controlId

Alphanumeric

Is the unique identifier of the edit box where you selected the file to upload.

containerId

Alphanumeric

Is the unique identifier of the container in which to display the file selected using controlId.

callBack

Alphanumeric

Is an optional function to call when the selected item loads.

Example: Displaying and Uploading a File Selected in an Edit Box

In the following example, clicking a button with the unique identifier button1 displays a preview of the file selected in the edit box edit1 in an image component called image1 and calls the IbComposer_saveSelectedFile function to save it to a specified location. 

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 saveFn = IbComposer_saveSelectedFile("edit1");
IbComposer_loadFromSelectedFile("edit1", "image1", saveFn)

 }

 WebFOCUS

Feedback