Embedded Files
We can easily customize WOW generated web pages using a few lines of simple JavaScript code like JQuery. For example, you may want to color certain table cells based on data or may want to show blank when data has zero value or may even want to hide certain rows or columns. This section demonstrates some of the WOW operations having embedded JavaScript to generate desired effect. The JavaScript snippet needs to be copied into Instructions text area under ‘Basic’ section of WOW operation page.
If your requirement is similar, you may copy the code from this document and make minor changes to tailor your needs. You are expected to have basic knowledge of HTML, JQuery/JavaScript and CSS. In case, you are not too familiar, please go through books or online reference materials or you may refer w3school web pages.
http://www.w3schools.com/html/
http://www.w3schools.com/jquery/
Note: JQuery 1.10.1 is already included in the WOW page.
Change Cell Background color
This example shows how JQuery can be used in WOW generated web page to change table cell color based on value. In this example, we will show cell color in yellow, when the salary is greater than 80,000. To achieve this goal, edit the operation that generates the page. Under Basic section, instructions text area, provide below JQuery JavaScript.
<Script>
$( document ).ready(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 80000;
})
.css('background-color', 'yellow');
});
</script>
Please note that the JavaScript code should be surrounded by <script> tag. The UI can't be manipulated safely using JavaScript until the document is "ready." jQuery detects this state of readiness using ready function. Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.
SALARYFLD is the style class declared in Field Descriptor (FD) Display Settings for Salary field as shown in the below screen shot.
JQuery refers the DOM object using “.” followed by class name. When the expression within filter returns true, the CSS gets applied on parent of Salary column. That is nothing but the entire row. The Filter command will return elements that are matching filter expression. So, in the below code, the expression returns true, if the Salary in the cell is greater than 80000. If the value is blank and less than 80000, the expression returns false. If the expression is true, it will apply CSS with cell background color changing to yellow.
The above script can be typed inside Instructions text area or can be typed on any text editor like notepad and then copy and paste into the Instructions text area. The below screenshot shows the script. Click Update operation button to save the script.
When you run the operation, you will notice the change in cell color of Salary column as shown below.
Highlight the entire row
The below JQuery code highlights the entire row when salary is greater than 90000
<Script>
$( document ).ready(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 90000;
})
.parent()
.css({'background-color':'gray', 'font_size': '20px', width : '30px',
height : '50px' , 'font-weight': 'bold'});
});
</script>
The below screenshot shows WOW operation having script inside Instruction text area
The generated UI is screen is as shown below.
Animate
The below JQuery code animates Salary column when Salary value is greater than 80000.
<Script>
$( document ).ready(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 80000;
})
.animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 5500 );
});
</script>
The below screenshot shows WOW operation having script inside Instruction text area
When the Operation is run, the Salary cells having values above 80000 gets animated as shown below
Blink
The below JQuery code blinks Salary column when Salary value is greater than 80000.
<Script>
$( document ).ready(function() {
function blink(){
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 80000;
})
.delay(150).fadeOut(1000).delay(150).fadeIn(1000);
}
setInterval(blink,500);
});
</script>
The below screenshot shows WOW operation having script inside Instruction text area
Fade out
The below JQuery code fades out Salary column when Salary value is greater than 80000.
<Script>
$( document ).ready(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 80000;
})
.fadeOut();
});
</script>
The below screenshot shows WOW operation having script inside Instruction text area
Date comparision
The below script colors certain cells based on date value. It colours Hire Date cell in blue if in the future, green if Hire Date = Current Date and red if in the past.
<Script>
$( document ).ready(function() {
var curDateTime = new Date();
var curDate = curDateTime.setHours(0,0,0,0);
$('.HIREDATEFLD')
.filter(function() {
if($(this).html().length == 0){
return false;
}else{
var hireDate = new Date($(this).html());
hireDate.setHours(0,0,0,0);
return hireDate > curDate;
}
})
.css('background-color', 'blue');
$('.HIREDATEFLD')
.filter(function() {
if($(this).html().length == 0){
return false;
}else{
var hireDate = new Date($(this).html());
hireDate.setHours(0,0,0,0);
return hireDate.getMonth() == curDateTime .getMonth() && hireDate.getDate() == curDateTime .getDate() && hireDate.getFullYear() == curDateTime .getFullYear();
}
})
.css('background-color', 'green');
$('.HIREDATEFLD')
.filter(function() {
if($(this).html().length == 0){
return false;
}else{
var hireDate = new Date($(this).html());
hireDate.setHours(0,0,0,0);
return hireDate < curDate;
}
})
.css('background-color', 'red');
});
</script>
HIREDATEFLD is the style class declared in Field Descriptor (FD) Display Settings for Salary field as shown in the below screen shot.
The below screen shot shows Instruction text area having the Javascript
The below screen shot shows generated WOW page.
Change display value
The display value of cell can be changed based on certain condition. In the below example, we will change Salary value to “Too much”, if salary > 90000
<Script>
$( document ).ready(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 90000;
})
.html('<h3> Too much </h3>');
});
</script>
The same script is shown inside Instructions text area as below
The generated UI is shown below
Display graphics/icons
It is possible to show graphics or icons based on data. The below example shows '$' icon next to “Too much” text, if Salary > 90000.
<Script>
$( document ).ready(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 90000;
})
.html('<h3> Too much </h3> <image src="<replace with your image icon URL>" style="width:20px;height:20px;"/> ');
});
Note: The src attribute value of <image> tag can refer an external image URL or can point to local image file within WOW app folder. Image file can be be placed inside images folder within user folder.
The generated UI is as shown below.
Show/Hide columns
If data table has too many columns and you would like to hide certain unimportant columns, then it can be achieved using JQuery toggle. The below script shows 2 Toggle buttons. The first button toggles Salary column. The second button toggles 5th and 6th columns. The sample script can be modified to toggle any number of columns. When the button is clicked first time, it hides the column(s), when the same button is clicked again, it shows the hidden column(s) back.
<Script>
$( document ).ready(function() {
$("<input type='button' id='toggleSingle' value='Toggle Salary' />").insertBefore($('#resultsA-inner'));
$("<input type='button' id='toggleMultiple' value='Toggle Un-important columns' />").insertBefore($('#resultsA-inner'));
$("#toggleSingle").click(function() {
$('td:nth-child(6),th:nth-child(6)').toggle();
});
$("#toggleMultiple").click(function() {
$('td:nth-child(5),th:nth-child(5)').toggle();
$('td:nth-child(6),th:nth-child(6)').toggle();
});
});
</script>
The same script is shown inside Instructions text area as below
The generated UI is as shown below.
Show/Hide Rows
If the table displays many records and you would like to view certain records and hide the rest, then using JQuery, row filter can be applied. In the below example, we will show records with Salary > 80000 by clicking ‘Show High Salary’ button at the top of the table.
<Script>
$( document ).ready(function() {
$("<input type='button' id='toggleRow' value='Show High Salary' />").insertBefore($('#resultsA-inner'));
$("#toggleRow").click(function() {
$('.SALARYFLD')
.filter(function() {
var text = $(this).html();
return $.trim($(this).text()).length == 0 || parseFloat(text) < 80000;
})
.parent().toggle();
});
});
</script>
The same script is shown inside Instructions text area as below
When ‘Show High Salary’ is clicked, the table shows employee record with Salary > 80000
When the same button is clicked again, it shows all records back.
TODO: PH Review above samples
Disable Edit/Delete record
We can disable ‘Edit Record’ and ‘Delete Record’ options on table rows using JQuery script as shown below.
<Script>
$( document ).ready(function() {
$("a img[title='Edit Record']").parent().css('pointer-events', 'none');
$("a img[title='Delete Record']").parent().css('pointer-events', 'none');
});
</script>
Now, when you click on ‘Edit Record’ or ‘Delete Record’ icons, nothing happens as they are disabled.
Note: Instead of setting CSS pointer-events to none, the ‘Edit Record’ and ‘Delete Record’ icons can be hidden using hide() JQuery function.
11. Enabling Checkboxes
When boolean fields are rendered in a list (row collection) they are tagged in HTML as disabled because we can't allow them to be changed. The disabled attribute make the checkboxes somewhat hard to read. The following JQuery can be used to make them more visible by enabling them but making them not clickable.
<Script>
$( document ).ready(function() {
$(":checkbox").removeAttr('disabled');
$(":checkbox").click(function () { return false; });
});
</script>
Setting a Busy Cursor for Button Presses:
<script>
$( document ).ready(function() {
$( "input[name='Run Action']" ).click(function() {
$("*").css("cursor", "progress");
});
});
</script>
This script finds a Input (button) with the name 'Run Action" and when clicked, sets the screen to a busy cursor.
To use in your own operations, change 'Run Action' to the name of your button.
Working with Fields with Associations or Hover Panel:
Working with Fields with Associations or Hover Panel:
When attaching an association or hover help to a field, the actual field value being evaluated gets enclosed in a CHILD element of the parent TD.
With hover panel attached, the value gets included inside a HTML SPAN element so this script gets the child span:
<Script>
$( window ).load(function() {
$('.SALARYFLD > span ')
.filter(function() {
var text = $(this).html();
return parseFloat(text) > 80000;
})
.parent()
.css('background-color', 'yellow');
});
</script>
https://api.jquery.com/child-selector/
For just a normal association it would be: $('.SALARYFLD > a ')
Using JavaScript to produce your own Print records function:
Add the following to an operations Instructions:
<INPUT TYPE=BUTTON OnClick="PrintElem();" VALUE=" Print with javascript ">
<script>
function PrintElem()
{
var mywindow = window.open('', 'PRINT', 'height=400,width=900');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('<link rel="stylesheet" type="text/css" href="dataengine/themes/stealth /css/all.css"> ');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>' + document.title + '</h1>');
var data = document.getElementsByClassName("pjr-inner");
var tableData = data[0].innerHTML;
mywindow.document.write(tableData);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
mywindow.print();
mywindow.close();
return true;
}
</script>
This code creates a popup window and generates HTML by using the data table named "pjr-inner" for the content.
Adding Text Content Before and After an Element
Adding Text Content Before and After an Element
<script>
$(document).ready(function() {
$(".TAKE2").after("add your customText here");
});
</script>
<style>
.pjd-l-TAKE2::after {
content: " - Remember this";
color: red;
background: yellow;
}
Page updated
Report abuse