Applying Custom JavaScript to a Page

You can use custom JavaScript to enhance the functionality of components on a page. Any component created on the page using the Designer canvas can be modified in the Javascript tab by referencing a CSS class name specified in the Classes field of the Properties panel for the object, or using the Designer JavaScript API, to standardized classes that correspond to different component types in a page or portal. Each component class can utilize a set of predefined methods in addition to custom JavaScript. You can even use JavaScript to add objects to a page entirely through code, without using the canvas at all.

How to Add a Button and a Menu Item to a Panel Container Using Custom JavaScript

You can use custom JavaScript code to add a button and a menu item to a panel that you have added to a page. You can configure the button and menu item to execute a command of your choice, such as a URL call.

For information about different JavaScript object classes, see the Designer JavaScript API Classes reference information.

Create a page using WebFOCUS Designer.
On the WebFOCUS Home Page, on the Common or Designer tab of the Action bar, click Page.
WebFOCUS Designer opens.
Select a template for the page.
If you are using the blank template, add a panel to the page.
Click the Containers tab and drag a panel container onto the page.
With the panel selected, open the Properties panel.
In the text box for the Classes property, type a class name of your choice.
Click the title bar or a blank area on the canvas to select the entire page.
In the Properties panel, enable the Javascript property.
The Javascript tab appears below the canvas.
Select the Javascript tab.
The Javascript tab text editor opens.
To have the button and menu item appear when the page loads, use the iba_pageloading event listener by adding the following syntax:
```
window.addEventListener("iba_pageloading", function (e){
});
```
The code to add a button and menu item will go within this event listener command.
Add a button to the panel using JavaScript.
1. First, within the iba_pageloading event listener, create a variable to represent the panel, such as the following
```
var panel = document.querySelector(".class").ibaObject;
```
  where:
```
panel
```
  Is the name of the variable that you define to represent the panel.
```
class
```
  Is the name you previously typed in the Classes property for the panel on the page.
2. After the panel variable, define the style and appearance of the button and add it to the panel, such as in the following syntax example. This example uses a home icon and places the button before the default resize button:
```
var button = panel.addButton(
    {"glyphClasses": "fa fa-home", "class": "buttonClass",
         "tooltip": "tooltip text"},
    ".pd-container-title-button-resize", true);
```
  where:
```
button
```
  Is the name of the variable that you define to represent the button.
```
panel
```
  Is the variable representing the panel, defined in step 10a.
```
fa fa-home
```
  Is a glyph class for a Font Awesome icon that looks like a house.
```
buttonClass
```
  Is a CSS class assigned to the button itself. You can use this to apply CSS styling to the button, or reference the button elsewhere in your JavaScript code.
```
tooltip text
```
  Is the text that you want to appear in the tooltip when you point to the button.
```
.pd-container-title-button-resize
```
  Is the class of the resize button on the panel. This is the sibling of the button you are currently adding.
```
true
```
  When the value of the before property is set to true, the button is placed before the sibling. Otherwise, it is placed after the sibling. If no sibling is specified, it is ordered last.
3. After defining the panel button, create an event listener that allows the button to execute a specified action. The following example causes the button to open the Information Builders website in a new window when it is clicked.
```
button.addEventListener("click", function(){
    window.open("http://www.informationbuilders.com");
    });
```
  where:
```
button
```
  Is the name of the variable that you define to represent the button.

Add a menu item to the panel's run-time menu using JavaScript.

Create a variable to define the menu item, such as in the following example.
```
var menu = panel.addMenuItem({
    "text": "Menu text", "glyphClasses": "fa fa-globe","class": "menu-class"},
    ".class>.ibi_menu_item", true);
```
where:
```
menu
```
Is a variable name that you want to use to represent the menu item.
```
panel
```
Is the name of the variable representing the panel to which the menu is added.
```
Menu text
```
Is the text of the menu item.
```
fa fa-globe
```
Is a glyph class for a Font Awesome icon that looks like the Earth.
```
menu-class
```
Is a CSS class assigned to the menu item itself. You can use this to apply CSS styling to the menu item, or reference the menu item elsewhere in your JavaScript code.
```
".class>.ibi_menu_item"
```
Is a selector for the Refresh button in the panel menu, where class is the CSS class assigned to the panel using the Classes property.
```
true
```
When the value of the before property is set to true, the menu item is placed before the sibling, which in this case is the Refresh option. Otherwise, it is placed after the sibling. If no sibling is specified, it is ordered last in the menu.

After defining the menu item, create an event listener that allows the button to execute a specified action. The following example causes the menu item to run an HTML page in a new window through a URL call when it is clicked.

menu.addEventListener("click", function(){
    window.open(
       "http://localhost:8080/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_LAUNCH&BIP_folder=IBFS%253A%252FWFC%252FRepository%252FPublic%252F2019%252FHTML%252F&BIP_item=html_page.htm"
    );
});

where:

menu

Is the variable name that you assigned to the menu item in step 11a.

The complete custom JavaScript may resemble the following.

window.addEventListener("iba_pageloading", function (e){        
    var panel = document.querySelector(".map-panel").ibaObject;        
    var ibsite = panel.addButton({
            "glyphClasses": "fa fa-home", "class": "ibButton", "tooltip": "Click to display help."}, 
        ".pd-container-title-button-resize", true);    
    ibsite.addEventListener("click", function(){        
        window.open("http://www.informationbuilders.com");});        
    var runReport = panel.addMenuItem({
            "text": "Country Report", "glyphClasses": "fa fa-globe","class": "globemenu"}, 
        ".map-panel>.ibx_menu_item",  true);        
    runReport.addEventListener("click", function(){        
        window.open(
            "http://localhost:8080/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_LAUNCH&BIP_folder=IBFS%253A%252FWFC%252FRepository%252FPublic%252F2019%252FHTML%252F&BIP_item=Basic_2_ctrl_page.htm");
    });
});

Save the page.
Changes made using custom CSS and JavaScript do not appear on the page at design time. To see the impact of your custom code, you must run the page from the WebFOCUS Home Page.
On the WebFOCUS Home Page, right-click the page that you just created and click Run in new window.
The page opens in a new browser tab or window, and the customized button and menu item are available. When clicked, they open the links you specified for them in a new tab or window

Release: 8206
Category: Adding Content to Pages
Product: WebFOCUS Designer
Tags: How-to's, Release Features

Applying Custom JavaScript to a Page

How to Add a Button and a Menu Item to a Panel Container Using Custom JavaScript

Related Resources

Topics