Drag/Drop files into CRM to create Attachments.

This is a kind of CRMised solution for my post Copy-paste to upload attachments automatically into CRM via USD.One should have USD in play to use that approach.

In this post, I would like to explain a solution which I have created to easily upload the files into CRM. Here is a quick glimpse of how its gonna work? Click on the video below.

Want to have a quick play with it and see how it is? Here is the access to my trail CRM version (Valid till Feb’17).

Url: MySetupOrg-Contact

User ID:bloguser@mysetuporg.onmicrosoft.com; Password: Blog@User

Now that you got the understanding on what we are trying to do here, Let’s see the steps involved.

Step 1: Download the Solution and import the solution

The CRM Solution (V 8.2) : Unmanaged || Managed

Above are the links for the CRM Solution, download your choice of managed or unmanaged solution and Import it into CRM. The solution on its own is very small with only 4 web resources (3 javascript files and a HTML file). Just FYI, I haven’t used any kind of 3rd party libraries (like Knockout/Angular/Some other) for this just to make sure the solution is small. Importing Solution into CRM is straight forward and you can follow the steps mentioned here in case if you are new. (Let me know if you are facing any problem in importing the solution).

Step 2: Add HTML Web resource to the <> form.

If you are familiar with CRM Customizations, Jump on to Step e directly from here. There are some key points to take in that step.

a) Create a new solution (although you can do the customization changes in default organization, but it is highly recommended to go for a new Solution) by navigating into Settings>>Solutions>>New Solution

b)Create the solution with required details for Name, Publisher etc. Here is the sample screen fyr.

5

Create new Solution in CRM

c)Add the required entity forms to the solution. For the sake of demonstration purpose, I’m adding Case entity for this solution. Note that, You don’t need to add any dependencies, Only the form on which you want to add the web resource is good enough.

6

Add Existing entity form to the solution

d)Open the form designer for the form and click on the Insert Web resource Tab in the ribbon.


e) In the new Web resource dialog box, select the details as mentioned below

Tab Property Name Value Remarks
General Web resource* fdd_/HTML/FileUploads.html This will only come if you import the solution mentioned in Step#1 successfully
General Name FileUploadControl Any name you want
General Label File Upload into CRM Any Label you want
General Display label on Form No I don’t want to clutter the form with some label of no use, But it’s up to you.
General Visible by Default Yes
General Pass record object-type code and unique identifier as parameters. Yes This must be a Yes
Formatting Layout Two Column Selected this because it would work for my Form. You can set it based on your form style/location
Formatting Number of Rows 5 anything b/w 4 to 6 gives a decent look to the control
Formatting Scrolling As necessary
Formatting Display Border No I found it more cool w/o border. Up to you again

Here is a quick preview screen :

Add web resource in CRM

Add web resource in CRM

Note that Selecting the “Pass record object-type code and unique identifier as parameters” is a key selection. This gives the web resource the required record Id & Type to create notes.

8

Case form Design

f) Save & Publish the changes; This is how the output looks like.

Case form with File Drag & Drop control

Case form with File Drag & Drop control

That’s it, You are all set. Just drag and drop a sample file to test it 🙂

Before wrapping up the post, Here are some of the important points that are not discussed so far in the post.

  1. Apart from Drag & Drop files into CRM, One can also use Browse button to select the files required. This is provided as a fallback scenario where users are working with some bad mouse or incompatible browser etc.
  2. Optionally, Users can select Prompt for the title, Prompt for the description before clicking on the Upload link. This will then prompt for the title & description to create notes (annotation record).
  3. For the sake of the blogging, I have selected Case. But you can use the web resource for any entity which is enabled for notes.
  4. I haven’t placed any file size restriction, but CRM has the 5MB limit. So you upload a big file, CRM will throw an error for you. My suggestion is not to drop too big file, which might hang the browser for some time as it will try to read the file first.
  5. The drag/drop functionality is based on HTML 5, So I would expect the users to be on new era browsers. (I don’t think this would be a big problem as CRM/Dyn365 on its own will not support old browsers).
  6. When the document is loaded, It will check for the record id. If it is not available, It will throw an error and stops attaching the required events. This would occur in 2 scenarios. a) You forgot to select the “Pass record object-type code and unique identifier as parameters” in web resource b)If it is a new record. In case of a new record, Users have to first save the record and then refresh it to start using.
  7. I haven’t used any fancy uploading images, as I want to keep it as simple as possible. Attached the source code also at the end of the post, Play with it and design as you like 🙂
  8. Not minified the javascript as I don’t found a major reduction in size. Thought leaving like that might help some enthusiastic developers to debug if required.

Here are all the links once again!!

V 8.2 Unmanaged CRM Solution

V 8.2 Managed CRM Solution

Source Code in GitHub

Hope this helps in your projects, Feel free to contact me in case of any troubles !!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s