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

Products

• Gen
• Gen - Workstation Toolset
• Gen - Host Encyclopedia
• Gen - Run Time Distributed

Issue/Introduction

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>