How to refresh popup attachment window
I have created a check box in attachment popup window as shown below(pic2). so for every attachment this checkbox will appear.
But, as soon as i attach a attachment check box is not coming next to file name. It is coming after closing the popup window and reopening again. as shown in PIC 1.
Please tell me how to refresh it.
For adding check box i have written as below,
var checkRole=gs.hasRole('ServicePortal Custom');
var tableName="${RP.getWindowProperties().get('target_table')}";
var show = 'false';
if(tableName == 'incident' && checkRole)
show = 'true';
${gs.getMessage('Customer Visible')}
${gs.getMessage('Customer Visible')}
PIC: 1
PIC 2: After closing and opening attachment popup now it is available instead that it should come as soon as file is attached
ANy idea on this
If you are updating the "attachment" UI Page, I think you will need to look at the client script section of the UI page, and ensure you create your new field dynamically. Have a look at the function called "refreshAttachments". In there, I think you will need to create your checkbox. Also, I presume you will be wiring that field up so that it acually saves something in the backend as well (sys_Attachment table)?
Hi,
The Jelly script which will get execute on load of the page and here the "attachment" modal box data is coming from "attachment" ui page so generally your code should not required to refresh the page instead it should add checkbox ("Customer Visible") when any new attachment is getting add. You can use "refreshAttachments" function to bind check box.
For temporary solution of refreshing the modal box, you can add below two lines at the end of refreshAttachments() function.
jQuery('#attachment').modal('hide');
jQuery('#header_attachment_list_label').click();
Note: This is a DOM manipulation which is not suggested best practice so you should bind checkbox when new attachment is getting added.
Thank you very much.. though it is DOM manipulation we will consider this solution as it is working fine as expected
Thanks a lot
Hi keerthilatha,
I tried your sript in oob ui page : attachment........but it is not working
could you please tell me where did you insert this code:
After what line of code.....
var checkRole=gs.hasRole('ServicePortal Custom');
var tableName="${RP.getWindowProperties().get('target_table')}";
var show = 'false';
if(tableName == 'incident' && checkRole)
show = 'true';
${gs.getMessage('Customer Visible')}
${gs.getMessage('Customer Visible')}
Hi Monu,
For temporary solution - refreshing the modal box, you can add below two lines at the end of refreshAttachments() function.
But i don't know why I m not getting the attachment popup as he got in pic 2...
My attachment popup is like as:
I am not able to get this one
Please help to get this.....
Thank you
Hi Monu, pls find ui page code and client script code as follows.and below code working fine to me. pls let me know what is exact requirment.
PLease find UI page code-
<?xml version="1.0" encoding="UTF-8"?>
<j:jelly trim="false" xmlns:g="glide" xmlns:g2="null" xmlns:j="jelly:core"
xmlns:j2="null">
<input type="hidden" id="ni.show_attachment_view" name="ni.show_attachment_view"
value="${jvar_show_link}" />
<!-- Check no_attachment attribute in order to override if necessary. -->
var gr = new GlideRecord(jelly.jvar_target_table);
gr.get(jelly.jvar_target_sys_id);
gr.getED().getBooleanAttribute("no_attachment");
var gr = new GlideRecord(jelly.jvar_target_table);
gr.get(jelly.jvar_target_sys_id);
gr.getED().hasAttachmentsEncrypted() ${AND} !gs.isEdgeEncryptedSession()
<!-- Check Users Ability to Attach -->
var gr = new GlideRecord(jelly.jvar_target_table);
if (jelly.jvar_sc_override == 'true')
"true";
if (gr.get(jelly.jvar_target_sys_id))
gr.canWrite();
else
"true";
var ret = jelly.sysparm_this_url.startsWith('email_client.do');
ret;
<!-- Store parent sys_id for use in javascript -->
</p> <p>var attachmentParentSysId = '${jvar_target_sys_id}';</p> <p>
<input type="hidden" id="ni.show_rename_link" name="ni.show_rename_link"
value="${jvar_can_add_attachments}" />
<input type="hidden" id="ni.show_attachment_popup" name="ni.show_attachment_popup"
value="${jvar_show_link_popup}" />
|
${gs.getMessage('Choose a file to attach')}: |
|||||
|
<FORM id="sys_attachment" name="sys_attachment" action="sys_attachment.do" enctype="multipart/form-data" method="post" onsubmit="return validateAttachment();" target="upload_target" style="display: none;"> $('sys_attachment').style.display = 'block'; <input name="attachments_modified" id="attachments_modified" type="hidden" value="" /> <input name="sysparm_redirect" type="hidden" value="attachment_uploaded.do?sysparm_domain_restore=false&sysparm_nostack=yes" /> <input id="sysparm_encryption_context" name="sysparm_encryption_context" type="hidden" value="" />
|
|||||
|
${gs.getMessage('The attachments are encrypted and all actions are disabled until you connect to your company network.')} |
|||||
|
<img style="margin: 6px 3px 6px 3px;display:none;" id="please_wait" src="images/please_wait.gifx" alt="${gs.getMessage('Please Wait')}" /> ${gs.getMessage('Current file attachments')}: |
|||||
|
<FORM action="sys_attachment.do?DELETE" method="post" target="upload_target" onsubmit="return startRemoveAttachments()"> <input name="sysparm_this_url" id="sysparm_this_url" type="hidden" value="" /> <input name="deleted_sys_ids" id="deleted_sys_ids" type="hidden" value="" />
document.getElementById('delete_button_span').style.display</p> <p>= "inline"; |
|
<input id="closeButton" title="${gs.getMessage('Close')}" class="button" type="button" onclick="_saveAttachmentClose(); closeAttachmentWindow();" value="${gs.getMessage('Close')}" /> |
<!-- this is where we send our form submissions so that the dialog stays
up -->
<iframe id="upload_target" name="upload_target" src="blank.do?sysparm_domain_restore=false"
style="position:fixed;clip: rect(0,0,0,0);width:100%;height:0;border:0px solid #fff;">$[SP]
----------------------------
client script-
/**
* Validate the attachments to see if at least
* one file is attached. Otherwise, show an alert.
*
* @returns {Boolean}
*/
//checking check box values on form and setting value on sys_attachment table customer visible field --//code start(ref: ADHOC0007872)
//var checked = '';
function check(obj,file){
//alert(obj.checked);
//checked = true;
//alert(file);
var gr_att=new GlideRecord('sys_attachment');
gr_att.addQuery('table_sys_id',g_form.getUniqueValue());
gr_att.addQuery('file_name',file);
gr_att.query();
if(gr_att.next()){
if(obj.checked){
gr_att.u_customer_visible=true;
}else{
gr_att.u_customer_visible=false;
}
gr_att.update();
//alert(gr_att.u_customer_visible);
}
}
//code end
function validateAttachment() {
var form = $('sys_attachment');
var fileFields = form.select('.attachmentRow');
for (var i = 0; i < fileFields.size(); i++) {
if (fileFields[i] && fileFields[i].value != "") {
setAttachButton(""); //disable
$('please_wait').style.display = "";
return true;
}
}
alert("${JS:gs.getMessage('Choose a file to attach')}");
return false;
}
/**
* Does the first attachment input field have a value?
* If not, use the grey button and change type of cursor.
* @param value
*/
function setDeleteButton(value) {
var field = $$('.attachmentRow')[0];
var text = field.select('input')[0];
var deleteButton = field.select('a.attachfile-delete img')[0];
if (!text.getValue().empty()) {
deleteButton.setAttribute('src', 'images/icons/kb_no.gif');
deleteButton.up().style.cursor = 'pointer';
} else {
deleteButton.setAttribute('src', 'images/icons/kb_no_disabled.gif');
deleteButton.up().style.cursor = 'default';
}
}
/**
* If the value passed in is an empty string,
* set the button to disabled state, otherwise
* enabled.
*
* @param value
*/
function setAttachButton(value) {
var attachButton = $("attachButton");
if (value == "")
attachButton.disabled = "true";
else
attachButton.disabled = "";
}
/**
* This controls the remove button for all attachments.
* If there are attachments in the list enable the button.
* Else keep disabled.
*
* @param e
*/
function setRemoveButton(e) {
var removeButton = gel("removeButton");
var deletedSysIdsElement = gel("deleted_sys_ids");
var deletedSysIds = new Array();
var deletedString = deletedSysIdsElement.value;
if (deletedString)
deletedSysIds = deletedString.split(";");
var thisId = e.name.substring(7);
if (e.checked) {
removeButton.disabled = "";
deletedSysIds.push(thisId);
} else {
var index = deletedSysIds.indexOf(thisId);
deletedSysIds.splice(index, 1);
// are there any left checked?
var inputs = document.getElementsByTagName("input");
var nonechecked = true;
var i = 0;
while(i < inputs.length && nonechecked) {
if (inputs[i].type == "checkbox" && inputs[i].name.substring(0, 7) == "sys_id_")
if (inputs[i].checked)
nonechecked = false;
i++;
}
if (nonechecked) {
removeButton.disabled = "true";
}
}
deletedSysIds = deletedSysIds.join(";");
deletedSysIdsElement.value = deletedSysIds;
}
function startRemoveAttachments() {
var removeButton = gel("removeButton");
removeButton.disabled = true;
gel('please_wait').style.display = "";
var thisUrl = gel("sysparm_this_url");
thisUrl.value = "attachment_deleted.do?sysparm_domain_restore=false&sysparm_nostack=yes&sysparm_deleted=" + gel("deleted_sys_ids").value;
return true;
}
/**
* Clear and Remove the attachment field that is
* passed in.
*
* @param field_id
*/
function clearAttachmentField(field) {
var form = $('sys_attachment');
var fileFields = form.select('.attachmentRow');
fileFields[0].setAttribute('data-position', 'first');
if (fileFields.size() > 1 && (field.readAttribute('data-position') != "first")) {
//check if field you are removing has a 3rd column (does it have an attach button?)
var needToAttachButton;
var attachButton = field.select('td')[2];
if (attachButton)
needToAttachButton = true;
//remove the field
field.remove();
//if you removed a field with a third column, add an attachbutton onto the new "first" field.
if (attachButton) {
var attachButton = new Element('input', {
"type": "submit",
"id": "attachButton",
"disabled": "true",
"value": "${gs.getMessage('Attach')}" });
var td = new Element('td', {align: 'right'}).update(attachButton);
Element.extend(td);
form.select('.attachmentRow').first().select('td')[1].insert({'after': td});
}
}
else
clearFileField(field.select('td').first().select('input').first());
checkAndSetAttachButton();
}
/**
* Check all attachment input fields. If there is not attachment
* currently, disable the attachment button, else enable it.
*
* @returns
*/
function checkAndSetAttachButton() {
var form = $('sys_attachment');
var fileFields = form.select('.attachmentRow');
var validFileCount = 0;
for (var i = 0; i < fileFields.size(); i++) {
var field = fileFields[i].select('td').first().select('input').first();
if (field.getValue() != "") {
if (window.File && window.FileReader && window.FileList)
validFileCount += validateSizeandExt(field);
else
validFileCount += 1;
}
}
if (validFileCount == 0)
setAttachButton("");
else
setAttachButton("true");
}
function validateSizeandExt(field) {
var form = $('sys_attachment');
var maxSize = (form.max_size && form.max_size.value) ? form.max_size.value : 0;
var fileTypes = (form.file_types && form.file_types.value) ? form.file_types.value : "";
var files = field.files;
var allowedSize = maxSize * 1048576;
var warningString = "";
for (var i = 0; i < files.length; i++) {
if (files[i].size > allowedSize && allowedSize != 0)
warningString += files[i].name + "${JS:gs.getMessage(' is ')}" + getDisplaySize(files[i].size) + "${JS:gs.getMessage('. The maximum file size is ')}" + getDisplaySize(allowedSize) + ".\n";
if (!isValidFileType(files[i], fileTypes))
warningString += files[i].name + "${JS:gs.getMessage(' has a prohibited file extension.')}" + "\n";
}
if (warningString != "") {
alert(warningString);
clearFileField(field);
return 0;
}
return 1;
}
function getDisplaySize(sizeInBytes) {
var kilobytes = Math.round(sizeInBytes / 1024);
if (kilobytes < 1)
kilobytes = 1;
var reportSize = kilobytes + "K";
if (kilobytes > 1024)
reportSize = Math.round(kilobytes / 1024) + "MB";
return reportSize;
}
function isValidFileType(file, types) {
var extensions = types || "";
if (extensions != "") {
extensions.toLowerCase();
extensions = extensions.split(",");
var periodIndex = file.name.lastIndexOf(".");
var extension = file.name.substring(periodIndex+1).toLowerCase();
if (extensions.indexOf(extension) == -1)
return false;
}
return true;
}
/**
* Clear a given field's contents.
*
* @param field
* the field element.
*/
function clearFileField(field) {
$(field).clear();
$(field).parentNode.innerHTML = $(field).parentNode.innerHTML;
checkAndSetAttachButton();
}
/**
* If the attachments are uploaded, clear any extra attachment input fields so
* they do not take up as much screen space. Additionally, clear the first field
* and keep it showing.
*/
function clearAttachmentFields() {
var form = $('sys_attachment');
var fileFields = form.select('.attachmentRow');
for (var i = 0; i < fileFields.size(); i++) {
if (i == 0)
clearFileField(fileFields[0].select('td').first().select('input').first());
if (i > 0)
fileFields[i].remove();
}
checkAndSetAttachButton();
setDeleteButton();
}
// this get called after an attachment is uploaded to update the display
function refreshAttachments(id, fileName, canDelete, createdBy, createdOn, contentType, encryption, iconPath) {
refreshLiveFeedAttachments(id, fileName, contentType, iconPath);
var encryptCheck = gel("encrypt_checkbox");
if (encryptCheck) {
encryptCheck.checked = false;
$('sysparm_encryption_context').value = "";
}
gel("please_wait").style.display = "none";
// if we didn't get an id, we could not read the attachment due to business rules so we're done
if (typeof id == "undefined")
return;
var noAttachments = gel("no_attachments");
if (noAttachments.style.display == "block")
noAttachments.style.display = "none";
// add the new upload to the display
var table = gel("attachment_table_body");
var tr = cel("tr");
var td = cel("td");
td.style.whiteSpace = "nowrap";
td.colspan = "2";
if (canDelete=="true") {
var input = cel("input");
var checkId = "sys_id_" + id;
input.name = checkId;
input.id = checkId;
input.type = "checkbox";
input.onclick = function() {setRemoveButton(gel(checkId));};
td.appendChild(input);
gel("delete_button_span").style.display = "inline";
var text = document.createTextNode(" ");
td.appendChild(text);
input = cel("input");
input.type = "hidden";
input.name = "Name";
input.value = "false";
td.appendChild(input);
}
var anchor = cel("a");
anchor.style.marginRight = "4px";
anchor.href = "sys_attachment.do?sys_id=" + id;
anchor.title = "${JS:gs.getMessage('Attached by')} " + createdBy + " ${JS:gs.getMessage('on')} " + createdOn;
var imgSrc = iconPath;
if (encryption != "") {
anchor.title += ", ${JS:gs.getMessage('Encrypted')}: " + encryption;
imgSrc = "images/icons/attachment_encrypted.gifx";
}
var img = cel("img");
img.src = imgSrc;
img.alt = anchor.title;
anchor.appendChild(img);
var text = $(cel('a'));
text.href = "sys_attachment.do?sys_id=" + id;
text.onkeydown = function(event){return allowInPlaceEditModification(text, event);};
text.style.marginRight = "5px";
text.style.maxWidth = "75%";
text.style.display = "inline-block";
text.style.overflow = "hidden";
text.style.verticalAlign = "middle";
text.innerHTML = fileName;
text.setAttribute("data-id", id);
text.inPlaceEdit({
selectOnStart: true,
turnClickEditingOff: true,
onAfterEdit: function(newName) {
var oldName = this.oldValue;
var ga = new GlideAjax('AttachmentAjax');
ga.addParam('sysparm_type', 'rename');
ga.addParam('sysparm_value', id);
ga.addParam('sysparm_name', newName);
ga.getXML(function(response){
var answer = response.responseXML.documentElement.getAttribute("answer");
if (answer !== '0')
alert(new GwtMessage().getMessage("Renaming attachment {0} to new name {1} is not allowed", oldName, newName));
$$('a[data-id="' + id + '"]').each(function(elem){
elem.innerHTML = (answer === '0') ? newName : oldName;
});
$$('span[data-id="' + id + '"]').each(function(elem){
elem.innerHTML = (answer === '0') ? newName : oldName;
});
});
}
});
if (contentType == "text/html")
anchor.target = "_blank";
td.appendChild(anchor);
td.appendChild(text);
var allowRename = gel('ni.show_rename_link').value;
if (allowRename == "true") {
var renameAttachment = $(cel('a'));
renameAttachment.className = 'attachment';
renameAttachment.onclick = function() {
text.beginEdit();
};
renameAttachment.innerHTML = '${JS:gs.getMessage("[rename]")}';
td.appendChild(renameAttachment);
}
var showView = gel("ni.show_attachment_view").value;
if (showView == "true") {
var blank = document.createTextNode(" ");
tr.appendChild(blank);
var view = cel("a");
var newText = document.createTextNode('${JS:gs.getMessage("[view]")}');
view.appendChild(newText);
view.className = "attachment";
if (showPopup == "false")
view.href = "sys_attachment.do?sys_id=" + id + "&view=true";
else
view.onclick = function() {
tearOffAttachment(id)
};
td.appendChild(blank);
td.appendChild(view);
}
var showPopup = gel("ni.show_attachment_popup").value;
tr.appendChild(td);
table.appendChild(tr);
var form_table_id = "";
if(gel("sys_uniqueValue") || gel("sysparm_item_guid")){
form_table_id = (gel("sys_uniqueValue") || gel("sysparm_item_guid")).value;
}
if(form_table_id && attachmentParentSysId != form_table_id){
CustomEvent.fire('record.attachment.uploaded', {
sysid: id,
name: fileName,
hoverText: anchor.title,
image: imgSrc,
showRename: allowRename,
showView: showView,
showPopup: showPopup
});
}else{
addAttachmentNameToForm(id, fileName, anchor.title, imgSrc, allowRename, showView, showPopup);
}
if (g_accessibility)
alert(fileName + " " + anchor.title);
jQuery('#attachment').modal('toggle');
jQuery('#header_attachment_list_label').click();
}
function refreshLiveFeedAttachments(sys_id, fileName, contentType, iconPath) {
var p = gel('live_feed_message_images');
if (!p)
return;
if (!contentType)
return;
if (contentType.indexOf('image') != 0 || contentType.indexOf('image/tif') == 0)
refreshLiveFeedNonImages(p, sys_id, iconPath, fileName);
else
refreshLiveFeedImages(p, sys_id, fileName);
var container = $('live_feed_image_container');
if (container)
container.show();
}
function refreshLiveFeedNonImages(p, sys_id, iconPath, fileName) {
var a = cel('a');
a.onclick = function() {tearOffAttachment(sys_id)};
a.title = fileName;
a.className = "live_feed_attachment_link";
var img = cel('img');
img.src = iconPath;
img.className = 'live_feed_image_thumbnail';
img.setAttribute("data-sys_id", sys_id);
a.appendChild(img);
var span = cel('span');
span.setAttribute('data-id', sys_id);
span.innerHTML = fileName;
a.appendChild(span);
p.appendChild(a);
p.appendChild(cel('br'));
setTimeout(this.hideLoading.bind(this), 200);
}
function refreshLiveFeedImages(p, sys_id, fileName) {
var imageName = "sys_attachment.do?sys_id=" + sys_id;
var a = cel('a');
a.onclick = function() {tearOffAttachment(sys_id)};
a.title = fileName;
a.className = "live_feed_attachment_link";
var img = cel('img');
img.src = imageName;
img.className = 'live_feed_image_thumbnail';
img.setAttribute("data-sys_id", sys_id);
a.appendChild(img);
p.appendChild(a);
p.appendChild(cel('br'));
setTimeout(this.hideLoading.bind(this), 200);
}
// this get called after attachments are deleted to update the display
function deletedAttachments(sysIds) {
var form_table_id = "";
if(gel("sys_uniqueValue") || gel("sysparm_item_guid")){
form_table_id = (gel("sys_uniqueValue") || gel("sysparm_item_guid")).value;
}
if(form_table_id && attachmentParentSysId != form_table_id){
CustomEvent.fire('record.attachment.deleted', sysIds);
return;
}
deleteLiveFeedAttachments(sysIds);
var modified = $("attachments_modified");
if (modified)
modified.value = "true";
var header_attachment = $('header_attachment');
gel("deleted_sys_ids").value = ""; // there should be none on the list once we return
var idArray = sysIds.split(";");
for (var i=0; i<idArray.length; i++) {
var id = idArray[i];
changeCount(attachmentParentSysId, 'decrease');
var e = gel("sys_id_" + id);
var tr = e.parentNode.parentNode;
rel(tr);
e = gel("attachment_" + id);
if (e)
rel(e);
}
var inputs = document.getElementsByTagName("input");
var anAttachment = false;
var i = 0;
while(i < inputs.length && !anAttachment) {
if (inputs[i].type == "checkbox" && inputs[i].name.substring(0, 7) == "sys_id_")
anAttachment = true;
i++;
}
if (!anAttachment) {
var noAttachments = gel("no_attachments");
noAttachments.style.display = "none";
var removeButton = gel("removeButton");
removeButton.disabled = true;
gel('delete_button_span').style.display = "none";
hideObject($("header_attachment_list_label"));
if (header_attachment)
header_attachment.style.height = "auto";
var line = $("header_attachment_line");
if (line) {
line.style.visibility = "hidden";
line.style.display = "none";
}
}
gel("please_wait").style.display = "none";
var more_attachments = $('more_attachments');
if (more_attachments && header_attachment)
if( (computeAttachmentWidth() - 20) >= (header_attachment.getWidth() - more_attachments.getWidth()))
more_attachments.style.display = 'block';
else
more_attachments.style.display = 'none';
}
function deleteLiveFeedAttachments(sysIds) {
var p = $('live_feed_message_images');
if (!p)
return;
if (!p.visible())
return;
idArray = sysIds.split(";");
for (var i=0; i<idArray.length; i++) {
var imgs = p.select("img.live_feed_image_thumbnail");
if (imgs.length < 1)
return;
for (var j=0; j<imgs.length; j++) {
if (imgs[j].getAttribute("data-sys_id") == idArray[i]) {
var elem = imgs[j].up("a.live_feed_attachment_link");
elem.remove();
if (elem.next() && (elem.next().tagName.toLowerCase() == "br"))
elem.next().remove();
}
}
}
if (p.select("img.live_feed_image_thumbnail").length > 0)
return;
var container = $('live_feed_image_container');
if (container)
container.hide();
}
function computeAttachmentWidth() {
var temp = $('header_attachment_list').select('li');
var totalWidth = 0;
for (var i = 0; i < temp.length; i++) {
totalWidth += temp[i].getWidth();
}
return totalWidth;
}
function closeAttachmentWindow() {
GlideDialogWindow.get().destroy();
}
/**
* Add an input field to the file browser in the dialog.
* This is called when the "Add Another Attachment" button
* is clicked.
* */
function addRowToTable() {
var formRows = $('sys_attachment').select(".attachmentRow");
var input = "<input type='file' title='${gs.getMessage('Attach')}' " +
"name='attachFile' onchange='checkAndSetAttachButton(); setDeleteButton(this.value);'" +
"size=41 multiple=true />";
var img = "" +
"
";
var row = " "
+ input + "" + img + "";
formRows.last().insert({ "after" : row });
}
Thanks keerthilatha, I got the output
This document was generated from the following discussion: How to refresh popup attachment window
https://www.servicenow.com/community/developer-articles/how-to-refresh-popup-attachment-window/ta-p/2295523