A better way to display Domino attachments

Tired of the no-frills way Domino displays attachments on the web for your users? This solution will allow you to choose where and how they're displayed, complete with the appropriate icons. It's setup for an individual deletion button for each file, but could be easily adapted to use checkboxes and allow multiple file deletions. I just prefer single click over the checkboxes and save buttons. I've attached a library of 100+ file type icons in various sizes and a database example. This package is comprised of 8 steps. All the elements above should be hidden in read-mode, except for step 5 which should only be hidden when @Attachments=0.
Custom Tools • Lotus Formula • Lotus Notes Form

STEP 1: "deleteAttachment" JavaScript function for deletion

<script>
  function deleteAttachment(fName) {
	if (confirm('Delete this attachment!\n\nAre you 100% sure?')) {
		document.getElementById("delattach").value = fName;
                document.getElementById("ReturnOverride").value = document.getElementById('delattachReturnURL').value;
		document.forms[0].submit();
         }
  };
</script>

STEP 2: "ReturnOverride" Editable (hidden with style CSS) Note that you must have the "id" property set to "ReturnOverride" and reminder that JavaScript is case-sensitive :)

####### DEFAULT VALUE ###############
"[" + "/" + @WebDbName + "/" + @subset(@viewtitle;-1) + "?openview" + "]"

####### INPUT TRANSLATION ############
tmp := @Trim(@ThisValue);

@If(
	tmp="" ; "[" + "/" + WebDbName + "/" + ViewRef + "?openview" + "]" ;
	tmp
)

####### ID ############################
ReturnOverride

####### HTML TAGS - STYLE #############
display:none;

STEP 3: "ReturnOverrideReset" ComputedForDisplay field with JavaScript function to simply clear the "ReturnOverride" field each time the document is opened in edit mode.

REM "This is needed to clear out the ReturnOverride every time the document";
REM "is opened in edit mode. This serves as the trigger for the actual $$Return";
REM " to check and uses the default value if this is blank, otherwise it uses what ";
REM "this gets set to by the deleteAttachment javascript function.";

@If(
	@IsDocBeingEdited ; 
	"<script>document.getElementById('ReturnOverride').value='';</script>" ;
	""
)

STEP 4: hidden html fields: "%%Detach" and "delattachReturnURL"

<input type="hidden" id="delattach" name="%%Detach" value="">
<input type="hidden" id="delattachReturnURL" name="delattachReturnURL" value="<COMPUTED VALUE>">


####### COMPUTED VALUE ###############

"[" + 
"/"+@WebDbName+"/"+ViewRef+"/"+@Text(@DocumentUniqueID)+"?editdocument#attach"+ 
"]"

STEP 5: "attachedfiles_disp" ComputedForDisplay field to show the file icons, names, sizes, and deletion buttons.

docpath := "/" + WebDbName + "/" + @subset(@viewtitle;-1) + "/" + @Text(@DocumentUniqueID) + "/$File/";
ANames := @AttachmentNames ;
ALengths := @AttachmentLengths;
iconList := "";

@For(n:=1; n<=@Attachments; n:=n+1;
	imgsrc := "/" + WebDbName + "/" + "fileicon_56x56_" + @UpperCase(@RightBack(ANames[n]; ".")) + ".PNG";
	iconList := iconList + 
	"<div style=\"display:-moz-inline-stack; display:inline-block; border:1px solid #e4e4e4;padding:10px;margin:5px;\">"+
		"<center>"+
			"<a target=\"_blank\" href=\"" + docpath+ ANames[n] + "\">"+
			"<img border=\"0\" src=\""+ imgsrc + "\"><br>" + ANames[n] + "</a><br>"+
			"<br>" +
			@Text(ALengths[n]; "F,0") + " bytes" +
			@If(
				@IsDocBeingEdited ; 
				"<br><br><input type=\"button\" value=\"Remove\" onclick=\"deleteAttachment('" + @ReplaceSubstring(ANames[n]; "'"; "\\'") + "');\">" ; 
				""
			) +
		"</center>"+
	"</div>"
);

iconList

STEP 6: "$$Return" field to allow the page to reload appropriately. This will allow the page to refresh when a file is deleted, and return to the view when your existing @Command([FileCloseWindow]) formulas are used.

@If(
	ReturnOverride!="" ; ReturnOverride ;
	"[" + "/" + @WebDbName + "/" + ViewRef + "?openview" + "]"
)

STEP 7: Create a ComputedForDisplay field on your form entitled $V2AttachmentOptions and set the default value to "0"

"0"

STEP 8: File Upload Control, upload button, and bookmark

####### 1 ####### 
Place this HTML at the point where you file upload control will be.  
This will be used when the page refreshes to jump right back to this 
section (so the user doesn't have to scroll down repeatedly)

<a name="attach"></a>

####### 2 ####### 
Create a standard File Upload Control by going to File > Embedded Element > File Upload Control.

####### 3 #######  
Create a button entitled "Upload" and insert the following formula:

@Command([FileSave]);
@URLOpen("/"+@WebDbName+"/"+ViewRef +"/"+@Text(@DocumentUniqueID)+"?editdocument#attach")

Images/Screenshots:

Attached files
FileIconLibrary.zip 6,725,490 bytes Attachments.nsf 1,520,640 bytes

Written by Frank Joseph Brefere III

Posted by fbrefere001 on Wednesday March 10, 2010