Sonoma Partners Microsoft CRM and Salesforce.com Blog

Building CRM Web Resources with React

Web Resource Development

Microsoft Dynamics CRM has allowed us to develop and host custom user interfaces as Web Resources since CRM 2011.  Since then, the web has exploded with JavaScript frameworks.  In addition, browsers have started to converge on standards both in JavaScript object support and CSS.  In short, its a great time to be building custom user interfaces on top of Microsoft Dynamics CRM.

Today we’ll be working with React, an emerging favorite in the JavaScript world.  React’s key benefits are its fast rendering time and its support of JSX.  React is able to render changes to the HTML DOM quickly, because all rendering is first done to JavaScript objects, which are then compared to the previously generated HTML DOM for changes.  Then, only those changes are applied to the DOM.  While this may sound like a lot of extra work, typically changes to the DOM are the most costly when it comes to performance.  JSX is a syntax that combines JavaScript and an XML-like language and allows you to develop complex user interfaces succinctly.  JSX is not required to use React, but most people typically use it when building React applications.

The Sample Application

To demonstrate these benefits, we’ll build a simple dashboard component that displays a list of the top 10 most recently created cases.  We’ll have the web resource querying for new cases every 10 seconds and immediately updating the UI when one is found.

CaseSummary

The files that I will be creating, will have the following structure locally:

CaseSummary/ 
├── index.html 
├── styles.css 
├── app.jsx 
└── components/ 
    ├── CaseSummary.jsx     
    ├── CaseList.jsx 
    └── Case.jsx

However, when we publish them as web resources in CRM, they will be simplified to the following:

demo_/
└── CaseSummary/ 
    ├── index.html 
    ├── styles.css 
    └── app.js

Other than including the publisher prefix folder, the main change is that all of the JSX files have been combined into a single JavaScript file.  We’ll step through how to do this using some command line tools.  There are a few good reasons to “compile” our JSX prior to pushing to CRM:

  1. Performance – We can minify the JavaScript and bundle several frameworks together, making it more efficient for the browser to load the page.
  2. More Performance – JSX is not a concept that browsers understand by default.  By converting it to plain JavaScript at compile time, we can avoid paying the cost of conversion every time the page is loaded.
  3. Browse Compatibility – We can write our code using all of the features available in the latest version of JavaScript and use the compiler to fill in the gaps for any older browsers that might not support these language features yet.
  4. Maintainability – Separating our app into smaller components makes the code easier to manager.  As you build more advanced custom UI, the component list will grow past what I am showing here.  By merging multiple files together, no matter how many JSX files we add to the project we just need to push the single app.js file to the CRM server when we are ready.
  5. Module Support – Many JavaScript components and libraries are distributed today as modules.  By compiling ahead of time we can reference modules by name and still just deploy them via our single app.js file.

Exploring the Source Code

The full source code for the example can be found at https://github.com/sonomapartners/web-resources-with-react, but we will explore the key files here to add some context.

index.html

This file is fairly simple.  It includes a reference to CRM’s ClientGlobalContext, the compiled app.js and our style sheet.  The body consists solely of a div to contain the generated UI.

app.jsx

Now things start to get more interesting.  We start by importing a few modules.  babel-polyfill will fill in some browser gaps.  In our case it defines the Promise object for browsers that don’t have a native version (Internet Explorer).  The last three imports will add React and our top level CaseSummary component.  Finally we register an onload event handler to render our UI into the container div.

components/CaseSummary.jsx

CaseSummary is our top level component and is also taking care of our call to the CRM Web API.  This is also our first look at creating a component in React, so let’s take a look at each function.  React.createClass will take the object passed in and wrap it in a class definition.  Of the five functions shown here, four of them are predefined by React as component lifecycle methods: getInitialState, componentDidMount, componentWillUnmount and rendergetInitialState is called when an instance of the component is created and should return an object representing the starting point of this.state for the component.  componentDidMount and componentWillUnmount are called when the instance is bound to and unbound from the DOM elements respectively.  We use the mounting methods to set and clear a timer, which calls the loadCases helper method.  Finally, render is called each time the state changes and a potential DOM change is needed.  We also have an additional method, loadCases where we use the fetch API to make a REST call.  The call to this.setState will trigger a render whenever cases are loaded.  We definitely could have made this component smarter by only pulling case changes, but this version demonstrates the power of React by having almost no impact on performance even though it loads the 10 most recent cases every 10 seconds.

components/CaseList.jsx

By comparison CaseList.jsx is pretty straight forward.  There are two interesting parts worth pointing out.  The use of this.props.cases is possible because CaseSummary.jsx set a property on the CaseList like this: <CaseList cases={this.state.cases} />.  Also, it is important to notice the use of the key attribute on each Case.  Whenever you generate a collection of child elements, each one should get a value for the key attribute that can be used when React is comparing the Virtual DOM to the actual DOM.

components/Case.jsx

The simplest of the components, Case.jsx outputs some properties of the case with some simple HTML structure.

Compiling the Code

We’re going to start with using NodeJS to install both development tools and runtime components that we need.  It is important to note that we’re using NodeJS as a development tool, but it isn’t being used after the code is deployed to CRM.  We’ll start by creating a package.json file in the same folder that holds our index.html file.

package.json

After installing NodeJS, you can open a command prompt and run “npm install” from the folder with package.json in it.  This will download the packages specified in package.json to a local node_modules folder.  At a high level, here are what the various packages do:

  • webpack, babel-*, imports-loader, and exports-loader: our “compiler” that will process the various project files and produce the app.js file.
  • webpack-merge and webpack-validator: used to help manipulate and validate the webpack.config.js (we will discuss this file next).
  • webpack-dev-server: a lightweight HTTP server that can detect changes to the source files and compile on the fly.  Very useful during development.
  • react and react-dom: The packages for React.
  • babel-polyfill and whatwg-fetch: They are bringing older browsers up to speed.  In our case we are using them for the Fetch API (no relation to Fetch XML) and the Promise object.

The scripts defined in the package.json are runnable by typing npm run build or npm run start from the command prompt.  The prior will run and produce our app.js file and the latter will start up the previously mentioned webpack-dev-server.  Prior to running either of them though, we need to finish configuring webpack. This requires one last config file to be placed in the same folder as package.json. It is named webpack.config.js

webpack.config.js

As the file name implies, webpack.config.js is the configuration file for webpack.  Ultimately it should export a configuration object which can define multiple entries.  In our case we have a single entry that monitors app.jsx (and its dependent files) and outputs app.js.  We use the webpack.ProvidePlugin plugin to inject whatwg-fetch for browsers that lack their own fetch implementation.  We also define that webpack should use the babel-loader for any .jsx or .js files it encounters and needs to load.  The webpack-merge module allows us to conditionally modify the configuration.  In our case we are setting the NODE_ENV environment variable to “production” for a full build and turning on JavaScript minification.  Finally we use the webpack-validator to make sure that the resulting configuration is a valid.

Deploying and Continuing Development

At this point all of the files should be set up.  To deploy the code, you would run npm run build and then deploy index.html, app.js, and styles.css as web resources to CRM. 

If it becomes tedious to keep deploying app.js to CRM as you make small changes, you can set up an AutoResponder rule in Fiddler to point at the webpack-dev-server.  Once this rule is in place, when the browser requests files like index.html and app.js from the right subfolder of the CRM server, Fiddler will intercept the request and provide the response from wepack-dev-server instead.  This way you can just save your local JSX files and hit refresh in the browser as you are developing.  Of course you need to be sure that you have started wepack-dev-server by running npm run start from the command line.  I have included an example for the rule I set up for this demo below:

fiddlerAutoResponder

With that you should be set to start building your own CRM Web Resources using React!

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013 Microsoft Dynamics CRM 2015 Microsoft Dynamics CRM 2016 Microsoft Dynamics CRM Online

How to Mass Update Business Process Stages

Today's guest blogger is Rachel Sullivan, a Senior Consultant at Sonoma Partners

CRM allows you to easily update fields on records using their bulk edit functionality.  Records that you can query and return back in a list/grid can all be edited using this functionality.

However, since it’s currently not a field on the Opportunity form, there is no way to update the Business Process stage using this native bulk edit feature.  However, fear not, as Sonoma is here to provide a workaround on how to edit this field using native export/import.

In order to update the Business Process Stage using this workaround, follow these steps below.

1. You’ll first need to find the unique identifier of each process stage (the GUID).   To accomplish this, use Advanced Find to identify the opportunities that you would like to update.

3. Edit the columns and include Process Stage

4. Click Results and from this view, you can see all of the unique Process Stages and their GUIDS

image

You will need to match each unique GUID with the Process Stage Name.  The easiest way to do this is to open a record of each unique Process Stage value, view the Process Stage name.  Do this for each unique Process Stage.

For Example:

  • d3ca8878-8d7b-47b9-852d-fcd838790cfd = Propose
  • 650e06b4-789b-46c1-822b-0da76bedb1ed = Develop

imageimage

5. Once all GUIDS are gathered, you’ll need to export the records that you’d like to update.  When doing this, make sure to check the box that makes the file available for re-import (note that with CRM 2015 Online Update 1, all records are automatically exported for reimport and this step isn’t necessary.  This should come to CRM 2015 On Prem in the fall).  Save the file locally and open it with Excel.

image

6. Once in Excel, copy and paste the GUID of the business process stage (that you’d like to change each record to) into the Process Stage column.  Save the file and import back into CRM.

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013 Microsoft Dynamics CRM 2015 Microsoft Dynamics CRM Online

Dynamics CRM 2015 – Advanced Find Returns

Like most users of Dynamics CRM 2013, it’s taking me awhile to get used to the new navigation.  However, with any software deployment, it takes users time to get used to the new functionality and especially the new look and feel. 

It’s hard to remember when CRM 2011 came out (way back almost 4 years ago now) and the introduction of the ribbon.  What a crazy concept the ribbon was and how would we ever get used to it?  However, after using 2011 over time (and honestly any Microsoft product), the ribbon became second nature.  When Microsoft removed the ribbon in 2013, everyone complained it was missing.  How would we now get used to not having a ribbon?  I believe that over time Dynamics CRM 2013 and 2015 will fall into the same camp as 2011 where users will become comfortable using the new navigation and will have forgotten the ribbon ever existed.

We recently just upgraded our internal CRM deployment to 2015 and I’m forced to get used to the navigation even quicker than originally anticipated.  Of course with every new release there are those learning curves and the questions you ask “why did they do it this way?” but the good news is that with Microsoft, they’re listening.

One of the biggest complaints of 2013 is the fact that the Advanced Find was buried and not readily available on the global tool bar like it was in 2011.  In some areas of the application you couldn’t even initiate Advanced Find.  And those areas where you could, you had to click on the ellipsis to bring down additional contextual menu items to find Advanced Find.

SNAGHTML33926d4

However, the good news is in 2015, Microsoft has listened to initial feedback from users of 2013, and have added the Advanced Find menu back in the global tool bar so that you can always initiate Advanced Find no matter where you are in the application. Enjoy!

SNAGHTML3430206

Topics: CRM Upgrade Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013 Microsoft Dynamics CRM 2015

Data De-Duplication through Fuzzy Matching

Today's guest blogger is Chris LaBadie, a Senior Database Developer at Sonoma Partners

Whenever we work on a data project for a customer the subject of cleaning their client data is always a discussion point.  The project could involve a migration from one CRM platform to another, integrating an ERP system into CRM, or even cleaning their data “in place”- but the message is usually the same, “we know we have duplicates in our data, help us clean it up!”

Anybody that has ever tried to track people or companies knows that it can be a huge challenge to avoid duplicate data.  When you have multiple users maintaining data, it is very common to introduce duplicate data no matter the de-duplication safeguards your system uses. 

Working with people-
•    Names can be difficult to track (misspellings, maiden names, nicknames, etc).
•    People move/change contact information.
•    Even unique fields like address or email address can be shared amongst more than one person. 

Working with companies-
•    Abbreviations or acronyms in names can present a challenge.
•    Companies can have multiple locations.
•    Often use different addresses to track billing, shipping, etc.

In our experience, there isn’t a magic bullet to eliminate de-duplication.  The best solution is usually a layered approach- use form validation to ensure quality data entry, intelligent system design to store records in an organized manner, and system de-duplication rules to search out potential duplicate data and present to a user records that might match the information they are attempting to enter. 

However, a common project for Sonoma Partners is moving a client to a new CRM platform and an important part of migrating data to the new platform is to identify potential duplicate data before it ever reaches the new system.  While this may sound like a large effort, it is actually pretty easy thanks to the Fuzzy Grouping functionality built into SQL Server Integration Services (SSIS). 

Fuzzy Grouping allows SSIS to inspect a set of data and compare one or more fields in the dataset.  Rather than comparing the field data, Fuzzy Grouping will match strings based on their sounds- giving more accurate results based on how a person would hear the string while overcoming misspellings, typos, abbreviations, nicknames, etc.  Note, you will need SQL Server Enterprise or SQL Server Developer edition to use Fuzzy Grouping.  This example is developed using the Business Intelligence Design Studio (BIDS) in SQL Server 2012.

In this demonstration we will process an Excel file of contacts.  This file can be generated from any other system and used in a process like this to identify potential duplicate data before that data is migrated to CRM.  The end result of this process is to produce a file containing potential duplicates so they can be reviewed and cleaned up in the source system before data migration.

Fuzzy Grouping evaluates the file of Contacts and compares them based on selected fields.  Potentially duplicate records are grouped together and assigned a group number.

After Fuzzy Grouping, the process splits so it can sort the results based on their Fuzzy Grouping group number and count the number of records per group. 

Finally, a step to check the group count determines which records are potential dupes- a group count of 1 means the record is unique, anything more than 1 means that group contains 1 or more records that should be reviewed.  The potential duplicates are then exported to an Excel file for review. 

dedupe-new-process 

Configuring Fuzzy Grouping is a pretty straight-forward process, just select the fields you want to compare and set the minimum amount of similarity (roughly a percentage of matching).  This process can involve a little bit of trial and error while you fine-tune the Fuzzy Grouping to identify the records that are potential duplicates without letting through any false positives. 

Typically we will start with lower minimums and go up until we are seeing the desired results.

DeDupeBlog-FuzzyGroup1 

When you run the process, you can see how many records it processes and how many records SSIS ultimately decided to export to Excel for review.

dedupe-new-process-complete 

When the process is complete, you can view the results in your Excel file. Here you can see the unique record number assigned to the record (KeyIn), group number (KeyOut), overall score (percentage of match to the potential duplicate record), similarities for First Name/Last Name/City (percentage of match for each column), and the Group Count (number of potential duplicates per record group).  The highlighted values in the screenshot show some of the values that were compared and demonstrate how Fuzzy Grouping can identify potential duplicates despite common misspellings, nicknames, and partial matches. 

DeDupeBlog-Output-cropped 

In conclusion, Fuzzy Grouping is an easy to use and powerful tool to assist in any data cleanup effort.  It is simple to setup, and quickly evaluates large amounts of data.  SSIS can provide you with all of the tools to make informed decisions regarding your customer data, your most valuable asset.

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013

Poodle and your CRM

Today I am co-blogging with Blake Scarlavai, Development Principal and Microsoft Dynamics blogger at Sonoma Partners.

Nathen:

Recently a vulnerability in SSL 3.0 known as “Poodle” gained some significant attention, with many companies responding in various ways to ensure their customers’ data is protected. It can be confusing to keep track of what companies are doing what, and what is expected of you as a customer to ensure you are not vulnerable. Below are the summaries of the responses that Salesforce and Microsoft have taken.

Salesforce’s Response

Salesforce is in the process of disabling SSL 3.0 on their platform. By the end of December, you will no longer be able to use SSL 3.0 visit Salesforce’s platform. For the most part, we don’t expect this to affect our clients as the browsers which needed SSL 3.0 still enabled (IE 6 mainly) are already not supported by Salesforce. You can get the full list of the disable schedule and more information about the changes on Salesforce’s help page.

Blake:

Microsoft’s Response

Microsoft is in the process of remediating their online services for the SSL 3.0 vulnerability.  Below is a time table for each of the CRM services:

Service

SSL v3.0 Mitigation Status

Microsoft Dynamics  CRM Online

7-Dec

Microsoft Dynamics Marketing

7-Dec

Microsoft Social Listening

Completed

Parature for Microsoft Dynamics

Completed

Microsoft Dynamics Lifecycle Services

7-Dec

Online Services for Microsoft Dynamics

7-Dec

 

Microsoft also recommends disabling SSL 3.0 in your browser.  The following resources can be used for your respective browser:

For more information on Microsoft’s response, click here.

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013 Microsoft Dynamics CRM 2015 Microsoft Dynamics CRM Online Salesforce.com

Dynamics CRM and Chrome v38 Lookup Issue Fixed!

You may have heard about an issue with Lookups not working correctly with a recent version of Chrome (v38).  Microsoft documented the issue here in a KB article earlier this month.

Last week we noticed that in a new CRM Online trial org with a version of (6.1.1.1621) (DB 6.1.1.1610), the Chrome v38 Lookup issue was resolved so it seems that Microsoft was working on a patch.  Today though we have noticed that with the latest version of Chrome (v38.0.2125.111) the Lookup issue is fixed across the board in CRM Online, CRM 2013 On-prem and CRM 2011 On-prem. 

So if you or your users were stuck on v38 of Chrome then be sure to go to Settings –> About and make sure you’re updated to the latest version to fix the Lookup issues.

image

 

To check your CRM Online version, click the Gear icon at the top right and then click About.

image

 

image

Topics: Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013 Microsoft Dynamics CRM Online

How to: Setting up Unified Service Desk

Earlier this year, we posted an overview of Unified Service Desk based on a Convergence session.  Now that the Spring ‘14 update has been released, get can get our hands on USD ourselves.

Note: This walkthrough is only meant for a development environment and should not be used for production.

First, head here to download the USD package.  This contains a CRM2013-USD-PackageDeployer.exe and a UnifiedServiceDesk.msi.  Run the msi which will install the actual USD desktop client onto your machine. 

Next step is to run the CRM2013-USD-PackageDeployer.exe which will extract files to a specified folder.  Navigate to the extracted folder and it should contain a PackageDeployer.exe.  This is the new Package Deployer tool that we blogged about last week but it will already contain packages specific to USD.  This tool will deploy solutions and import data to your organization so it is highly recommended to be done in a development environment.         

Run the PackageDeployer.exe and you’ll come to a login screen.  Enter credentials for the organization that you would like to install USD to and click Login. 

image

Next you will get a list of package options to use.  Select the package you would like to use and click next.

image

Clicking Next will move onto the next page that displays a detailed description of the package you are about to import into your organization.

image

Click Next to verify the organization you are installing to and then Next again and the tool will validate the solutions and import files that it is about to install.

image

Clicking Next again will start the import process and display a report of the status.  If there are any errors, you can click the link at the bottom left to view the log file.

image

Clicking Next will display the completion page.  Then click finish and you’re done with the installation process!

image

Now you can open the Unified Service Desk client that you installed in the first step.  A login screen very similar to the Package Deployer tool will display.  Enter your credentials to the organization that you installed USD to.

image

image

Now you can play around with USD in your organization and get a feel for what is possible.  If you are interested in extending USD, head to MSDN where there is a great set of walkthroughs on adding custom modules, layouts, iframes, etc.

Topics: Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013

Dupe Detection on Create/Update Returned to Dynamics CRM 2013…with a bug

One of the biggest features removed when Microsoft Dynamics CRM 2013 was released was Duplicate Detection firing on creates/updates.  While duplicate detection remained via scheduling system jobs, the popular feature of seeing the pop-up appear on creates/updates was removed.

Needless to say the CRM community was in uproar, prompting some users and partners to create their own solutions to backfill the gap that was left by removing this 2011 feature such as this utility by Jason Lattimer.

With the Spring 2014 release that’s started to trickle out to CRM Online orgs, Microsoft has taken this community feedback and put duplicate detection on creates/updates back in.

image

However, be aware that while Microsoft has pleased many by making this functionality available once again, they didn’t quite get it right.  If you disable duplicate detection rules from running on creates/updates within the settings, the rules still fire and your users will still see the dialog when they create or update records that match a duplicate detection rule.

image

The only way to disable duplicate detection from firing on creates / updates is to uncheck the “Enable duplicate detection” checkbox which in turn disables it across the board (on data imports, from MS Outlook, and via scheduled system jobs).  Even if you uncheck “Enable duplicate detection” and recheck it (while leaving the creates/updates unchecked), after republishing your rules, the dialog will still fire on create and update. 

Note:  If you uncheck “Enable duplicate detection” and recheck it, you’ll have to republish your rules as disabling it system wide unpublishes all rules.

Hopefully Microsoft will release a patch soon for this slight oversight so that users can take full advantage of the duplicate detection feature as they did pre-CRM 2013.

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013 Microsoft Dynamics CRM Online

CRM 2011 UR17 has been Released!

Microsoft just released UR17 for CRM 2011 and it comes packed with 60+ bug fixes.  The big news is that with UR17, Internet Explorer 11 on Windows 8.1 or Windows 7 is now supported in CRM 2011!

The following are some key bug fixes that stuck out for me:

  • After Update Rollup 12 or greater is applied to the Outlook client, the startup time for Outlook.exe can be significantly impacted if the configured organization contains many customizations
  • Recurring Series Expansion job does not complete if Recurring Appointment owner is a team.
  • N:N relationship records are not replicated offline
  • Cannot change owner on create of Appointment after Update Rollup 16
  • When you have an HTML web resource on a form, the web resource is removed when clicking the backspace button in Internet Explorer

And for devs, there was a fix to the OrganizationServiceContext as well

  • SDK OrganizationServiceContext fails to update a related record while in a create transaction.

Head to the following link for the full list of bug fixes - http://support.microsoft.com/kb/2915687/en-us.

And here for the actual download - http://www.microsoft.com/en-us/download/details.aspx?id=42672.

As always, the best practice is to backup your organization and be sure to install the UR in a development environment first to test all of your current functionality and make sure there are not any issues with it before installing to production.

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011

CRM 2013 - Phone Call fields won’t default from Sub-Grid

We recently ran into the following issue with native defaulting of fields on the New Phone Call form from an Activities sub-grid in CRM 2013. The functionality exists in CRM 2011 and exists in CRM 2013 if you create a New Phone Call from a related Activities grid.

For example, you can go to a Contact record and view the related Activities through the Associated Grid as shown below.

image

Then if you click to add a new Phone Call, a new Phone Call record displays with the Call To and the Phone Number field automatically populated.

clip_image001

This is a great time saver and allows you to quickly create a Phone Call record. The issue is if you use a sub-grid for Activities (rather than needing to navigate to the related grid) then the Call To and Phone Number won’t auto-populate as it does from the related grid or how CRM 2011 used to default it.

For example, I have an Activities sub-grid on my Contact form which allows me to easily create a new Phone Call directly from the sub-grid.

image

This pops open a new Phone Call record but without Call To and Phone Number populated.

image

Microsoft was made aware and a Connect item has been created here. Any upvotes will help bring this functionality sooner rather than later!

Topics: Microsoft Dynamics CRM Microsoft Dynamics CRM 2011 Microsoft Dynamics CRM 2013