File Upload og File Download Controls

1363487986_note_uploadFile Upload virker som den skal – undtagen hvis den indsættes i en Extension Library Dialog. Men der findes en work-around som er beskrevet i denne artikel: “File Upload XPage Forms via OpenNTF.org Extension Library Dialogs” – eller i denne video.

File Download skal styles en del førend den kan bruges – det har Ferry Kranenburg fundet en løsning på.

Upload kontrollen skal se således ud:

<xp:fileDownload rows="30" id="fileDownload1"
	displayLastModified="false" displayType="true" allowDelete="false"
	hideWhen="true" value="#{document1.body}" createdTitle="upload datum"
	sizeTitle="grootte" displayCreated="false" displaySize="false"
	style="width:450.0px;text-align:left;font-size:9pt;" disabled="false"
	columnClasses="fdownload_typeClass,fdownload_fileClass,fdownload_sizeClass,"
	var="rowFile" indexVar="rowIndex">
	<xp:this.fileNameValue><![CDATA[#{javascript:var aSizes:Array = ['bytes', 'kb', 'MB', 'GB', 'TB', 'PB'];
var calcnr:Number = Math.floor(Math.log(rowFile.getLength())/Math.log(1024));
var fSize = (rowFile.getLength()/Math.pow(1024, Math.floor(calcnr))).toFixed(2)+" "+aSizes[calcnr];
rowFile.getName() + " (" + fSize + ")"}]]>
	</xp:this.fileNameValue>
</xp:fileDownload>

herefter kan resten klares med CSS:

.xspDataTableFileDownload {
	border-collapse: none;
}

.xspDataTableFileDownload TBODY TR TD {
	border: none;
	padding-right: 0px;
}

.xspDataTableFileDownload THEAD {
	display: none;
}

.fdownload_typeClass {
	width: 0px;
}

.fdownload_typeClass .xspTextComputedField {
	display: none;
	padding-right: 0px;
}

.fdownload_fileClass {

}

.fdownload_sizeClass {
	color: #D3056E;
}

Problemer med ‘See attached file” referencer i RichText?

Det er der fundet en løsning på her:

Kort fortalt så kan det fjernes med  lille javascript funktion der laver søg og erstat:

function replaceSeeAttached(the_id) {
	//var the_id = "entryBody";
	h=getComponent(the_id).getValue().toString();
	h=h.replace(/\<i class=\"domino-attachment-ref\"\>\(.*\:\s(.+?)\)\<\/i\>/g,
	"");
	getComponent(the_id).setValue(h);
}
Koden kan kaldes ‘afterPageLoad’
<xp:this.afterPageLoad>
	<![CDATA[#{javascript:replaceSeeAttached( "body" );}]]>
</xp:this.afterPageLoad>

Kopier tekst til klippebordet med ZeroClipboard

16290425_sZeroClipboard benytter en skjult flash fil som ‘motor’ – dermed er det lykkedes at lave en funktion der virker i alle browsere.

Step 1: Importer ZeroClipboard script og flash filen som fileressources. Bemærk at ZeroClipboard fra version 1.1.0 ikke længere virker sammen med Dojo. Benyt i stedet en tidligere version, f.eks. ZeroClipboard-1.0.7

Step 2: Lav din XPage

Først skal javascript filen inkluderes

<xp:this.resources>
	<xp:script src="/ZeroClipboard.js" clientSide="true"></xp:script>
</xp:this.resources>

Så skal ZeroClipboard loades og initialiseres i en Script block

<xp:scriptBlock id="scriptBlock">
	<xp:this.value><![CDATA[
var clip = null;

dojo.addOnLoad( function() {
	clip = new ZeroClipboard.Client();
	clip.setHandCursor( true );
          clip.setText( "#{javascript:'Some SSJS to generate the text to copy'}" );
          clip.glue( "#{id:clip_button}" );
	});
]]></xp:this.value>
</xp:scriptBlock>

Tilsidst indsætter du en ‘copy’ knap

<xp:button value="Copy" id="clip_button">
	<xp:eventHandler event="onmouseover" submit="false">
		<xp:this.script><![CDATA[clip.reposition();]]></xp:this.script>
	</xp:eventHandler>
</xp:button>

ZeroClipboard lægger en skjult (transparrent) flash fil hen over din copy knap (det gøres med clip.glue metoden). Hvis siden resizes eller der på anden vise flyttes rundt på side elementer, så kan det ske at flash objektet ikke længere matcher knapper . Dette klares ved at kalde clip.reposition fra en onmouseover event. (hvis flash objektet ligger korrekt, så kaldes knappens events ikke)

Bemærk: Version 1.07 kan også give problemer med Dojo. F.eks. fik jeg ikke umiddelbart DialogBoxen fra Extension Library til at virke sammen med ZeroClipboard. Kunne dog nemt løses ved kun at vise ‘Copy’ knappen i Read mode og dialogboksen i Edit mode.

Links