Debugging Client Side Code in Creatio (formerly bpm’online)

When you’ve started writing code for Creatio, without question you’ll need to know how to debug your code. To do this, you’ll use something like Chrome’s dev tools (or something similar) just as you would any Javascript code. However, there’s a few things you need to set up to be able to debug the code. Not to mention, how to even find your code file to debug it. This article will outline the steps needed for getting started with debugging your client side code in Creatio.

In Creatio, when you modify a client side code file and save it, the system builds the workspace files and, in doing so, minifies and combines all the Javascript files. While this does make the client load more quickly, this also makes it impossible, or at least extremely difficult, to debug. However, there is a setting you can use to turn this off, so all of the individual javascript files are served up. Once that is done, you’ll need to understand how to locate the file you want to debug, then you’re all set. Let’s look at the steps.

Step 1: Turning debug mode ON

As I mentioned before, Creatio minifies and combines all of the script files. To turn this off, you’ll need to set debug mode to ON. To do this, open dev tools using Control+Shift+C (Windows, Linux, Chrome OS) or Command+Option+C (Mac), then paste the following in the console tab and hit enter:

Terrasoft.SysSettings.postPersonalSysSettingsValue("IsDebug", true)

Alternatively, you could locate the “Debug mode” system setting (Code “IsDebug”) and turn it on there as well. Once set, just refresh your browser and debug mode is on.

I’d suggest to not leave this on all the time. You’ll find that sometimes other out of the box things in the client won’t work, this is because with debug mode on, rather than logging an error and continuing, the error is thrown, stopping execution of the script. To turn it off again, just execute the same line as above but turn the true to false. Note, debug mode is a per-user setting. Whatever user you’re logged in as when you execute this will have debug mode on, but other users won’t.

Step 2: Locating the file you want to debug

With debug mode on, now you need to locate the file you want to debug. For example, you’ve added code to the Contact page, if you look at the very top of the file you’ll see something like the following:

define("ContactPageV2", [], function() {

“ContactPageV2” will be the name of the file. In dev tools, switch to the Sources tab. Then, rather than browse to locate the file in the loaded sources, which would be extremely difficult, simply open it using CTRL+P (or ⌘+P on a Mac) and start typing the name. Note, in order for it to appear in this list, it needs to be loaded, so be sure you go to the contact page first, so the script is loaded, then you can locate it.

Note, the file name will have a “hash” parameter on the end with a guid. That guid changes anytime you save the file, so if you make changes, you’ll need to re-locate the file again.

Step 3: Debugging

With your file located and opened, you’ll see your code, most likely, at the very bottom of the file. All the different versions of the page will all exist in this same file you’ve opened, your’s will likely be the last part of the file. Now you can debug as you would with any javascript file. Set breakpoints, inspect values, etc.

Once you’re done, don’t forget to turn debug mode off again.

ABOUT THE AUTHOR

Ryan Farley

Ryan Farley is the Director of Development for Customer FX and creator of slxdeveloper.com. He's been blogging regularly about SalesLogix, now Infor CRM, since 2001 and believes in sharing with the community. His new passion for CRM is Creatio, formerly bpm'online. He loves C#, Javascript, web development, open source, and Linux. He also loves his hobby as an amateur filmmaker.

1 Comment

  1. Thanks for sharing your insights on debugging Creatio

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe To Our Newsletter

Join our mailing list to receive the latest Infor CRM (Saleslogix) news and product updates!

You have Successfully Subscribed!