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     [SHARING] Adding Bootstrap style to WebFOCUS Tables

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SHARING] Adding Bootstrap style to WebFOCUS Tables
 Login/Join
 
Member
posted
Below will convert ALL your WebFOCUS table's to Bootstrap style.

  
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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/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

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


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
Virtuoso
posted Hide Post
Clayton,

Just wanted to say thanks for sharing this! I came across this roadblock a while back. It's nice to know you can get things set up correctly despite things being structured differently.

Would you be willing to comment out your code a tad more describing what each block does if possible? It would be helpful to those of us that do not understand Js and jQuery as much as the next guy and maybe give a better understanding of why WF tables need to be restructured if we want to use Bootstrap with them.

Really appreciate your post!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Member
posted Hide Post
Your welcome CoolGuy! Smiler

Hope the below comments help added to the fex, tried to keep it simple.


I wanted to convert my WebFOCUS tables to Bootstrap tables, tried to add CLASSes to the TABLE but this started to get messy and complicated.

When you create a HOLD file format HTMTABLE and inspect the HTML in your browser(right click table and inspect element) you will notice that the column titles are not in the THEAD tag as well as the TR child nodes are not TH tags.
What we need to do is extract the column titles from the TABLEs TBODY and insert these into the THEAD(else you will not get a nice bold heading/no bordered heading if you are using the table-bordered bootstrap class).
After we extracted the values we then need to delete the original column titles.
The javascript below will scan through the DOM(all HTML generated in the browser) after the page loads converting ALL tables to the Bootstrap table layout by means of reconstructing the HTML TABLE and adding the Bootstrap classes(table,table-bordered,table-hover,table-striped).
Also we need to see if the column titles are right aligned for numeric column values.

Examples of Bootstrap table layouts and classes can be found here: w3schools or Bootstrap Table

This is the correct HTML TABLE layout for a Bootstrap Table:
 
 <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
    </tbody>
  </table>

-* WebFOCUS fex starts here

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>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script>

        function createHeader(myTable){

-* Create 2 arrays:
-* headerArray contains the Column titles 
-* headerAlign is Boolean to indicate whether the column title are right aligned(numeric fields) 
            var headerArray = []; 
            var headerAlign = [];  
            var header;

-* Get the Columns titles fro the TABLE and insert into array headerArray also check the alignment of the column titles. If the column title has an attribute of align we know that the column it numeric.
            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');
            }

-* Create a THEAD, TR tags and append them to the TABLE layout
            header = myTable.createTHead();
            tr = document.createElement('tr');
            header.appendChild(tr);             

-* Create the TH tags and attach them to the TABLE layout including the column title value which we get from the headerArray, we also check to see if we need to add the text-right Bootstrap class for numeric columns.
            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);
            }

-* Delete the original column title row from the table as we have created the new column title row in the correct HTML TABLE structure.
            myTable.deleteRow(1);
-* Add the Bootstrap CLASSes to the TABLE
            myTable.className = 'table table-bordered table-hover table-striped';
        }

-* After the page has loaded the below function is triggered automatically which converts the tables
         $(document).ready(function () {
-* Scan the entire HTML DOM looking for all tables tags and pass each one as an argument to the createHeader function to convert them into a the correct HMTML layout/apply Bootstrap classes
            for(var i=0; i<document.getElementsByTagName('table').length; i++) {
                var myTable = document.getElementsByTagName('table')[i];         
-* Loop through all the TABLEs in the HTML and pass the tables to the createHeader function to do the magic.
                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
Virtuoso
posted Hide Post
Clayton,

You rock man! Thanks for taking some time to comment everything and give an explanation of why things ought to be converted, etc. Really appreciate it! Great reference material!


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Master
posted Hide Post
I guess my question would be why? Why use bootstrap and jquery, that executes 1000's of lines of code, to build out a table that can easily be done in css alone with a hold file like your already doing?



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Expert
posted Hide Post
Forgive me for asking, but what do you mean by "Bootstrap style"?

This looks very similar to what WebFOCUS display with the following code. Consider the following code, using the Power of WebFOCUS, and it's a lot more maintainable by WebFOCUS developers without all the over-complications imposed by the non-WebFOCUS code:
SET PAGE = NOLEAD
TABLE FILE CAR
SUM DEALER_COST RETAIL_COST
BY COUNTRY
BY CAR
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS REPORT1 FORMAT HTMTABLE
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
GRID=OFF, BORDER=LIGHT, FONT=ARIAL,$
ENDSTYLE
END
-RUN

TABLE FILE CAR
SUM DEALER_COST
BY COUNTRY
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS REPORT2 FORMAT HTMTABLE
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
GRID=OFF, BORDER=LIGHT, FONT=ARIAL,$
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
!IBI.FIL.REPORT1;<BR>!IBI.FIL.REPORT2;
-HTMLFORM END

Don't get me wrong, there a time and place for everything and CSS, HTML coding, etc. is wonderful. But, why over complicate thing when "We Can Do that in WebFOCUS"?




   In FOCUS Since 1983 ~ from FOCUS to WebFOCUS.
   Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Master
posted Hide Post
quote:
This looks very similar to what WebFOCUS display with the following code


Where is the like button?? Wink

Too many people these days are relying on 3rd party code to make their life easier or because, "it's cool" and are losing the concept of efficiency. There is a reason web servers have to have a TB of memory, running on SSD, with GB network cards. It's because we bloat up the networks with unnecessary traffic.

Bootstrap, to new developers, is a way to make things Mobile Responsive, but anyone can do it without Bootstrap and with a lot less code.

I threw something together for ya.
http://jsfiddle.net/gavinlandon/xfxs6wf1/



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
-* Add the Bootstrap CLASSes to the TABLE
            myTable.className = 'table table-bordered table-hover table-striped';  

@Clayton - Thank you for the share.

When I execute your code, I don't see clasess like 'table-hover' and 'table-striped' kicking in.

Sounds like what I see is like what Doug is seeing, the two reports with arial font with light borders.

I am seeing the following JavaScript error:
SCRIPT5007: Unable to get value of the property 'innerText': object is null or undefined 
ExBootstrapReports.fex?IBIRS_action=run&IBIMR_random=51326, line 24 character 1 

Line 24 is:
headerArray[i] = myTable.rows.item(0).cells.item(i).innerText; 

If you have an idea on how to fix that would be great.

Thanks again.




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Member
posted Hide Post
@CoolGuy your welcome, glad it works nicely and appreciate the feedback. Code created for Surenther posted 03-07-2014.

@David: Please try and run the code in Chrome and see if you still get an error in your console?

If you still get an error maybe try replace the innerText with innerHTML, IE is not my browser of choice, tested on IE11, Edge, Firefox and Chrome before I posted.

I think everyone that commented above is not seeing what's suppose to generate based on the simple css that Doug posted. This can be fixed with JQuery for cross browser compatibility...


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
Master
posted Hide Post
quote:
Please try and run the code in Chrome and see if you still get an error in your console


I use Chrome and see the same error in the console only. No errors on the screen.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Expert
posted Hide Post
As Gavin suggests (ok, states) you can achieve all of this without a lot of effort using CSS.

The idea of the bootstrap "collection" is that you do not need to do much at all with your output providing you assign the correct CSS class to your div statements.

If you want a fully functioning, no changes required (I hope I haven't spoken too soon!) bootstrap example, then run the code below. Note that it was written in an Application folder (i.e. not a content folder), and it works in both Chrome and IE11. It even functions in the new edge browser within Windows 10.

I have added the additional feature of "flip" that someone asked about a couple of months ago.

Play and enjoy(?) Wink

-DEFAULTH &Country = 1, &COUNTRY = '', &Ctry1 = '', &Ctry2 = '', &Ctry3 = '', &Ctry4 = ''
SET HOLDLIST = PRINTONLY
SET PAGE     = NOLEAD
SET HTMLCSS  = ON
TABLE FILE CAR
BY COUNTRY
WHERE COUNTRY NE 'FRANCE'
WHERE RECORDLIMIT EQ 4
ON TABLE HOLD AS TEMPCTRY
END
-RUN
-REPEAT :Loop FOR &Country FROM 1 TO 4;
-READFILE TEMPCTRY
-SET &Ctry&Country.EVAL = &COUNTRY.QUOTEDSTRING;
TABLE FILE CAR
SUM RCOST AS 'Retail Cost' DCOST AS 'Dealer Cost' BY CAR AS 'Manufacturer' BY MODEL AS 'Model'
WHERE COUNTRY EQ &COUNTRY.QUOTEDSTRING ON TABLE HOLD AS REPORT&Country.EVAL FORMAT HTMTABLE
-*HEADING "Details for <COUNTRY"
ON TABLE SET STYLE *
  grid=off, $
ENDSTYLE
END
GRAPH FILE car
SUM RCOST AS 'Retail Cost' DCOST AS 'Dealer Cost' BY CAR AS 'Manufacturer'
WHERE COUNTRY EQ &COUNTRY.QUOTEDSTRING ON GRAPH HOLD AS CHART&Country.EVAL FORMAT JSCHART
-*HEADING "Details for <COUNTRY"
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET HAXIS 560.0
ON GRAPH SET VAXIS 260.0
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setDepthRadius(0);
setPlace(true);
*END
INCLUDE=IBFS:/EDA/EDASERVE/_EDAHOME/ETC/endeflt.sty,$
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
ENDSTYLE
END
-:Loop
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Bootstrap</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="/ibi_apps/ibi_html/javaassist/jquery/jquery_min.js" type="text/javascript"></script>
  <script src="/ibi_apps/jquery/js/jquery-ui.min.js" type="text/javascript"></script>
  <script src="https://cdn.rawgit.com/nnattawat/flip/v1.0.16/dist/jquery.flip.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link type="text/css" rel="stylesheet" href="/ibi_apps/jquery/css/jquery-ui.css" />
<style>
.bscell {width: 570px; height: 300px;}
.card {width: 570px; height: 300px; font-weight: 200; color: #fff;}
.card .front{background-color: #66f; overflow: auto;}
.card .back{overflow: auto;}
.header {line-height: 55px; font-size:20pt; text-align: center; border-bottom: 1px solid; background-color: #00f; color: #fff;}
.title {line-height: 25px; text-align: center; border-bottom: 1px solid; background-color: #00f;}
</style>
<script type="text/javascript">
$(document).ready (function() {
  $(".card").flip({
    trigger : "click",
    speed: 700,
-*    reverse: true,
    axis: "y"
  });
});
</script>
</head>
<body style="overflow: auto;">
<div class="container">
  <div class="row">
    <div class="col-sm-6 bscell">
      <div class="card" id="card1">
        <div class="front">
          <div class="title">Report for &Ctry1.EVAL</div>
          !IBI.FIL.REPORT1;
        </div>
        <div class="back">
          <div class="title">Chart for &Ctry1.EVAL</div>
          !IBI.FIL.CHART1;
        </div>
      </div>
    </div>
    <div class="col-sm-6 bscell">
      <div class="card" id="card2">
        <div class="front">
          <div class="title">Report for &Ctry2.EVAL</div>
          !IBI.FIL.REPORT2;
        </div>
        <div class="back">
          <div class="title">Chart for &Ctry2.EVAL</div>
          !IBI.FIL.CHART2;
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-6 bscell">
      <div class="card" id="card3">
        <div class="front">
          <div class="title">Report for &Ctry3.EVAL</div>
          !IBI.FIL.REPORT3;
        </div>
        <div class="back">
          <div class="title">Chart for &Ctry3.EVAL</div>
          !IBI.FIL.CHART3;
        </div>
      </div>
    </div>
    <div class="col-sm-6 bscell">
      <div class="card" id="card4">
        <div class="front">
          <div class="title">Report for &Ctry4.EVAL</div>
          !IBI.FIL.REPORT4;
        </div>
        <div class="back">
          <div class="title">Chart for &Ctry4.EVAL</div>
          !IBI.FIL.CHART4;
        </div>
      </div>
    </div>
  </div>
</div>
</body>
</html>
-HTMLFORM END


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Master
posted Hide Post
I admit, that's cool to watch, but all that just so you can make something flip? How well does that flip work on mobile, anyone test that? I think I'd rather just use two lines of JavaScript to Hide one DIV and Show another in it's place, on click. Maybe it's me, but as an end user, I would only be impressed with it for the first few weeks. After that, I'm looking for results and not be forced to wait on the cool factor to get my results.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Expert
posted Hide Post
quote:
I think I'd rather just use two lines of JavaScript to Hide one DIV and Show another in it's place

Ah! The good old days when that sufficed. Smiler

The only reason for posting was to provide an example of both bootstrap use and flip (which was asked a short while ago).

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Master
posted Hide Post
Haha.. Well, yea! I remember a day when everyone was creating animated GIFs all over the pages, because that was the cool thing to do. Then people realized, the end user can't focus on what they needed to, because animation kept pulling their focus away and it was sucking up all the bandwidth. Good ole T1 days. If we look at google, why do you think they don't have all kinds of animation on their site. They have enough money and bandwidth. I just went to google to see if they used any jquery or bootstrap and noticed there are 183k bytes on their home page, just to show an logo image, a searchbox with two buttons, and a couple of links. People make the simplest things way to complex. The more you add, the more your going to work to maintain it.

In 2000 a company asked me to write a website, web application, and shopping cart using ASP Classic and a app demo in Flash. They refuse to let anyone touch it, because it's not broken and still have it up and running today. Something to be said about good code and not overwhelm it with fluff that will not work next year.

@Tony FYI, I did save off your code in my repository, just in case. It is cool for a little bit. Smiler



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Expert
posted Hide Post
One of the selling features of App Studio Canvas is "Animations", as if that is the end-all of HTML pages. I agree with Gavin that the user might be impressed, but the coolness factor rapidly dies off.


Francis


Give me code, or give me retirement. In FOCUS since 1991

Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
 
Posts: 10577 | Location: Toronto, Ontario, Canada | Registered: April 27, 2005Report This Post
Master
posted Hide Post
FYI, I ran across something quite interesting.

I've made it as simple as I can.

Pure CSS, Flip. No Bootstrap, No JQuery, no JQuery Flip JS files.

http://jsfiddle.net/gavinlandon/dez5fs7m/



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
Excellent thread OP and contributors.

I've been kicking the tires on a WebFOCUS/Bootstrap mashup for a bit.

Here is an example of using the following three Bootstrap features:
1. Grid System CSS.
2. Table CSS.
3. Panel Component.

Screen shots at a couple of different screen sizes/zoom levels..

Screen shot 1:


Screen shot 2:


Code:
SET PAGE = OFF
TABLE FILE CAR
 SUM DEALER_COST AS 'Dealer Cost'
     RETAIL_COST AS 'Retail Cost'
 BY  COUNTRY     AS 'Country'
 BY  CAR         AS 'Car'
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD1 FORMAT HTMTABLE
ON TABLE SET STYLE *
ENDSTYLE
END
-RUN
-*
TABLE FILE CAR
 SUM SALES/I9C AS 'Sales'
 BY  COUNTRY   AS 'Country'
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD2 FORMAT HTMTABLE
END
-RUN
-*
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
 $('table').each(function(){
    $(this).prepend('<thead></thead>');
    $(this).find('thead').append($(this).find("tr:eq(0)"));
    $(this).find('tr:first td').wrapInner('<div />').find('div').unwrap().wrap('<th/>');
    $(this).addClass("table table-striped table-bordered table-hover table-condensed");
 });
});
</script>
</head>
<body>
<div class="container-fluid">
 <div class="row">
    <div class="col-md-8">
     <div class="panel panel-primary">
      <div class="panel-heading">Cost Report</div>
      <div class="panel-body">!IBI.FIL.HLD1;</div>
     </div>
    </div>
    <div class="col-md-4">
	 <div class="panel panel-primary">
      <div class="panel-heading">Sales Report</div>
      <div class="panel-body">!IBI.FIL.HLD2;</div>
     </div>
   </div>
 </div>
</div>
</body>
</html>
-HTMLFORM END
-EXIT  

This sample uses jQuery to perform the following two actions (as Clayton suggested above, I replaced his JavaScript with jQuery):
* Wrap a THEAD tag around the first row.
* Convert the tr tag to a th tag for the first row.

For sure we all have been, and will continue to, build fantastic web applications with WebFOCUS, and without Bootstrap.

I am thinking that if we every get a requirement, to integrate WebFOCUS and Bootstrap for a particular web application, we should be in pretty good shape.

For those of you who haven't had a chance to look at Bootstrap yet, you should know that while this example and the OP's example deals with table formatting, this type of formatting only one small part of the Bootstrap HTML/JavaScript/CSS framework.

This message has been edited. Last edited by: David Briars,




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Platinum Member
posted Hide Post
This is slick. Thanks for the example!


webFOCUS 8207.15
WindowsServer 2019
 
Posts: 120 | Location: Minnesota | Registered: August 26, 2013Report This Post
Master
posted Hide Post
No bootstrap or jquery and it's mobile responsive. I like to call this, "NO BS"... For BootStrap of course.




SET PAGE = OFF
TABLE FILE CAR
 SUM DEALER_COST AS 'Dealer Cost'
     RETAIL_COST AS 'Retail Cost'
 BY  COUNTRY     AS 'Country'
 BY  CAR         AS 'Car'
-*ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD1 FORMAT HTMTABLE
END
-RUN

TABLE FILE CAR
 SUM SALES/I9C AS 'Sales'
 BY  COUNTRY   AS 'Country'
-*ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS HLD2 FORMAT HTMTABLE
END
-RUN

-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
<style>
	body {font-family: Arial; font-size: 9pt;}
	table {border-spacing: 0px; border: 1px; width: 100%; }
	td {border: .1em solid #F0F0F0; margin: 0px; padding: 5px; spacing: 0px;}
	tr:hover {background-color: #f0f0f0}
	table tr:nth-child(odd) {color: #000; background: #F9F9F9}
	table tr:nth-child(even) {color: #000; background: #FFF}
	table tr:hover { background-color: #ffffbb; }
	table tr:first-child { border: .1em solid #ccc; background-color: #ccc; font-weight: bold;}

	.panel-primary {border-top-left-radius: 10px; border-top-right-radius: 10px; float: left; margin: 10px; border: 1px solid #337AB7; padding: 0px;}
	.panel-heading {border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #337AB7; color: #fff; padding: 10px; font-weight: bold; font-size: 14px;}
	.panel-200 {width: 95%; min-width: 200px; max-width: 600px;}
	.panel-400 {width: 95%; min-width: 400px; max-width: 600px;}
</style>
</head>
<body>
	<div class="panel-primary panel-400">
		<div class="panel-heading">Cost Report</div>
		<div class="panel-body">!IBI.FIL.HLD1;</div>
	</div>
	<div class="panel-primary panel-200">
		<div class="panel-heading">Sales Report</div>
		<div class="panel-body">!IBI.FIL.HLD2;</div>
	</div>
</body>
</html>
-HTMLFORM END
-EXIT

This message has been edited. Last edited by: GavinL,



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Pretty cool GavinL!

Now the next question would be can you make the 2nd, 3rd, nth columns stack under their sort BY column if the window gets phone resolution small? Maybe even make those columns only show if you click on the sort field they belong to?

That's what I've been trying to get to work for a while. Can't seem to figure it out. It'd be nice if it was possible w/o frameworks. Maybe IBI will implement it eventually.


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Virtuoso
posted Hide Post
The next steps are:

Move the contents of that style-tag into a common CSS file, so that you don't need to update a gazillion fex files to update your styling to a new standard.
table.css
body {font-family: Arial; font-size: 9pt;}
table {border-spacing: 0px; border: 1px; width: 100%; }
td {border: .1em solid #F0F0F0; margin: 0px; padding: 5px; spacing: 0px;}
tr:hover {background-color: #f0f0f0}
table tr:nth-child(odd) {color: #000; background: #F9F9F9}
table tr:nth-child(even) {color: #000; background: #FFF}
table tr:hover { background-color: #ffffbb; }
table tr:first-child { border: .1em solid #ccc; background-color: #ccc; font-weight: bold;}

.panel-primary {border-top-left-radius: 10px; border-top-right-radius: 10px; float: left; margin: 10px; border: 1px solid #337AB7; padding: 0px;}
.panel-heading {border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #337AB7; color: #fff; padding: 10px; font-weight: bold; font-size: 14px;}
.panel-200 {width: 95%; min-width: 200px; max-width: 600px;}
.panel-400 {width: 95%; min-width: 400px; max-width: 600px;}


Move the HTML head into a separate HTML file to include using -HTMLFORM head. Or better yet, a fex as well:
reporthead.fex
-DEFAULT &REPORTTITLE = 'WebFOCUS Report';
-DEFAULT &SITESTYLE = '/approot/common/table.css';
-HTMLFORM reporthead.html

reporthead.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>!IBI.AMP.REPORTTITLE;</title>
<link rel="stylesheet" type="text/css" href="!IBI.AMP.SITESTYLE;">


I left out the </head> on purpose, as adding it makes it impossible to add other tags to the head section, such as more CSS includes, javascript, meta tags (for caching control, for example), etc.

To use it in a fex:
-SET &REPORTTITLE = 'Gavin's pretty tables';
-INCLUDE reporthead
-HTMLFORM BEGIN
</head>
<body>
<div class="panel-primary panel-400">
		<div class="panel-heading">Cost Report</div>
		<div class="panel-body">!IBI.FIL.HLD1;</div>
	</div>
	<div class="panel-primary panel-200">
		<div class="panel-heading">Sales Report</div>
		<div class="panel-body">!IBI.FIL.HLD2;</div>
	</div>
</body>
</html>
-HTMLFORM END


Additional note: using -EXIT at the end of a fex is apparently considered bad form, as it aborts execution of the procedure immediately (as opposed to the fex just ending, it's not the same!).
If you would have wanted to use such a report in RCaster for example, RCaster will not log any errors that might happen in the fex because -EXIT aborts it before the logging happens, or something like that. IBI explained it to me, but it's so weird...


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Master
posted Hide Post
quote:
can you make the 2nd, 3rd, nth columns stack under their sort BY column if the window gets phone resolution small?


It's possible, but wouldn't look very pretty on mobile. I would suggest not putting as many columns in it. You cannot do it with an !IBI.FIL.HLD1;. You would have to create a loop and write the HTML yourself. Each of the columns would have their own DIV and each of them would have to use a FLOAT: LEFT, "Which by the way is what makes it Mobile Responsive.", except for the first column of each row.

If I have some time, I'll attempt to create a demo, though it's a lot more code.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Virtuoso
posted Hide Post
Wep5622,

Thanks for the code restructuring examples. Those are some good points.

GavinL,

Thanks for your insights. I would love a demo, but don't feel obligated or rushed. Whenever you get to it. It would be great to have it though because I'm (and probably a bunch of others on here are) not too good with piecing together how to go about doing this kind of thing.

Really appreciate your help over the last little while with this and the other topic thread(s) you've chimed in on.


8.2.02M (production), 8.2.02M (test), Windows 10, all outputs.
 
Posts: 1113 | Location: USA | Registered: January 27, 2015Report This Post
Master
posted Hide Post
quote:
Play and enjoy(?)


Tony, I think someone changed bootstrap.js on the server your point at. I pulled it up today to show someone and it failed. When looking at the console, it says bootstrap requires a higher version of jquery that what is on our server, which it didn't do before. I then changed it to use
https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js
.

That worked, but now I'm getting other errors. I copied over and pasted your code again, thinking I messed something up. Still getting errors.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Expert
posted Hide Post
Hi Gavin,

Just ran it and it works in IE11 and Chrome 46.0 (on Windows 10) but in dev tools on Chrome I see -

Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher

Changed the jQuery to the one that you quoted and it still runs OK but no error in Chrome console.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report 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     [SHARING] Adding Bootstrap style to WebFOCUS Tables

Copyright © 1996-2020 Information Builders