Applying Custom CSS and JavaScript Code to a Page

In this section:

You can apply custom cascading style sheet (CSS) properties and JavaScript code to a page, allowing you to significantly enhance the page with countless styling options and run-time behaviors using code that you write yourself. CSS makes it easy to style different elements on a page by applying various styling properties to them, while JavaScript is a robust programming language that you can use to customize a page with dynamic and interactive features not normally available in WebFOCUS Designer.

This feature is intended for content developers with CSS and JavaScript coding experience. The CSS and JavaScript options are available to developers, administrators, and users with text editor access.

You can add custom CSS and JavaScript to a page by typing code into the CSS and Javascript text editors, respectively. To access the CSS or JavaScript text editor, click Outline on the sidebar, and then select CSS or JavaScript. The text editor opens over the canvas, and you can type your code into it, as shown in the following image.


JavaScript text editor in Designer

The code that you write can reference classes that you assign to different components on the page by selecting them and assigning a class name, using the Classes property on the Format tab.

To return to the canvas, click the close icon in the corner of the page.

When you use the text editor, the WebFOCUS Designer toolbar provides additional options to copy, cut, paste, and find and replace your text. The text editor also includes built-in features such as syntax highlighting, code folding, line numbering, autocomplete, alerts, indent guides, and a status bar. These features facilitate CSS and JavaScript code development and debugging by improving clarity and navigability in the text editor.

Note: Custom CSS and JavaScript is not displayed in the canvas. You must run the visualization to see the results of your custom code.

Styling Pages With Custom CSS

How to:

Cascading style sheets, or CSS, is a commonly used language that allows you to style different components on a page. CSS properties include font style, text color, background color, and much more. Custom CSS can be applied to specific objects on a page by specifying a CSS class for the object, and then using a class selector in your CSS code.

To specify a CSS class for an object on a page, select the object and, on the Properties panel, type a class name into the text box for the Classes property. You can specify multiple classes for an object by separating the class names with spaces, and you are encouraged to use the same class names for multiple items on the page. When you assign attributes to a class in the CSS tab, they will affect all elements on the page that are assigned to that class.

Procedure: How to Change the Color of a Panel Using CSS

You can change the background color of a panel by assigning a class to the panel and then adding the background-color attribute to the class using CSS.

  1. Open WebFOCUS Designer. On the WebFOCUS Hub, click the plus menu and click Create Visualizations, or, on the WebFOCUS Home Page, click Visualize Data.

    WebFOCUS Designer opens in a new browser tab.

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

  3. Click the Convert to page button to transform the visualization from a single content item to a page.
  4. Optionally, create new content in the visualization and add new containers to the page for additional content.
  5. Select a container on the page.
  6. On the Settings tab of the Properties panel, in the text box for the Classes property, type a class name of your choice, as shown in the following image.

    Properties panel showing panelclass as the Class
  7. Click Outline on the sidebar to display the visualization outline.
  8. Click CSS.

    The CSS text editor opens.

  9. Add a CSS declaration to change the background-color attribute for the class used by the panel.
    1. Reference the class name that you specified in the Classes property.

      Type a period (.) followed immediately by the class name, then an opening curly bracket ({), and press the Enter key.

      The closing bracket is added automatically.

    2. Within the brackets, type background-color, followed by a colon and then a color string.

      For example, to make the color of a panel, for which panelclass is the value of the Classes property, to a bright blue, you could use the following CSS declaration. 

      .panelclass {
    background-color: rgb(0,180,240);
}
  10. Save the visualization and close WebFOCUS Designer.
  11. Run the visualization from the Hub or Home Page.

    The custom CSS is applied to the specified container.

Enhancing Pages With Custom JavaScript

In this section:

How to:

You can use custom JavaScript to enhance the functionality of components on a page. Any component created on the page using the WebFOCUS 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 WebFOCUS 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 ibi WebFOCUS Designer JavaScript API Classes reference information below.

  1. Open WebFOCUS Designer. On the WebFOCUS Hub, click the plus menu and click Create Visualizations, or, on the WebFOCUS Home Page, click Visualize Data.

    WebFOCUS Designer opens in a new browser tab.

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

  3. Click the Convert to page button to transform the visualization from a single content item to a page.
  4. Optionally, create new content in the visualization and add new containers to the page for additional content.
  5. Select a container on the page.
  6. On the Settings tab of the Properties panel, in the text box for the Classes property, type a class name of your choice.
  7. Click Outline on the sidebar to display the visualization outline.
  8. Click JavaScript.

    The JavaScript text editor opens.

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

  10. 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.
  11. 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");
    });
});
  12. 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.

  13. On the Hub 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.

  1. On the Hub or Home Page, click the plus button and then click Assemble Visualizations.

    WebFOCUS Designer opens to assemble a page from existing content.

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

  3. Optionally, resize and reposition the container that contains the image, and add other items to the page.
  4. 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.
  5. Click Outline on the sidebar, and then click JavaScript.

    The JavaScript text editor opens.

  6. 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%');
})
  7. Replace class in the first two lines with the class name that you specified for the container in Step 4.
  8. 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.

  9. 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.
  10. 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.

ibi WebFOCUS Designer JavaScript API Classes

In this section:

As part of the WebFOCUS Designer JavaScript API, you can use the following predefined classes.
  • ibaObject. The base automation object.
  • ibaAccordionContainer. Accordion container automation object.
  • ibaCarouselContainer. Carousel container automation object.
  • ibaContent. Content panel automation object.
  • ibaPage. Page automation object. The event iba_pageloading will be triggered on the global window object. event.data will be the ibaPage object.
  • ibaPanelContainer. Panel container automation object.
  • ibaPortal. Portal automation object.
  • ibaSection. Page section automation object.
  • ibaTabContainer. Tab container automation object.

A help plug-in with information about each class is packaged with your WebFOCUS installation. It is available through a URL at the following address: 

http[s]://hostname:port/context/web_resource/doc/automation/index.html

where:

hostname

Is the name of the machine on which the WebFOCUS Client is installed.

port

Is the port number on which the server is listening.

context
Is the context root of the WebFOCUS application. For example, ibi_apps.

Class: ibaObject 

new ibaObject(element)

Is the base automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the node that is being automated.

Available methods include the following:

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

Class: ibaPage 

new ibaPage(element)

Is the page automation object. Automation objects are created internally by the system. You never directly instantiate an automation object. The event iba_pageloading will be triggered on the global window object. event.data will be the ibaPage object.

where:

element
Is the node that is being automated.

The following triggers can be used with the page object:

  • event:iba_pageloaded. The page is loaded in the running state.
  • event:iba_beforecontentdescribe. Before the page content filtering information has been retrieved.
  • event:iba_contentdescribed. After the page content filtering information has been retrieved, but before it has been processed.
  • event:iba_beforecontentload. Before the content of a panel is about to load.

These are used in the following JavaScript syntax example: 

window.addEventListener("iba_pageloading", function (e){
    var page = e.data;
    page.element().addEventListener("iba_pageloaded", function(e){
        var page = e.data;
    });
    page.element().addEventListener("iba_beforecontentdescribe", function (e){
        var describeInfo = e.data;
        var path = describeInfo.path; // The path to the content being described
        // e.preventDefault() will stop the describe from happening
    });
    page.element().addEventListener("iba_contentdescribed", function (e){
        var describeInfo = e.data;
        var path = describeInfo.path; // The path to the content being described
        var wfDescribe = describeInfo.wfDescribe; // The filtering information of the content being described
    });
    page.element().addEventListener("iba_beforecontentload", function (e){
        var loadInfo = e.data;
        var path = loadInfo.path; // The path to the content being described
        var defaultValues = loadInfo.defaultValues; // If default values are used to run the content
        // e.preventDefault() will stop the page from retrieving the content
    });
});

If you add multiple pages with custom JavaScript to the same portal, the iba_pageloading event listener, for the global window object, will execute whenever any page in the portal loads. To execute your code only when a specific page loads, remove the event listener after the code executes for the desired page using the window.removeEventListener method.

The iba_pageloading event listener can be used to access the page being loaded, since it receives a page object as a parameter. The page object can be stored or used to assign additional event handlers to the page as shown below: 

function onPageLoading(e) {
    var page = e.data; 
    page.element().addEventListener("iba_pageloaded", function(e){
        on load code
    });
   page.element().addEventListener("click", function(e)
   {  
       on click code
   });
  window.removeEventListener("iba_pageloading", onPageLoading);
}

where:

function onPageLoading

Is an iba_pageloading event listener function.

var page = e.data

Accesses the page object via the event parameter.

on load code

Code to be executed when the page loads.

on click code

Code to be executed when the page is clicked.

window.removeEventListener("iba_pageloading", onPageLoading);

Removes the iba_pageloading listener.

You can use the context member object to supply the context information for the page.

Available methods include the following:

  • addButton(options, sibling, before)

    Returns an element, adding a button to the title bar of the page.

    where:

    options

    Object.

    One or more button options, which can include the following:

    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    • tooltip. A tooltip for the button.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add button before or after the specified sibling.

  • addSection(options, sibling, before)

    Returns an element, adding a section to the page.

    where:

    options

    Object.

    One or more section options, which can include the following:

    • collapsible. A Boolean value. When true, the section is collapsible.
    • collapsed. A Boolean value. When true, the section is created in a collapsed state.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add the section before or after the specified sibling.

  • buttons(selector)

    Returns the page title bar buttons as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the buttons selector. All is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • containers(selector)

    Returns the page containers as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the containers selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

  • refreshFilters()

    Use to redescribe the existing content and recreate filter panels.

  • removeButton(button)

    Removes one or more buttons from the title bar of the page.

    where:

    button
    Selector, element, or jQuery.
    Optional. Is a button selector. All is the default.
  • removeSection(selector)

    Removes one or more sections from the page.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a section selector. All is the default.
  • sections(selector)

    Returns the page sections as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the section selector. All is the default.

  • title(title)

    Sets the title of the page. If title is not passed, the title of the container is returned as a string or jQuery.

    where:

    title
    String.
    Optional. Is the new title of the page.

Class: ibaSection

The ibaSection class extends ibaObject. 

new ibaSection(element)

Is the page section automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • addContainer(type, title, col, row, colSpan, rowSpan)

    Adds a new container to the section.

    where:

    type

    String.

    Is one of the following container types:

    • 'pane'
    • 'tab'
    • 'accordion'
    • 'carousel'
    title

    String.

    Is the container title.

    col

    Integer.

    Optional. The column of the section to insert to. By default, the container is added to the first available column.

    row

    Integer.

    Optional. The row of the section to insert to. By default, the container is added to the first available row.

    colSpan

    Integer.

    Optional. The width of the container in columns. 3 is the default.

    rowSpan

    Integer.

    Optional. The height of the container in rows. 5 is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • collapsed(collapsed)

    Makes the section collapsed, or returns the current collapsed state or a chainable automation object.

    where:

    collapsed

    Boolean.

    Optional. If true, collapse the section. Otherwise, expand.

  • collapsible(collapsible)

    Makes the section collapsible, or returns the current collapsible state or a chainable automation object.

    where:

    collapsible

    Boolean.

    Optional. If true, make the section collapsible.

  • containers(selector)

    Returns the containers in the section as an array.

    where:

    selector

    Selector, element, or jQuery.

    An optional containers selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

Class: ibaContainer 

new ibaContainer(element)

Is the container automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • addButton(options, sibling, before)

    Returns an element, adding a button to the title bar of the container.

    where:

    options

    Object.

    One or more button options, which can include the following:

    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    • tooltip. A tooltip for the button.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add button before or after the specified sibling.

  • addContent(path, description, replaceExisting)

    Returns elements. Adds new content by replacing the content in the current content panel or adding a sub-panel.

    where:

    path

    String.

    Path of the content being added.

    description

    String.

    Description of the content being added.

    replaceExisting

    Boolean.

    Optional. When true, replace the existing content. When false, which is the default, add new content.

  • addMenuItem(options, sibling, before)

    Returns an element, adding a menu item to the container menu.

    where:

    options

    Object.

    One or more menu item options, which can include the following:

    • text. The menu item text.
    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add the menu item before or after the specified sibling.

  • addMenuSeparator(options, sibling, before)

    Returns an element, adding a separator to the container menu.

    where:

    options

    Object.

    Menu separator options. You can use the class property to specify additional CSS classes.

    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add menu separator before or after the specified sibling.

  • buttons(selector)

    Returns the container title bar buttons as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the buttons selector. All is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • contents(selector)

    Returns the content panels in the container as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the content selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

  • removeButton(button)

    Removes one or more buttons from the title bar of the container.

    where:

    button
    Selector, element, or jQuery.
    Optional. Is a button selector. All is the default.
  • removeContent(selector)

    Removes content from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • removeMenuItem(selector)

    Removes one or more menu items from the container menu.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu item selector. All is the default.
  • removeMenuSeparator(selector)

    Removes one or more separators from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu separator selector. All is the default.
  • title(title)

    Sets the title of the container. If title is not passed, the title of the container is returned as a string or jQuery.

    where:

    title
    String.
    Optional. Is the new title of the container.

Class: ibaAccordionContainer

The ibaAccordionContainer class extends ibaContainer. 

new ibaAccordionContainer(element)

Is the accordion container automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • addButton(options, sibling, before)

    Returns an element, adding a button to the title bar of the accordion container.

    where:

    options

    Object.

    One or more button options, which can include the following:

    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    • tooltip. A tooltip for the button.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add button before or after the specified sibling.

  • addContent(path, description, replaceExisting)

    Returns elements. Adds new content by replacing the content in the current content panel or adding a new accordion tab.

    where:

    path

    String.

    Path of the content being added.

    description

    String.

    Description of the content being added.

    replaceExisting

    Boolean.

    Optional. When true, replace the existing content. When false, which is the default, add new content.

  • addMenuItem(options, sibling, before)

    Returns an element, adding a menu item to the accordion container menu.

    where:

    options

    Object.

    One or more menu item options, which can include the following:

    • text. The menu item text.
    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add the menu item before or after the specified sibling.

  • addMenuSeparator(options, sibling, before)

    Returns an element, adding a separator to the accordion container menu.

    where:

    options

    Object.

    Menu separator options. You can use the class property to specify additional CSS classes.

    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add menu separator before or after the specified sibling.

  • buttons(selector)

    Returns the container title bar buttons as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the buttons selector. All is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • contents(selector)

    Returns the content panels in the container as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the content selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

  • removeButton(button)

    Removes one or more buttons from the title bar of the container.

    where:

    button
    Selector, element, or jQuery.
    Optional. Is a button selector. All is the default.
  • removeContent(selector)

    Removes content from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • removeMenuItem(selector)

    Removes one or more menu items from the container menu.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu item selector. All is the default.
  • removeMenuSeparator(selector)

    Removes one or more separators from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu separator selector. All is the default.
  • selectContent(selector)

    Returns an element. Selects a content pane in the accordion container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • title(title)

    Sets the title of the container. If title is not passed, the title of the container is returned as a string or jQuery.

    where:

    title
    String.
    Optional. Is the new title of the container.

Class: ibaCarouselContainer

The ibaCarouselContainer class extends ibaContainer. 

new ibaCarouselContainer(element)

Is the carousel container automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • addButton(options, sibling, before)

    Returns an element, adding a button to the title bar of the carousel container.

    where:

    options

    Object.

    One or more button options, which can include the following:

    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    • tooltip. A tooltip for the button.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add button before or after the specified sibling.

  • addContent(path, description, replaceExisting)

    Returns elements. Adds new content by replacing the content in the current content panel or adding a new carousel slide.

    where:

    path

    String.

    Path of the content being added.

    description

    String.

    Description of the content being added.

    replaceExisting

    Boolean.

    Optional. When true, replace the existing content. When false, which is the default, add new content.

  • addMenuItem(options, sibling, before)

    Returns an element, adding a menu item to the carousel container menu.

    where:

    options

    Object.

    One or more menu item options, which can include the following:

    • text. The menu item text.
    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add the menu item before or after the specified sibling.

  • addMenuSeparator(options, sibling, before)

    Returns an element, adding a separator to the carousel container menu.

    where:

    options

    Object.

    Menu separator options. You can use the class property to specify additional CSS classes.

    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add menu separator before or after the specified sibling.

  • buttons(selector)

    Returns the container title bar buttons as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the buttons selector. All is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • contents(selector)

    Returns the content panels in the container as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the content selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

  • removeButton(button)

    Removes one or more buttons from the title bar of the container.

    where:

    button
    Selector, element, or jQuery.
    Optional. Is a button selector. All is the default.
  • removeContent(selector)

    Removes content from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • removeMenuItem(selector)

    Removes one or more menu items from the container menu.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu item selector. All is the default.
  • removeMenuSeparator(selector)

    Removes one or more separators from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu separator selector. All is the default.
  • selectContent(selector)

    Returns an element. Selects a content pane in the carousel container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • title(title)

    Sets the title of the container. If title is not passed, the title of the container is returned as a string or jQuery.

    where:

    title
    String.
    Optional. Is the new title of the container.

Class: ibaPanelContainer

The ibaPanelContainer class extends ibaContainer. 

new ibaPanelContainer(element)

Is the panel container automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • addButton(options, sibling, before)

    Returns an element, adding a button to the title bar of the panel container.

    where:

    options

    Object.

    One or more button options, which can include the following:

    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    • tooltip. A tooltip for the button.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add button before or after the specified sibling.

  • addContent(path, description, replaceExisting)

    Returns elements. Adds new content by replacing the content in the current content panel or adding a new panel.

    where:

    path

    String.

    Path of the content being added.

    description

    String.

    Description of the content being added.

    replaceExisting

    Boolean.

    Optional. When true, replace the existing content. When false, which is the default, add new content.

  • addMenuItem(options, sibling, before)

    Returns an element, adding a menu item to the container menu.

    where:

    options

    Object.

    One or more menu item options, which can include the following:

    • text. The menu item text.
    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add the menu item before or after the specified sibling.

  • addMenuSeparator(options, sibling, before)

    Returns an element, adding a separator to the container menu.

    where:

    options

    Object.

    Menu separator options. You can use the class property to specify additional CSS classes.

    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add menu separator before or after the specified sibling.

  • buttons(selector)

    Returns the container title bar buttons as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the buttons selector. All is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • contents(selector)

    Returns the content panels in the container as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the content selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

  • removeButton(button)

    Removes one or more buttons from the title bar of the container.

    where:

    button
    Selector, element, or jQuery.
    Optional. Is a button selector. All is the default.
  • removeContent(selector)

    Removes content from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • removeMenuItem(selector)

    Removes one or more menu items from the container menu.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu item selector. All is the default.
  • removeMenuSeparator(selector)

    Removes one or more separators from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu separator selector. All is the default.
  • title(title)

    Sets the title of the container. If title is not passed, the title of the container is returned as a string or jQuery.

    where:

    title
    String.
    Optional. Is the new title of the container.

Class: ibaTabContainer

The ibaTabContainer class extends ibaContainer. 

new ibaTabContainer(element)

Is the carousel container automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • addButton(options, sibling, before)

    Returns an element, adding a button to the title bar of the tab container.

    where:

    options

    Object.

    One or more button options, which can include the following:

    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    • tooltip. A tooltip for the button.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add button before or after the specified sibling.

  • addContent(path, description, replaceExisting)

    Returns elements. Adds new content by replacing the content in the current content panel or adding a new tab.

    where:

    path

    String.

    Path of the content being added.

    description

    String.

    Description of the content being added.

    replaceExisting

    Boolean.

    Optional. When true, replace the existing content. When false, which is the default, add new content.

  • addMenuItem(options, sibling, before)

    Returns an element, adding a menu item to the tab container menu.

    where:

    options

    Object.

    One or more menu item options, which can include the following:

    • text. The menu item text.
    • icon. A URL to an image file in .jpeg, .png, or .gif format.
    • glyph. A glyph or ligature, such as a Material icon.
    • glyphClasses. Glyph classes. For example, 'material-icons'.
    • class. Additional CSS classes.
    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add the menu item before or after the specified sibling.

  • addMenuSeparator(options, sibling, before)

    Returns an element, adding a separator to the tab container menu.

    where:

    options

    Object.

    Menu separator options. You can use the class property to specify additional CSS classes.

    sibling

    Selector, element, or jQuery.

    Optional. A sibling to add before or after. The default is Last.

    before

    Boolean.

    Add menu separator before or after the specified sibling.

  • buttons(selector)

    Returns the container title bar buttons as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the buttons selector. All is the default.

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • contents(selector)

    Returns the content panels in the container as an array.

    where:

    selector

    Selector, element, or jQuery.

    Is the content selector. All is the default.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, the DOM node that is being automated by this object.

  • removeButton(button)

    Removes one or more buttons from the title bar of the container.

    where:

    button
    Selector, element, or jQuery.
    Optional. Is a button selector. All is the default.
  • removeContent(selector)

    Removes content from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • removeMenuItem(selector)

    Removes one or more menu items from the container menu.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu item selector. All is the default.
  • removeMenuSeparator(selector)

    Removes one or more separators from the container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a menu separator selector. All is the default.
  • selectContent(selector)

    Returns an element. Selects a content pane in the tab container.

    where:

    selector
    Selector, element, or jQuery.
    Optional. Is a content selector. All is the default.
  • title(title)

    Sets the title of the container. If title is not passed, the title of the container is returned as a string or jQuery.

    where:

    title
    String.
    Optional. Is the new title of the container.

Class: ibaContent

The ibaContent class extends ibaObject. 

new ibaContent(element)

Is the content panel automation object. Automation objects are created internally by the system. You never directly instantiate an automation object.

where:

element
Is the DOM node that is being automated.

Available methods include the following:

  • classId()

    Returns a string, which is the unique, automatically generated class ID of the object being automated. It can be used to filter enumerations.

  • customClasses(classes, remove)

    Returns a string. Sets or gets custom classes.

    where:

    classes

    String.

    Optional. A space-separated list of classes to be added or removed.

    remove

    Boolean.

    Optional. If true, remove the classes specified in classes, otherwise add them.

  • element()

    Returns an element, which is the DOM node that is being automated by this object.

  • path()

    Returns the path of the content as a string.