Microsoft Dynamics - Part 2

Setting the OnLoad Event

The OnLoad event tells the form what scripts to run when it is initially loaded. In the “Form Properties”, look at the “Event Handlers” list. dynamics15
Select the value already present and click the “Remove” button to delete it. Then click the “Add” button. This will open the “Handler Properties” window. Fill out the form as shown below:

dynamics16
Enter your license key surrounded by inverted commas into the text box at the bottom (For more information on license keys, see Configuration Options. Click the “OK” button.  The “Event Handler” list will now look like this:
dynamics17

Close the “Form Properties” window.

Saving and Publishing the Form

Now the form needs to be saved and published. The ability to do that can be found in the top left of the contact form window.

dynamics18
Clicking the “Save” button will overwrite the default contact form. If you want to keep the default form, click “Save As” and give the form a new name.
dynamics19
Next, click the “Publish” button so the new form can be used.

Testing the Form

To open the new form, open the new contact page again. A first and last name are required before the other form controls can be used. Fill in a first and last name. If you have saved a new form, click the "Contact" button to show a drop-down list of your saved Contact forms.


Next, find the field “Address 1” under “Contact Information”. Click the text box. A pop up box with address fields should open as shown below. Start entering an address into the “Street 1” text box and suggestions should appear based on what has been entered.

dynamics21
When you choose the correct address it populates the fields as shown below:
dynamics22

Applying CSS Styles

It’s possible to add CSS to a form to give it a custom look. A file named “CompositeAddress” was downloaded as part of the repository download. This is a CSS file that will change how the pop up box looks in the form. 
Open the form editor again and click the “Form Properties” button. Follow the steps laid out previously to add the “CompositeAddress” CSS file, this time, clicking the “Publish” button on the “Web Resource: New” window after saving the new file. 


If you forget to publish at this point, it won’t be possible to do this in the form editor, as CSS files are not visible here. See previous section on how to publish the file through the Dynamics settings. 
After saving and publishing the file, it will be necessary to update the JavaScript files that will be using it. In this case, that would be the “AutoaddressContact” file. If the JavaScript file has not been uploaded yet, it can be edited in a text editor before uploading. However, it is possible to update the file within “Form Properties”. To achieve this, open “Form Properties”, highlight the contact file in the “Form Libraries” list and click the “Edit” button. This will open the “Edit Content” window, which looks like this:
dynamics23

Scroll down through the text until you come across the following:


What we’re interested in here is the line beginning with “var cssName”. On this line, the text surrounded by inverted commas, after the equal sign, is the name of the CSS file that the JavaScript file will look for (This is the name given to the file when being uploaded). In this case the name of the CSS is the same so there is no change but if the name was different then the text within the inverted commas would need to match. Once the change has been made, click the “OK” button to close the window. Close the “Form Properties” window, save the form and click “Publish”.
Now the “CompositeAddress” CSS will be picked up in the contact form. To test, your form should now have changed from the before to after as shown below:
Before:
dynamics24
After:
dynamics25

Previous Steps:

Adding Autoaddress to a Contact Form

Next Steps:

Add CSS to Dynamics