Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Using Bootstrap inside WebFOCUS

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Using Bootstrap inside WebFOCUS
 Login/Join
 
Surenther
Silver Member
posted
Hi All,

I am trying to use bootstrap table styling instead of WebFOCUS default styling. i have found the bootstrap instructions from here

http://www.tutorialrepublic.co...ap&file=simple-table

But the table structure used is different from our WebFOCUS default table styling. can anybody knows how to change the default WebFOCUS table structure like including 
 <th>
tab and also adding particular class name to the tag?

This message has been edited. Last edited by: <Kathryn Henning>,


----------------------------------
Prod Version:WebFocus 8.1.05,OS:Unix ,Output:ALL
 
Posts: 29 | Location: North Carolina | Registered: August 26, 2008Report This Post
Ram Prasad E
Master
posted Hide Post
Here is an example from documentation for using CSS in WF reports. With CSSURL and CLASS stylesheet attributes, you could easily apply styling to WF reports from CSS.
curprods.fex
--------------
TABLE FILE GGPRODS
HEADING
"</1 Current Products</1"
PRINT PRODUCT_DESCRIPTION UNIT_PRICE
BY PRODUCT_ID
ON TABLE SET PAGE-NUM OFF
ON TABLE SET STYLE *
TYPE=REPORT, CSSURL=http://websrv2/css/report01.css, $
TYPE=HEADING, CLASS=headText, $
TYPE=TITLE, CLASS=reportTitles, $
TYPE=DATA, CLASS=lowCost, WHEN=N3 LT 27, $
ENDSTYLE
END

report01.css
------------
BODY {font-family:Arial, sans-serif}
TABLE {border:0}
TD {border:0}
.reportTitles {font-weight:bolder; background:lightblue;}
.lowCost {color:green; font-style:italic;}
.headText {font-family:Times New Roman, serif; font-size:larger;
text-align:center}


Thanks,
Ram


WebFOCUS 8.1.05
Windows
http://ibiwebfocus.wordpress.com
https://www.facebook.com/groups/ibi.webfocus/
 
Posts: 542 | Location: Dearborn, MI | Registered: June 03, 2009Report This Post
Clayton Peacock
Member
posted Hide Post
Try this Smiler 

  
TABLE FILE CAR
SUM DEALER_COST
    RETAIL_COST
BY COUNTRY
BY CAR
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD1 FORMAT HTMTABLE
END
-RUN

TABLE FILE CAR
SUM DEALER_COST
BY COUNTRY
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD2 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>

-* Bootstrap and jQuery
    <link href="/approot/common/bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/approot/common/bootstrap/bootstrap-3.3.5-dist/jquery.min.js"></script>
    <script src="/approot/common/bootstrap/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script>

        function createHeader(myTable){

            var headerArray = []; 
            var headerAlign = [];  
            var header;

-* Get the Columns titles and insert into array
            for(var i=0; i<myTable.rows.item(1).cells.length; i++) {
               headerArray[i] = myTable.rows.item(0).cells.item(i).innerText;
               headerAlign[i] = myTable.rows.item(0).cells.item(i).hasAttribute('align');
            }

            header = myTable.createTHead();
            tr = document.createElement('tr');
            header.appendChild(tr);             

            for(var i=0; i<headerArray.length; i++) {
                th = document.createElement('th');
                th.innerHTML = headerArray[i];        
                if(headerAlign[i]){
                    th.className = 'text-right';
                }
                tr.appendChild(th);
            }

            myTable.deleteRow(1);
            myTable.className = 'table table-bordered table-hover table-striped';
        }


         $(document).ready(function () {
            var myTable = document.getElementsByTagName('table')[0];         
            for(var i=0; i<document.getElementsByTagName('table').length; i++) {
                myTable = document.getElementsByTagName('table')[i];         
                createHeader(myTable);            
            }
         });
      
    </script>
  </head>

  <body>
    <div class="container">
       !IBI.FIL.HLD1;
       !IBI.FIL.HLD2;
    </div>
  </body>
</html>
-HTMLFORM END
-EXIT


WF 8.1.05, MRE, BI Portal, App Studio, Apache Tomcat/8.0.21, MS Windows Server 2014 Express, MS Windows 10, Chrome
 
Posts: 11 | Registered: September 18, 2015Report This Post
Surenther
Silver Member
posted Hide Post
quote:
Originally posted by Clayton Peacock:
Try this Smiler 

  
TABLE FILE CAR
SUM DEALER_COST
    RETAIL_COST
BY COUNTRY
BY CAR
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD1 FORMAT HTMTABLE
END
-RUN

TABLE FILE CAR
SUM DEALER_COST
BY COUNTRY
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD2 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>

-* Bootstrap and jQuery
    <link href="/approot/common/bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
    <script src="/approot/common/bootstrap/bootstrap-3.3.5-dist/jquery.min.js"></script>
    <script src="/approot/common/bootstrap/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script>

        function createHeader(myTable){

            var headerArray = []; 
            var headerAlign = [];  
            var header;

-* Get the Columns titles and insert into array
            for(var i=0; i<myTable.rows.item(1).cells.length; i++) {
               headerArray[i] = myTable.rows.item(0).cells.item(i).innerText;
               headerAlign[i] = myTable.rows.item(0).cells.item(i).hasAttribute('align');
            }

            header = myTable.createTHead();
            tr = document.createElement('tr');
            header.appendChild(tr);             

            for(var i=0; i<headerArray.length; i++) {
                th = document.createElement('th');
                th.innerHTML = headerArray[i];        
                if(headerAlign[i]){
                    th.className = 'text-right';
                }
                tr.appendChild(th);
            }

            myTable.deleteRow(1);
            myTable.className = 'table table-bordered table-hover table-striped';
        }


         $(document).ready(function () {
            var myTable = document.getElementsByTagName('table')[0];         
            for(var i=0; i<document.getElementsByTagName('table').length; i++) {
                myTable = document.getElementsByTagName('table')[i];         
                createHeader(myTable);            
            }
         });
      
    </script>
  </head>

  <body>
    <div class="container">
       !IBI.FIL.HLD1;
       !IBI.FIL.HLD2;
    </div>
  </body>
</html>
-HTMLFORM END
-EXIT


Thanks a lot Clayton. Wonderful code. This will help me a lot


----------------------------------
Prod Version:WebFocus 8.1.05,OS:Unix ,Output:ALL
 
Posts: 29 | Location: North Carolina | Registered: August 26, 2008Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Using Bootstrap inside WebFOCUS

Copyright © 1996-2020 Information Builders