Customize Product with JS

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Search 3B Knowledge Base

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

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

3B Initiative

Jonathan B – 5 Stars

Get this and simplify your processes Thank you for your review, Jonathan, a happy little acacia tree is planted in your name! The exact coordinates

3B Initiative

Andy K – 5 Stars

Makes forms easy Thank you for your review, Andy, a happy little acacia tree is planted in your name! The exact coordinates of the tree

3B Initiative

Matthew W – 5 Stars

Best Free Forms Product on the AppExchange Thank you for your review, Matthew, a happy little acacia tree is planted in your name! The exact

Innovate, improve, empower. We believe engaged and happy customers make great partners, and see continuous feedback and collaboration as key levers in our shared drive for success. You need a small customisation to fit that nonconforming process step you have? We are more than happy to offer it free of charge. You have a recommendation for improvement/feature implementation? We are happy to listen, and will issue you with a special certificate to credit you for an idea that goes into the product.

As (we hope) you probably guessed yourself already – we want to be the single most flexible and customer-friendly forms solution on the market.