[SOLVED] Using Bootstrap inside WebFOCUS

July 03, 2014, 09:43 AM

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>,

July 07, 2014, 01:50 AM

Ram Prasad E

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

October 15, 2015, 10:14 AM

Clayton Peacock

Try this

  
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

October 16, 2015, 10:50 AM

Surenther

quote:

Originally posted by Clayton Peacock:
Try this

  
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