Workflow Data Page with Fixed Header Row

This article describes how to include an extension on your workflow data page. The workfow data pages use the DataTable Plugin. Most of the Extensions can be included using the same steps shown here although not all extensions are compatible or have been tested. 

To include the FixedHeader Extension, and make the header stay in position as you scroll, follow these steps:

First, Include the DataTables JavaScript on your workflow Page via the Profile "Head Includes" Property:

<script src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>

Next include this Custom CSS on the your Data Page

table.fixedHeader-floating{position:fixed !important;background-color:white}table.fixedHeader-floating.no-footer{border-bottom-width:0}table.fixedHeader-locked{position:absolute !important;background-color:white}@media print{table.fixedHeader-floating{display:none}}

And Finally, on the same Data Page add the JavaScript shown below to the Opening Content.  This code will run when the page loads and apply the FixedHeader functionality.

<script>
$(document).ready(function() {
 var table=workFlow.curPage.layoutTemplate.styleInstance.getDataTable();
 new $.fn.dataTable.FixedHeader(table, {
 });
});
</script>

Once you've done that, you can save and view your changes!