How to handle files within a CRM Edit form
Adding file support to an Add form is relatively easy. Adding support to an edit form is just slightly more involved.
In this article, we'll walk through what it takes.
Edit form fields
There are two significant differences in our field definitions on an edit form compared to the add form.
We do still need the binary image, and we still need the file name. But keep in mind that with an edit form, binary data may already exist. To handle that, you will also need a field that indicates when the file has changed.
Furthermore, we are going to have to tell CRM how to retrieve the image file from the database, using a custom SQL function. Note that the function is required, even if you don't plan to actually download the file from within your form.
Here is an example trio of fields for your edit form:
<FormField FieldID="TESTIMAGE" Caption="Test image" DataType="Binary">
<File FileNameFieldID="TESTIMAGEFILENAME" FileChangedFieldID="TESTIMAGEFILECHANGED">
<FNFileDownload FNName="USR_SSC_UFN_DOWNLOAD_TEST_IMAGEFILE">
<CreateFunctionSQL>
<![CDATA[
CREATE FUNCTION USR_SSC_UFN_DOWNLOAD_TEST_IMAGEFILE(@ID UNIQUEIDENTIFIER)
RETURNS TABLE
AS
RETURN (SELECT TESTIMAGE FROM USR_SSC_TEST WHERE ID = @ID)
]]>
</CreateFunctionSQL>
</FNFileDownload>
</File>
</FormField>
<FormField FieldID="TESTIMAGEFILENAME" Caption="Test image file" Required="true" MaxLength="500" Multiline="false" DataType="String"/>
<FormField FieldID="TESTIMAGEFILECHANGED" Caption="File changed" DataType="Boolean" Hidden="true"/>
Make sure to load your spec before moving on to the next step.
UIModel HTML
Create a UIModel for your edit form (or, if you already have one, use Tools>Refresh UIModel to update it).
Make the following changes to the HTML file:
1) Add the following CSS block to the very top, above everything else:
<style type="text/css">
.filename-input {
background: transparent !important;
border: none !important;
outline: none !important;
padding: 0px 0px 0px 0px !important;
}
</style>
2) Change the file name field as shown in these before-and-after snippets
Before:
<textarea id="#MAP#TESTIMAGEFILENAME_value" rows="3" cols="1"></textarea>
After:
<input id="#MAP#TESTIMAGEFILENAME_value" type="text" class="filename-input"/>
UIModel .NET
Open the .VB or .CS file for your UIModel.
Add a handler for the image 'FileSelected' event. The below example is in VB.
Private Sub _testimage_FileSelected(sender As Object, e As FileSelectedEventArgs) Handles _testimage.FileSelected
TESTIMAGEFILECHANGED.Value = True
End Sub
Finally, load your spec, deploy the HTML and DLL, and you should have a fully functional file upload field in your edit form.
Questions? Comments? Please reach out at contact@styonssoftware.com, or via any of the methods on our Contact page.