Today's blog post was written by Angel Shishkov, Principal Developer at Sonoma Partners.
At Sonoma Partners, we use CRM to track our internal work tasks, among many other things. Some of our clients and projects use their own systems for work and defect tracking, like Jira, Trello, or Excel, so we often have to consolidate data between the systems.
Today, I am going to talk about a quick and easy integration we built to bring Trello cards into CRM tasks.
First of all, I will assume you know what Trello is and how it is used. In this particular case, we used the cards as the equivalent of defect reports, along with comments, image attachments, and moving the card between different lists to indicate a status change. The manual process was to have our QA open the card in Trello, review the comments, create a record in CRM, and manually copy the card contents into it. The goal was to automate this process and eliminate the manual copying of the card contents into CRM.
I’d like to qualify what I mean by “quick” and “easy,” since both of those are relative terms. As far as integrations go, this one is quick because you could set it up in less than a couple of hours, and it is easy because it does not require you to learn the intricacies of either system being integrated (Trello and CRM in this case). There is some code involved, and your mileage will vary based on your development experience.
We need a way to create a CRM Task from a Trello Card, so we are going to need a way for the user to trigger this action while they have the Trello card open. For this example, we are going to use a Chrome Extension to put a button in the Chrome toolbar for the user to click. The actual logic we will write to read the Trello card and create the CRM Task, however, is not specific to Chrome Extensions.
The way we are going to connect the two systems is where the “easy” part comes in – we will not use either the Trello, CRM API, or SDK to do this, so you do not need to learn either. We are going to pull the Trello card’s contents through the Trello JSON feed, which is a feature that allows you to get a card’s contents in JSON format simply by adding “.json” to the end of the card’s URL. Since the user already has the card open in their browser, this should be easy. As for creating a Task in CRM, we are going to cheat a bit and not actually create the Task, but rather open a new Task form and pre-populate the subject and description fields with data from the Trello card. The user can then review the Task, make any changes, and hit Save to create it in CRM.
We need to set up our Chrome Extension first, however, I will not go in-depth about Chrome Extensions since that isn’t the focus of this article. I will lay out the basic steps, and know that there is much more detail online for those interested.
- If you have Visual Studio or you have done this before, you can use the Chrome Extension project template available here.
- If you are setting up the extension folder manually, create the following folder structure:
- In the img folder, put a 19x19 pixel image file called, "icon.png." This will be the icon of the extension in Chrome.
- In the lib folder, put a copy of the minified jQuery library. You can download it here. In this example, we will use jquery-3.1.0.min.js
- In the app folder, create the following three files. We will add content to them later.
Now you should have your three folders set up with some files in them. Let’s add some content.
Open manifest.json in a text editor.
- manifest.json is the file that tells the Chrome Extension what components are included, what permissions are required, etc. Paste the following and save the file. If you did not use the file names above, make sure to change them below as well.
Open popup.html in a text editor.
- popup.html is the little web page that will open when you click on your extension icon in the Chrome toolbar. We don’t strictly need a web page for a simple extension like this, but we will add one for future enhancements anyway. Our web page has a title and a button for the user to click. Paste the following and save the file.
Open popup.js in a text editor.
- We will begin at the bottom first. The part that start with “document.addEventListener” just tells the page to call our init() function when it has loaded (that is, whenever the user clicks the extension icon in Chrome, which causes the page to display).
- Back up at the top, “TrelloToCRMController” is just a nice way to encapsulate all our logic into one “namespace.” All our methods are inside this namespace.
- Taking the methods from the bottom again – the init() function is what is called when our Chrome Extension webpage opens. It finds the Create Task button on the page and attaches a click handler function to it. This function will get called when the user clicks the Create Task button and it is called btnCreateTask_Clicked.
- The btnCreateTask_Clicked() function is called when the user clicks the Create Task button. It uses the Chrome Extension API to get the currently active tab in the browser and pass it to the createTaskFromTab function.
- The createTaskFromTab(tab) function takes a Chrome tab as a parameter and is the main function that reads the Trello card and opens the CRM task. It goes through several steps:
- Call getJSON to retrieve the JSON contents of the Trello card. We are using jQuery, which was included in the extension during setup, so we have access to the $.getJSON method. It is an asynchronous method, so the rest of the code is inside the callback function.
- We are going to set two fields on the CRM Task – the title and description. The title will be the card name, but we want the description to be a list of all the actions on the card – comments, attachments and moves from one list to another. These actions are stored in the card.actions collection, so we loop through all of those to construct a description string.
- There are different types of Trello card actions, such as “commentCard”, “updateCard”, etc. They have slightly different properties, so we have a case statement to process each. For “createCard” we just log who created it. For “commentCard” we record the comment text. “updateCard” is a move from one list to another, so we record the previous list and new list in the string. And for “addAttachmentToCard” we just record the URL of the attachment.
- Once the description string is prepared, the last piece left is to open the Task form in CRM. Forms in CRM can pre-populate their fields with data based on parameters passed in the URL. Specifically, there is a parameter called “extraqs” that can contain a list of name/value pairs of field names and their values. We are going to use this feature to open the Task form with a pre-populated subject and description. Finally, the newTaskUrl variable is the URL to a new Task form in CRM and we use the Chrome API to open a new tab to that URL.
This is the last step (besides all the bug fixing and enhancement requests that will come) in the example. Since we used a Chrome Extension to host our solution, we will need to install it in Chrome to test it out.
- Open Chrome, click the ellipsis on the top-right for the menu and open the Settings page. Select Extensions on the left.
- Check the Developer Mode checkbox on the top. This will display a couple of extra buttons. We are going to use Developer mode to quickly deploy our extension, so we don’t have to bother with deploying it to the Chrome app store.
- Click the Load Unpacked Extension button on the top. If you don’t see it, make sure Developer Mode is checked.
- Browse to your “app” folder and select it, click OK.
- You should see your extension appear in the list on the Chrome Extensions page. Make sure Enabled is checked and there are no errors. If you make any changes to the code, you can come back here and click Reload to update the extension with your latest changes.
- You should now see the extension icon you added during Setup show up in the top right of the Chrome browser.
- Open Trello, browse to a board and open a card to test with. With the card open in the Chrome tab, click the extension icon. A small webpage will drop down with a Create Task button. When you click it, a new Chrome tab will open with your CRM task. Congratulations!
This is a relatively simple and bare-bones integration. It is not very configurable, has no error handling and doesn’t look great, but it gets the job done. If you are looking to expand on this or build something much more complex and you need some help, give us a call. Thanks for reading!
This post first appeared on Sonoma Partners Microsoft CRM And Salesforce.com B, please read the originial post: here