CA Gen Web Generation calendar control fails to load in Web View

Document ID : KB000100987
Last Modified Date : 17/06/2018
Show Technical Document Details
Issue:
An HTML Control containing JavaScript to display a Gen Date field as a Calendar control loads the control successfully for Web Generation but fails to load in Web View with a 'null' related JavaScript error. For example the Procedure Step/Window TEST_SCREEN has a Date field with name GEN_DATE and the HTML Control HTMLControl1 contains : 
<script> 
window.onload = function(){ 
document.getElementById('GEN_DATE').type = 'DATE'; 

</script> 


The browser Developer Console shows a JavaScript error e.g.
1. Chrome:
Uncaught TypeError: Cannot set property 'type' of null 
at window.onload (TEST_SCREEN_HTMLControlFrame_HTMLControl1.html:3)


2. Firefox:
TypeError: document.getElementById(...) is null 
Environment:
Gen 8.x Web View 
Cause:
For Web View each HTML Control and HTML Text element is rendered in a separate <iframe> tag in the HTML document and the objects outside of this iframe have to be accessed differently. Hence the 'null' related JavaScript error received at runtime. 
Also the Web View controls do not use the same ID naming conventions as Web Generation and hence need to change 'document.getElementById' to 'parent.document.getElementsByClassName'.
This Gen 8.6 documentation link has information on the above: 
https://docops.ca.com/ca-gen/8-6/en/developing/designing/using-gen-studio/working-with-web-view/using-existing-models-in-web-view#UsingExistingModelsinWebView-HTMLControlandHTMLText 
Resolution:
Engineering suggested using this JavaScript for the Web View Calendar control which then loads successfully: 
<script> 
window.onload = function(){ 
var elements = parent.document.getElementsByClassName('GEN_DATE'); 
for(var i = 0, length = elements.length; i < length; i++) { 

elements[i].type = 'DATE'; 


</script>