Make readonly/Disable ui page

[Rj27]

Hi All,
I need to disable a ui page which is triggered but based on certain condition.
Points to consider:

1. Alert page is displayed when user clicks 'approve n send' and expected review time is not met.
2. In my current setup, when user cancel on Alert page, validation page reloads. 
3.When ui page 2 - 'Alert' is displayed, ui page 1 'validation' should be disabled. 
Reason to do this is at the moment the fields are editable even if page 2 loads.

My question - How can we disable the validation page when alert page loads ?

[Rj27]

Hi Maik,

To debug i have commented my entire code and written just one loc when approve and send button is clicked . So ideally now it should work i guess, but it is'nt .
I m trying this:
in html part of validation page:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<j:set var="jvar_email" value="${JS:RP.getWindowProperties().get('email_ids')}" />
<j:set var="jvar_ccemail" value="${JS:RP.getWindowProperties().get('ccemail_ids')}" />
<j:set var="jvar_bccemail" value="${JS:RP.getWindowProperties().get('bccemail_ids')}" />
<j:set var="jvar_blacklist" value="${JS:RP.getWindowProperties().get('bclist_ids')}" />
<j:set var="jvar_sys_id" value="${JS:RP.getWindowProperties().get('sys_id')}" />
<j:set var="jvar_subject" value="${JS:RP.getWindowProperties().get('subject')}" />

<g:evaluate jelly="true" object="true" var="jvar_initialTime">
var gdt = new GlideDateTime().getNumericValue();
gdt;
</g:evaluate>

<input type="hidden" name="hiddenValue" id="hiddenValue" value="${jvar_initialTime}"/>
<style>
td, th {
padding: 6px;
}
#bpo_message{
position: absolute;
z-index: 1050;
left: 108px;
top: 0px;
visibility: visible;
width: 750px;
height: 300px;
}
</style>

<h2 style="text-align: center;"><span style="color: #000000;"><strong>$[SP]Validation$[SP]</strong></span></h2>
<p style="text-align: left;"><span style="color: #000000;"> Please review the items below and check each box to indicate your consent that each item is valid and appropriate. Cancel if you need to return to the email and change any of these items.</span></p>

<div align="center">
<form id='emailForm'>
<table border="3px" cellspacing="2" cellpadding="0" id="emailIdList" style="width: 70%;">

<g:evaluate var="jvar_email_array" jelly='true'>
var emailIdArray = '${jvar_email}';
var array = emailIdArray.split(",");
var loopcount = 0;
var length = 0;
if(JSUtil.nil(emailIdArray))
length = 0;
else length = array.length;
array;
</g:evaluate>
<j:if test="${length &gt; 0}">
<tr class="header">
<td style="width: 5%;"><input id='select_all' name='select_all' type='checkbox' onclick="allSelect()" /></td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Type")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Address")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Name")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Company")}</td>
</tr>
<j:while test="${loopcount &lt; length}">
<g:evaluate>
var blackListedEmail = '${jvar_blacklist}';
var isBlackListed = 0;
var emailId = array[${loopcount++}];
var sysId = array[${loopcount-1}];
if(emailId.indexOf('@')==-1){
var userGR = new GlideRecord('sys_user');
if(userGR.get(emailId)){
sysId =userGR.sys_id;
emailId = userGR.email;
var name = userGR.getDisplayValue();
var company = userGR.company.getDisplayValue();
}
}
else{
var name = 'UNKNOWN';
var company = 'UNKNOWN';
}
if(blackListedEmail.indexOf(emailId)!=-1){
isBlackListed = 1;
}
if(new emailUTILAjax()._validateWhiteLIst(emailId)=='yes')
var isWhileListed = true;
else
var isWhileListed = false;

if(new emailUTILAjax().CheckemailList(emailId)=='yes'){

var isWhileListed = true;

}
</g:evaluate>
<!-- ${isWhileListed} -->
<j:if test="${isBlackListed &lt; 1}">
<tr class="odd">
<td style="width: 5%;">
<j:if test='${isWhileListed}'>
<!-- <input id='TO_${sysId}' name='TO_${sysId}' type='checkbox' checked='true'/> -->
<input id='TO_${sysId}' name='TO_true' type='checkbox' checked='true'/>
<!-- var trueValues= document.querySelectorAll('input[type="checkbox"]:checked').length); -->
</j:if>
<j:if test='${!isWhileListed}'>
<input id='TO_${sysId}' name='TO_false' type='checkbox' />
</j:if>
</td>
<td >TO</td>
<td>${emailId}</td>
<td>${name}</td>
<td>${company}</td>
</tr>
</j:if>
</j:while>
</j:if>
<g:evaluate var="jvar_ccemail_array" jelly='true'>
var ccemailIdArray = '${jvar_ccemail}';
var ccarray = ccemailIdArray.split(",");
var cclength = 0;
var ccloopcount = 0;
if(JSUtil.nil(ccemailIdArray))
cclength = 0;
else cclength = ccarray.length;
ccarray;
</g:evaluate>
<j:if test="${cclength &gt; 0}">

<j:while test="${ccloopcount &lt; cclength}">

<g:evaluate>
var blackListedEmail = '${jvar_blacklist}';
var isBlackListed = 0;
var ccemailId = ccarray[${ccloopcount++}];
var ccsysId = ccarray[${ccloopcount-1}];
if(ccemailId.indexOf('@')==-1){
var userGR = new GlideRecord('sys_user');
if(userGR.get(ccemailId)){
ccemailId = userGR.email;
ccsysId = userGR.sys_id;
var ccname = userGR.getDisplayValue();
var cccompany = userGR.company.getDisplayValue();
}
}
else{
var ccname = 'UNKNOWN';
var cccompany = 'UNKNOWN';
}
if(blackListedEmail.indexOf(ccemailId)!=-1){
isBlackListed = 1;
}

if(new emailUTILAjax()._validateWhiteLIst(ccemailId)=='yes')
var isWhileListed = true;
else
var isWhileListed = false;

if(new emailUTILAjax().CheckemailList(ccemailId)=='yes'){
var isWhileListed = true;
}

</g:evaluate>
<j:if test="${isBlackListed &lt; 1}">
<tr class="odd">
<td style="width: 5%;" >
<j:if test='${isWhileListed}'>
<input id='CC_${ccsysId}' name='CC_True' type='checkbox' checked='${isWhileListed}'/>
</j:if>
<j:if test='${!isWhileListed}'>
<input id='CC_${ccsysId}' name='CC_False' type='checkbox' />
</j:if>
</td>
<td >CC</td>
<td>${ccemailId}</td>
<td>${ccname}</td>
<td>${cccompany}</td>
</tr>
</j:if>
</j:while>
</j:if>

<g:evaluate var="jvar_bccemail_array" jelly='true'>
var bccemailIdArray = '${jvar_bccemail}';
var bccarray = bccemailIdArray.split(",");
var bccloopcount = 0;
var bcclength = bccarray.length;
if(JSUtil.nil(bccemailIdArray))
bcclength =0;
else
bcclength = bccarray.length;
bccarray;
</g:evaluate>

<j:if test="${bcclength &gt; 0}">

<j:while test="${bccloopcount &lt; bcclength}">

<g:evaluate>
var blackListedEmail = '${jvar_blacklist}';
var isBlackListed = 0;
var bccemailId = bccarray[${bccloopcount++}];
var bccsysid = bccarray[${bccloopcount-1}];
if(bccemailId.indexOf('@')==-1){
var userGR = new GlideRecord('sys_user');
if(userGR.get(bccemailId)){
bccsysid = userGR.sys_id;
bccemailId = userGR.email;
var bccname = userGR.getDisplayValue();
var bcccompany = userGR.company.getDisplayValue();
}
}
else{
var bccname = 'UNKNOWN';
var bcccompany = 'UNKNOWN';
}
if(blackListedEmail.indexOf(bccemailId)!=-1){
isBlackListed = 1;
}

if(new emailUTILAjax()._validateWhiteLIst(bccemailId)=='yes')
var isWhileListed = true;
else
var isWhileListed = false;


if(new emailUTILAjax().CheckemailList(bccemailId)=='yes'){
var isWhileListed = true;
}

</g:evaluate>
<j:if test="${isBlackListed &lt; 1}">
<tr class="odd">
<td style="width: 5%;" >
<j:if test='${isWhileListed}'>
<input id='BCC_${bccsysid}' name='BCC_True' type='checkbox' checked='${isWhileListed}'/>
</j:if>
<j:if test='${!isWhileListed}'>
<input id='BCC_${bccsysid}' name='BCC_False' type='checkbox' />
</j:if>
</td>
<td >${gs.getMessage("BCC")}</td>
<td>${bccemailId}</td>
<td>${bccname}</td>
<td>${bcccompany}</td>
</tr>
</j:if>
</j:while>
</j:if>

</table>
<br/><br/>
<input type='hidden' id='org_body' value='${jvar_body}'/>
<table border="3px" cellspacing="2" cellpadding="0" id="emailIdList" style="width: 70%;">
<tr class="header">
<td style="width: 5%;"></td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Type")}</td>
<td nowrap="true" class="column_head" align="center">${gs.getMessage("Value")}</td>
</tr>
<tr>
<td style="width: 5%;"><input id='subject' name='subject' type='checkbox'/></td>
<td style="width: 10%;" >Subject</td>
<td >${jvar_subject}</td>
</tr>
<tr>
<td style="width: 5%;"><input id='Body' name='Body' type='checkbox'/></td>
<td style="width: 10%;" >Body</td>
<td id='email_body' ></td>
</tr>

</table>
</form>
<button class="btn btn-default" id="cancel_button" onclick="onCancel();" style="min-width: 5em;" title="" type="submit">Cancel</button>$[SP]$[SP]
<button class="btn btn-primary" id="ok_button" onclick="return SendEmail_UI()" style="min-width: 5em;" title="" type="submit" data-original-title="">Approve &amp;$[SP] Send</button>
</div>
</j:jelly>


Client script:
function SendEmail_UI() {
//gel("emailForm").readonly="true";
//document.getElementById("emailIdList").setAttribute("disabled",true);

//document.getElementById("emailIdList").setAttribute("readonly / readOnly",true);

$j("#emailForm").attr("emailIdList", "true");
}

[Maik Skoddow]

Sorry, but the listing of very long source codes is not very helpful and cannot replace debugging.

But after having a look on your source code I'm wondering what you mean with "Client Script". If it is separated from your UI Page, it cannot work. You should insert the function SendEmail_UI() in your UI Page, like this:

<button class="btn btn-default" id="cancel_button" onclick="onCancel();" style="min-width: 5em;" title="" type="submit">Cancel</button>$[SP]$[SP]
<button class="btn btn-primary" id="ok_button" onclick="return SendEmail_UI()" style="min-width: 5em;" title="" type="submit" data-original-title="">Approve &amp;$[SP] Send</button>
</div>
<script>
function SendEmail_UI() {
  $j("#emailForm").attr("emailIdList", "true");
}
</script>
</j:jelly>

[Rj27 · Accepted solution]

Update on my question:
Solution:

In client script have passed id's for each field ie to,cc,bcc,subject and body and button to make the fields readonly.

var ok = document.getElementById("ok_button");
ok.style.display = "none";
var cncl = document.getElementById("cancel_button");
cncl.style.display = "none";
var to_readonly = document.getElementById("TO_unchecked");
to_readonly.disabled = 'true';
var cc_readonly = document.getElementById("CC_unchecked");
cc_readonly.disabled = 'true';
var bcc_readonly = document.getElementById("BCC_unchecked");
bcc_readonly.disabled = 'true';
var subjecy_readonly = document.getElementById("subject");
subjecy_readonly.disabled = 'true';
var body_readonly = document.getElementById("Body");
body_readonly.disabled = 'true';

The ids are defined in html part of 1st ui page.