Currently at the top of the person details
XPages I have a static ‘No Image Found’ placeholder. In this part of the
series I’m going to add a file upload control to the XPage so that you
can upload an image and then change the placeholder to display that image
if it exists. If it doesn’t exist then it will just display the placeholder
Our domino form already has a richtext
field called ‘jpegPhoto’ so we are going to use this to store the attachment.
Lets open the content_person custom control and from the controls panel
on the right drag in a new ‘File Upload’ control. I have placed mine just
under the placeholder image that I’m currently displaying.
In the properties for the file upload
control I have set the options up so that it will only accept a JPEG file
and I have also decided I want to rename all uploaded files to ‘thumbnail.jpg’.
Again you’ll see the diamonds to the right of the options meaning you can
compute the values for these options, and example of this is where maybe
you want to name the file using the persons first initial and lastname.
To make sure the upload option only
appears when the document is in edit mode and I computed the visibility
option on the control using the same personDoc.isEditable();
value that I used for the ‘save Document’ action button and I have also
changed the visibility of the image placeholder to the !(personDoc.isEditable());
computed value so that it is hidden while the document is in edit mode,
just like the ‘Edit Document’ action button.
On the data tab of the properties you
need to bind the control to a field on the domino form. I have bound mine
to the ‘jpegPhoto’ field.
Now select the Image control above.
We need to make this display the image once it has been uploaded and the
document saved. Go to it’s properties and for the image source click
on the diamond and select compute value. Here is the code I have used
personImage:String = "noImage.png";
attachmentList:java.util.List = personDoc.getAttachmentList("jpegPhoto");
attachmentObject:NotesEmbeddedObject = attachmentList.get(0);
Here I am setting the default to ‘noImage.png’
which is a file resource in the database. I then create a list of all the
attachments in the field ‘jpegPhoto’ and if there is more then one attachment
I create a NotesEmbeddedObject variable from the first entry on the list
and then calculate the URl to the image using the ‘Zero View’ method of
/0/DocumentUNID/$FILE/attachmentName.xyz. The DocumentUNID I am grabbing
out of the sessionScope. It was originally placed in there when we clicked
on the person’s name in the table on the locations XPage so that this XPage
would know what document to open in it’s data source definition.
Here’s what it looks like before I upload
and here’s what it looks like after
I upload the image and save the document
Now that we have all our validation
working and given the user a way to upload an image of themselves our application
is starting to come together.
In the next part we’ll look at some
security aspects for the application.