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);
}

Running an Animation

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

Running a Task

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

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

Running 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 run 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 run when a drill-down link in the report is clicked. You can then specify a request in the Requests/Actions section to be run by using the selected parameter value when a drill-down link is clicked.

Returning a Procedure Name

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

Returning Target Frame Names

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

Returning the Map Object for a Map

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

Returning an Array of Markers for a Map

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

Populating a Control Dynamically

function button3_onclick(event) {
   var acc = IbComposer_populateDynamicCtrl('listbox3','listbox2');
   acc.selectNextPage();
}

Obtaining the Accordion Report by Using its ID

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

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]);
}

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

Retrieving the Current Clicked Row of an HTML Table

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

Retrieving the Current Clicked Column of an HTML Table

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

Retrieving the Current Clicked Cell Value of an HTML Table

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

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

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); 
}

Running a Report in a New Window

function button3_onclick(event) {
   IbComposer_execute('report1','newwin');
}

Determining if a Checkbox is Selected

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

Showing or Hiding a Checkbox

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

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

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

Making a Tab Active

<FORM id=form1 onsubmit="OnExecute(this);
   IbComposer_selectTab('tab1',1) name="form1">

Making a Template Tab Active

function submit1_onclick(event) {
   IbComposer_selectTemplateTab('tab5');
}

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 starts 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');
}

Retrieving a List of All Parameters Selected in a Report

function button1_onclick(event) {
   var val = IbComposer_getAllAmpersValues();
   alert(val);
   OnExecute(event);
}

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

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

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

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

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);
}

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); 
}

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

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);
}

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);
       }
}

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

}

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

}

Returning the Number of Records in a Request

For the following example, a task has been created in the Tasks & Animations panel to run an external procedure request, with an 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));
}

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]);
}
}

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 runs 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.

To run 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);

}

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 runs the IbComposer_loadNextGroup function, to enable it.

To run 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);    

}

Checking if an Element Has Finished Reloading

In the following example, clicking a button with the unique identifier button1 displays a message indicating whether 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"))

}

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);
}

Uploading a File that isSelected File 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")

}

Displaying and Uploading a File that is 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)

 }

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; 
		}

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

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 loads only 100 values at a time, repeatedly, until all values are loaded. You must 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 every 100 items are added to the list box dropdown control. An additional parameter (a boolean value true/false argument[1]) is sent. It is set to false for each incremental load of 100 items, and true for the final call.