Custom Code 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

What are the future updates around this update?

  • Incorporating a “Status” to turn on/off custom code without having to erase your code
    • In the meantime, you can setup a conditional around your custom JS code to turn it on/off
      • Such as wrapping it all with if(1=0)
    • In version 4.7 you can also use the CIMcloud helper environment¬†to run code in staging or production only
  • Marking if the page being viewed has been customized
    • This will display if any Custom Code blocks exist on the page, as well as if any hooks were added


[A] Sitefront Custom Code Badge

Custom Code Custom Code Overview Custom Code Sitefront Badge

[B] Worker Portal Custom Code Badge

Custom Code Custom Code Overview Custom Code Worker Badge

[B] Custom Code Manage Page

Custom Code Custom Code Overview Custom Code Manage

[C] Custom Code Add-Edit

Custom Code Custom Code Overview Custom Code Add Edit




Was this article helpful

Related Articles

Subscribe to receive email updates of what's new in the CIMcloud Help Center.