 |
|||||
|
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
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 WebFOCUS/FOCUS Forum on Focal Point [SHARING] Adding Bootstrap style to WebFOCUS Tables
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [SHARING] Adding Bootstrap style to WebFOCUS Tables Read-Only TopicGo | Search | Notify | Tools |
| [SHARING] Adding Bootstrap style to WebFOCUS Tables | Login/Join |
| Member |
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 | ||
|
| Virtuoso |
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. | |||
|
| Member |
Your welcome CoolGuy!  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 | |||
|
| Virtuoso |
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. | |||
|
| Master |
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 | |||
|
| Expert |
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"?
| |||||
|
| Master |
Where is the like button??  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 | |||
|
| Master |
-* 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.
| ||||
|
| Member |
@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 | |||
|
| Master |
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 | |||
|
| Expert |
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(?) -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 ENDT
| |||||||||
|
| Master |
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 | |||
|
| Expert |
Ah! The good old days when that sufficed. The only reason for posting was to provide an example of both bootstrap use and flip (which was asked a short while ago). T
| |||||||||
|
| Master |
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. - FOCUS Man, just FOCUS! ----------------------------- Product: WebFOCUS Version: 8.1.04 Server: Windows 2008 Server | |||
|
| Expert |
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 | |||
|
| Master |
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 | |||
|
| Master |
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,
| ||||
|
| Platinum Member |
This is slick. Thanks for the example! webFOCUS 8207.15 WindowsServer 2019 | |||
|
| Master |
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 | |||
|
| Virtuoso |
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. | |||
|
| Virtuoso |
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 : | |||
|
| Master |
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 | |||
|
| Virtuoso |
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. | |||
|
| Master |
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 | |||
|
| Expert |
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
| |||||||||
|
| Powered by Social Strata |
 | Please Wait. Your request is being processed... |
Read-Only TopicFocal Point Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [SHARING] Adding Bootstrap style to WebFOCUS Tables
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [SHARING] Adding Bootstrap style to WebFOCUS TablesCopyright © 1996-2020 Information Builders
| View $GS_USERNAME's Public Profile |
| Add $GS_USERNAME to my Ignore List |
| View Recent Posts by $GS_USERNAME |
| Notify me of New Posts by $GS_USERNAME |