Hi, I was wondering if it is possible to set up a visualisation data grid with column widths change so the data grid fills the width of the whole screen? This manages to work with html reports by setting the wrap attribute to an appropriate amount (e.g. 5) and setting the htmlcss to on.

I know the WRAP attribute doesn't work with active reports, but there must be a way for example making a visualisation work like a html report instead of as an active report?

I'm open to any solutions at the moment.

This message has been edited. Last edited by: FP Mod Chuck,

Hi Alexander,

Try AUTOFIT (ON) to your AHTML report ,

 TABLE FILE COURSE
BY  COURSE.CRSELIST.CTITLE
BY  COURSE.CRSELIST.SOURCE
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET ASNAMES ON
ON TABLE NOTOTAL
ON TABLE PCHOLD FORMAT AHTML
ON TABLE SET AUTOFIT ON
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
     INCLUDE = IBFS:/EDA/EDASERVE/_EDAHOME/ETC/warm.sty,
$
ENDSTYLE
END
 

Hi Chaudhary, it works for active report but not for visualisation data grid, unless i'm missing a trick?

quote:

visualisation data grid, unless i'm missing a trick

Please share your sample code here

Sure. This is for the visualisation

 
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET SQUEEZE=ON
-DEFAULTH &WF_HTMLENCODE=ON;
SET HTMLENCODE=&WF_HTMLENCODE

SET HTMLCSS=ON
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET COMPONENT=TableChart_1
-*component_type graph
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE testing/jc_orders
-* Created by Info Assist for Graph
BY JC_ORDERS.T2_INVENTORY.PRODUCTNUMBER
BY JC_ORDERS.T2_INVENTORY.PRODUCTTYPE
BY JC_ORDERS.T2_INVENTORY.PRODUCTCATEGORY
BY JC_ORDERS.T2_INVENTORY.PRODUCTNAME
HEADING
""
ON GRAPH PCHOLD FORMAT AHTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON GRAPH SET UNITS INCHES
ON TABLE SET AUTOFIT ON
ON GRAPH SET LOOKGRAPH DATAGRID
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Flat.sty,$
TYPE=REPORT, TITLETEXT='Grid1', ORIENTATION=LANDSCAPE, PAGESIZE=A3, AR_SHOW_MENUBAR=POPOUT, ARREPORTSIZE=DIMENSION, ARFILTER_TARGET='*', ARGRAPHENGINE=JSCHART, $
TYPE=DATA, COLUMN=N1, BUCKET=row, $
TYPE=DATA, COLUMN=N2, BUCKET=row, $
TYPE=DATA, COLUMN=N3, BUCKET=row, $
TYPE=DATA, COLUMN=N4, BUCKET=row, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"agnosticSettings": {
    "chartTypeFullName": "DataGrid"
}

*END
ENDSTYLE
END

COMPOUND END





 

and this is for the working active report example

  


ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET SQUEEZE=ON
-DEFAULTH &WF_HTMLENCODE=ON;
SET HTMLENCODE=&WF_HTMLENCODE

SET HTMLCSS=ON
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

-DEFAULTH &WF_SUMMARY='Summary';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
TABLE FILE testing/jc_orders
BY JC_ORDERS.T2_INVENTORY.PRODUCTNUMBER
BY JC_ORDERS.T2_INVENTORY.PRODUCTTYPE
BY JC_ORDERS.T2_INVENTORY.PRODUCTCATEGORY
BY JC_ORDERS.T2_INVENTORY.PRODUCTNAME
ON TABLE PCHOLD FORMAT AHTML
ON TABLE NOTOTAL
ON TABLE SET CACHELINES 100
ON TABLE SET AUTOFIT ON
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Flat.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, SUMMARY=&WF_SUMMARY.QUOTEDSTRING, ORIENTATION=LANDSCAPE, PAGESIZE=A3, HFREEZE=OFF, WRAP=OFF, ARGRAPHENGINE=JSCHART, $
TYPE=DATA, COLUMN=N1, SIZE=18, $
ENDSTYLE
END

-RUN

If you are on 8201M or later, then download the HTML5 chart extension called Datatables Grid, and it will build a responsive grid based off of the https://datatables.net/ jQuery Plugin. Along with the responsiveness, it includes paging buttons at the bottom and a search box feature.

If you don't have this option, then you can always create your table and hold it as an HTMTABLE. Then use the -HTMLFORM BEGIN and use the datatables.net plugin by referencing it in <script> tags. This way carries the advantage of being able to have more control over the datatables options and of the formatting using CSS. It does require a little jQuery in order to assign a class name to the tag and move the title into a and the totals into a for it to work properly, since IBI doesn't believe in using a or in their HTML tables.

Below is an example of how to implement it using the CAR file, along with some of the custom styling that we use. That said, I would avoid using WF styling and just use it to create classes and then style those classes using CSS:

  
TABLE FILE CAR
SUM RETAIL/D12M
BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
BY CAR.CARREC.MODEL
BY CAR.BODY.BODYTYPE
ON TABLE HOLD FORMAT HTMTABLE
ON TABLE RECOMPUTE
ON TABLE SET NODATA ''
ON TABLE SET BYDISPLAY ON
ON TABLE SET PAGE-NUM OFF
ON TABLE SET ONLINE-FMT HTML
ON TABLE SET STYLE *
TYPE=REPORT, LINES-PER-PAGE=UNLIMITED,$
TYPE=TITLE, CLASS='TblHead', $
TYPE=DATA,  CLASS='TblData', $
TYPE=GRANDTOTAL, CLASS='GndTot', $
ENDSTYLE
END
-RUN

-HTMLFORM BEGIN
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<style type="text/css">
	.TblData, .TblHead, .GndTot, table {
		border-style: none;
	}
	.dataTables_wrapper {
		font-family: Trebuchet MS;
		border-style: none;
	}
	table.dataTable thead th,
	table.dataTable thead td {
		font-size: 10pt;
		font-weight: bold;
		color: #000;
		background-color: #fff
		border-style: none;
	}
	table.dataTable tbody tr,
	table.dataTable tbody td {
		font-size: 9pt;
		color: #000;
		overflow-wrap: break-word;
		border-style: none;
	}
	.GndTot{
		font-size: 10pt;
		font-weight: bold;
		color: #fff;
		background-color: #777;
		border-style: none;
	}
	table.dataTable.stripe tbody tr.odd,
	table.dataTable.display tbody tr.odd{
		background-color:#ebebf0
	}
	table.dataTable.hover tbody tr:hover,
	table.dataTable.display tbody tr:hover{
		background-color:#f2cdcd
	}
</style>
<body>
	!IBI.FIL.HOLD;
</body>
<script type="text/javascript">
	$(".TblHead").closest("table").addClass("tbl_1 compact hover stripe")
	$(".tbl_1").prepend("<thead></thead>");
	$(".tbl_1").append("<tfoot></tfoot>");
	$(".TblHead").closest("tr").prependTo($("thead"));
	$(".TblHead").wrapInner('<th class="TblHead"></th>').contents().unwrap();
	$(".GndTot").closest("tr").prependTo($("tfoot"));
	$(".tbl_1").dataTable({
		"select": true,
		"scrollY": true,
		"scrollX": true,
		"sScrollXInner": "100%",
		"scrollCollapse": true,
		"lengthChange": true,
		"lengthMenu": [[5, 10, 15, -1], ["5", "10", "15", "All"]],
		"paging": true,
		"pagingType": "full_numbers",
		"info": true,
		"sDom": '<"top"fl>rt<"bottom"ip>',
		"pageLength": 5,
		"ordering": true,
	});
</script>


-HTMLFORM END

	Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015 IP

Ignored post by Hallway posted Show Post

Powered by Social Strata

Read-Only Topic