Custom Code Overview

Overview

In version 4.7, we released a new trigger to customize Javascript and CSS by page-type, This allows better organization of custom JS/CSS.

Previously, Javascript could only be added Globally under Customer Sites -> Advanced section.

We’ll identify what changes have been made with this new functionality in this article.

What’s in the update?

New Badge on the sitefront to “Customize” in the lower left corner
- Screenshots [A] and [B] below
New Pages in the Worker Portal to manage custom JS/CSS
- Custom Code Manage
  - Screenshot [C] below
- Custom Code Add-Edit
  - Screenshot [D] below
New page type contexts attached to the custom code
Allowing custom JS/CSS in the Worker Portal

How can I see the new “Customize” badge?

Worker Portal: The badge will display automatically

Sitefront: You will need to impersonate a customer to see the “Customize” badge

What differences will I see when customizing via the Customize badge?

When customizations are added via the “Customize” badge, the page’s context will be applied
- For example, if you are making a change on the Product Detail page, this JS/CSS will be applied to only Product Detail pages

Can I still make Global Customizations in the Advanced Section of Customer Sites?

Yes, and your customizations will not be modified when you update to v4.7

How can I temporarily disable code?

There are several ways to do this:

Change the Custom Code’s Enabled field to “Disabled” to disable a specific code block
Under Customer Sites > (site) > Features set the Allow Custom Modifications > Modifications – Enable customizations setting to No to disable all custom code on that customer site.
Under Settings Workspace > System-Wide Settings > Workspace Settings set the the Allow Custom Modifications > Modifications – Enable customizations setting to No to disable all custom code on the Worker Portal

If you are on an older version of CIMcloud and do not see those options, you can setup a conditional around your custom Javascript code to turn it on/off. For example:

if(1==0){ 

<code-to-disable> 

}

How can I only run code in staging or production?

Custom code changes are first applied to staging and then published to production using the Publish To Production button next to the code editor. You can also see the version of code on staging and the version on production in the editor.

Prior to version 4.15 code changes apply to both staging and production (there is not a staging copy). In this case, you can use the CIMcloud helper environment to conditionally run code in staging or production only.