Customize Product with JS

You are here:
< Back

Why add Javascript?

Our experience tells us that clients want to be able to make small workflow amendments to Salesforce software products (please read the article Vision.page). As such, we added the ability to include Javascript files in the product with the aim to:

  • Add validations
  • Improve UX
  • Fix Small Bugs
  • Add workflows
  • Expand capability*

If you are experienced developer and you understand JQuery, Bootstrap and the concepts of Single Page Applications (SPA), then you can proceed with this article!

How does it work?

Every Visualforce Page that originates from the 3B Forms product has native CSS and JS included in order to provide a good UI and UX. However, something that few people know is that you can actually add your own CSS and JS by using Salesforce’s Custom Metadata Types. Once you define a Metadata Record, 3B Forms will attempt to inject the Javascript File into every page that originates from the package.

What is needed?

Knowledge of Javascript and 3B Forms, of course. Oh, and a Static Resource.

Follow these steps to add your very own Javascript Files to 3B Forms:

  • Create a *.js file locally on your machine. Put your favourite code inside.
  • Create a new Salesforce Static Resource
    • Navigate to Setup
    • In the Quick Find box, type “Static Resources”
    • Create a new Static Resource and give it a memorable name. Make sure to select Cache Control: Public!
    • Save the static resource.
  • Head over to Custom Metadata Types  to tell 3B Forms which resource you want to use
    • Navigate to Setup
    • In the Quick Find box, type “Custom Metadata Types”
    • You should see one record called Product Customization

  • Click on Manage Records to create new entry.
    • Give the record a Name & Label (really doesn’t matter how you name it!)
    • In the field “JS Static Resource Name” put the name of the static resource you created earlier
    • Make sure that the field “Active” is checked
    • Save the record

That’s it! Now, 3B Forms will include your Javascript File on every page that originates from the app!

Note:

  • If you do not want 3B Forms to inject specific JS Files, just un-check the field “Active”
  • You can have multiple JS files inserted at the same time