Order attached files by date in portal

Ingrid_Glatz

I've upgraded the portal to version 8.9.5. Now, analysts complain about that they cannot sort the linked attachments based on their dates, neither in the form itself nor in the view that opens up when clicking the symbol beside the ticket number. At least, I haven't figured it out yet. In the old portal version 7.4.x, they could sort by date to know which mail attachment is the oldest and therefore initial mail. Now, they have to open all mail attachments to find the initial mail.

Is there a way to allow a sort order for attachments by date?

Ingrid

Brian_Wiest

Actually I should note. v8.11.0.x was released. In this release the new title bar for tickets all have the attachment icon for easy access. So there you can leave the drag and drop and in the related items tab place the old control for sorting. I think I am going to do that for my analysts.

Jeff_Lang

@Ingrid_Glatz

we had the same complaint about the date/time attachments were added, and also not being able to see the full file name if it is too long, we've added the following to not only show the full file name, but also the date/time the attachments were added. on both the workitem pages and also the attachments popout

it still does not sort them in date/time order, but does at least make it easier to see when they were attached

CSS

/* Resize the File Attachment Icon / Expand the text displayed */<br>div.thumbnail-file {<br>	height: 150px;<br>	width: 150px;<br>}<br><br>div.thumbnail-caption {<br>	height: auto !important;<br>}<br><br>div.thumbnail-caption span {<br>	word-wrap: break-word;<br>	white-space: normal !important;<br>}<br>

JS

(function(){<br>	app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	app.custom.formTasks.add('Problem', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	app.custom.formTasks.add('ServiceRequest', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	function ModifyFileAttachmentThumbnails() {<br>		//modify thumbnails on popout window when clicking the attachment icon at the top<br>		$('#viewAttachments').on('click', function() { setdatesonpopoutattachmentwindow();})<br>		function setdatesonpopoutattachmentwindow() {<br>			var $tnf2 = $('div.modal-body div div.fileattachment-list div.thumbnail-file div.thumbnail-caption span:not([class])')<br>			for ( i = 0 ; i < $tnf2.length ; i++ ) {<br>				i2 = i;<br>				while ( i2 >= pageForm.viewModel.FileAttachment.length && i2 > 0) {<br>					i2 -= pageForm.viewModel.FileAttachment.length;<br>				}<br>				$tnf2[i].append(' - ' + new Date(pageForm.viewModel.FileAttachment[i2].AddedDate).toLocaleString())<br>			}<br>		}<br>		setTimeout( function() {<br>			//modify attachemtn thumbnails on actual form<br>			var $tnf1 = $('div.panel.panel-default div div.fileattachment-list div.thumbnail-file div.thumbnail-caption span:not([class])')<br>			for ( i = 0 ; i < $tnf1.length ; i++ ) {<br>				$tnf1[i].append(' - ' + new Date(pageForm.viewModel.FileAttachment[i].AddedDate).toLocaleString())<br>			}<br>		},250);<br>	}<br>})();

Brian_Wiest

In your Incident.js update in custom space.

{
name: "FileAttachments",
type: "fileAttachmentsDragDrop"
},

to

{
name: "FileAttachments",
type: "fileAttachments"
},

This will return the old file attachment interface.

Ingrid_Glatz

Most analysts like the possibility to drag&drop files. Taking it away would probably cause more protest.

Any chance of having both? For service requests, I would do the same modification, I guess in the Servicerequest.js.

Brian_Wiest

Add both sections to the incident and servicerequest.js.

{
name: "FileAttachments",
type: "fileAttachmentsDragDrop"
},

{
name: "FileAttachments",
type: "fileAttachments"
},

Ingrid_Glatz

With "any chance of having both" I meant to have drag&drop and the ability to sort the documents. Sorry for the misunderstanding. Most analysts like the drag&drop feature and I do not want to remove it.

Brian_Wiest

I remember talking about it during a feedback session, not sure if Cireson has it on the roadmap but recommend to create a feature request here so everyone can vote on it.

Brian_Wiest

Actually I should note. v8.11.0.x was released. In this release the new title bar for tickets all have the attachment icon for easy access. So there you can leave the drag and drop and in the related items tab place the old control for sorting. I think I am going to do that for my analysts.

Ingrid_Glatz

Sounds good, I'll check it out in my test environment. Unfortunately, after upgrading to version 8.9.5 just 2 weeks ago, I'll have to stick to this version at least until February until I can upgrade again.

Brian_Wiest

Just curious, why do you have to wait?

Ingrid_Glatz

we're not allowed to implement any changes to production in December if it's not an emergency. It's business-driven. By the middle of January, we're back to normal business and then I can plan and ask for permission to implement.

Jeff_Lang

@Ingrid_Glatz

we had the same complaint about the date/time attachments were added, and also not being able to see the full file name if it is too long, we've added the following to not only show the full file name, but also the date/time the attachments were added. on both the workitem pages and also the attachments popout

it still does not sort them in date/time order, but does at least make it easier to see when they were attached

CSS

/* Resize the File Attachment Icon / Expand the text displayed */<br>div.thumbnail-file {<br>	height: 150px;<br>	width: 150px;<br>}<br><br>div.thumbnail-caption {<br>	height: auto !important;<br>}<br><br>div.thumbnail-caption span {<br>	word-wrap: break-word;<br>	white-space: normal !important;<br>}<br>

JS

(function(){<br>	app.custom.formTasks.add('Incident', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	app.custom.formTasks.add('Problem', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	app.custom.formTasks.add('ServiceRequest', null, function (formObj, viewModel) {<br>		formObj.boundReady(function () {<br>			ModifyFileAttachmentThumbnails();<br>		});<br>	});<br>	function ModifyFileAttachmentThumbnails() {<br>		//modify thumbnails on popout window when clicking the attachment icon at the top<br>		$('#viewAttachments').on('click', function() { setdatesonpopoutattachmentwindow();})<br>		function setdatesonpopoutattachmentwindow() {<br>			var $tnf2 = $('div.modal-body div div.fileattachment-list div.thumbnail-file div.thumbnail-caption span:not([class])')<br>			for ( i = 0 ; i < $tnf2.length ; i++ ) {<br>				i2 = i;<br>				while ( i2 >= pageForm.viewModel.FileAttachment.length && i2 > 0) {<br>					i2 -= pageForm.viewModel.FileAttachment.length;<br>				}<br>				$tnf2[i].append(' - ' + new Date(pageForm.viewModel.FileAttachment[i2].AddedDate).toLocaleString())<br>			}<br>		}<br>		setTimeout( function() {<br>			//modify attachemtn thumbnails on actual form<br>			var $tnf1 = $('div.panel.panel-default div div.fileattachment-list div.thumbnail-file div.thumbnail-caption span:not([class])')<br>			for ( i = 0 ; i < $tnf1.length ; i++ ) {<br>				$tnf1[i].append(' - ' + new Date(pageForm.viewModel.FileAttachment[i].AddedDate).toLocaleString())<br>			}<br>		},250);<br>	}<br>})();