Enhancing Pages With Custom JavaScript

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 text editor 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.

Procedure: 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 below.

Open WebFOCUS Designer. On the WebFOCUS start page, click the plus menu and then click Create Visualizations, or, on the WebFOCUS Home Page, click Visualize Data.
WebFOCUS Designer opens in a new browser tab.
Select a workspace and a data source available from that workspace.
Once you select a data source, WebFOCUS Designer loads with options to create a single content item.
Click the Add visualization button to transform the visualization from a single content item to a page.
Optionally, create new content in the visualization and add new containers to the page for additional content.
Select a container on the page.
On the Settings tab of the Properties panel, in the text box for the Classes property, type a class name of your choice.
Click Outline on the sidebar to display the visualization outline.
Click JavaScript.
The JavaScript text editor opens.
To have the button and menu item appear when the page loads, use the iba_pageloaded event listener by adding the following syntax:
```
window.addEventListener("iba_pageloaded", 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_pageloaded 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 TIBCO website in a new window when it is clicked.
```
button.addEventListener("click", function(){
    window.open("https://www.tibco.com/");
    });
```
  where:
  
  button
  
  Is the variable name that you assigned to the button in step 10b.
Add a menu item to the panel's run-time menu using JavaScript.
1. 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>.ibx_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>.ibx_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.
2. 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_pageloaded", function (e){        
    var panel = document.querySelector(".map-panel").ibaObject;        
    var tibcosite = panel.addButton({
            "glyphClasses": "fa fa-home", "class": "tibcoButton", "tooltip": "Click to display help."}, 
        ".pd-container-title-button-resize", true);    
    tibcosite.addEventListener("click", function(){        
        window.open("https://www.tibco.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 canvas at design time. To see the impact of your custom code, you must run the visualization.
On the WebFOCUS start page or Home Page, right-click the visualization that you just created and click Run in new window.
The visualization 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.

Procedure: How to Use JavaScript to Automatically Resize an Image on a Page

Since the panels in a responsive page resize to fit the browser window, images added to the page may not always fit properly. If the image is too big, only part of the image may show in the panel, and scrollbars may be added. If the image is too small, the panel background may show around the image.

In order to autosize an image to fit a panel, you can use jQuery to set the height and width CSS properties for an image in a specified container. You can specify the container by referencing its class, which you can set using the Classes property on the Settings tab.

An example of the final JavaScript code is shown below:

$('.class').closest('.grid-stack-item').addClass('autoheight');
$('.class iframe').attr('scrolling','no').on('load', function(e){
	$(this).contents().find('img').height('100%');
	$(this).contents().find('img').width('100%');
})

where:

class: Is a class assigned to the panel that contains the image to be autosized.
.attr('scrolling','no'): Disables the generation of scrollbars in the container.
.height('100%'), .width('100%'): Sets the image to fill the height and width of the container. This may distort the image, depending on the dimensions of the container. As an alternative, replace 100% with auto for either the height or width, to maintain the height-to-width ratio at all sizes. Using auto may reveal the panel background or cut off part of the image, depending on the dimensions of the container.

On the WebFOCUS start page or Home Page, click the plus button and then click Assemble Visualizations.
WebFOCUS Designer opens to assemble a page from existing content.
With Content selected on the sidebar, navigate to the location of an image that has been uploaded to the Repository and drag the image onto the canvas.
The image is added to a container on the page. The size of the image in the container is the absolute size of the uploaded image file.
Optionally, resize and reposition the container that contains the image, and add other items to the page.
Select the container that holds the image. On the Settings tab of the Properties panel, type a class name of your choice into the Classes text box. This class will be used as an identifier for the container in the JavaScript code.
Click Outline on the sidebar, and then click JavaScript.
The JavaScript text editor opens.

Paste the following code into the text editor.

$('.class').closest('.grid-stack-item').addClass('autoheight');
$('.class iframe').attr('scrolling','no').on('load', function(e){
	$(this).contents().find('img').height('100%');
	$(this).contents().find('img').width('100%');
})

Replace class in the first two lines with the class name that you specified for the container in Step 4.
Click the red X in the top-right corner of the page to return to the page canvas.
The image still displays at its original size. The height and width properties are only applied when the page is run.
Optionally, on the canvas, select the container that contains the image and, on the Settings tab on the Properties panel, clear the Show title and Show toolbar check boxes to hide the container title and toolbar, so that the image is the only item in the container.
On the Visualization toolbar, click Run in new window to run the page and execute the JavaScript code that you just added.
The image stretches to fill the entire container at run time.

Release: 8207
Category: Adding Content to Pages
Product: WebFOCUS Designer

Enhancing Pages With Custom JavaScript

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

Procedure: How to Use JavaScript to Automatically Resize an Image on a Page

Topics