OnePlan Custom JavaScript: How to Turn It On and Use It Safely
A client wanted a cleaner timesheet in OnePlan. We planned a small fix with OnePlan Custom JavaScript. This post covers what OnePlan Custom JavaScript is and how to turn it on. It also shows how to use it without breaking anything.
At a Glance
Item | Details |
Products | OnePlan (Config settings and the Custom JavaScript editor) |
Who can set it up | A OnePlan administrator |
Time needed | About 10 minutes, depending on the change |
Prerequisites | An Administrator account, Advanced Settings enabled, Enable Customizations turned on (if your environment shows it), and a test environment |
What it changes | It depends on your code. Code that only hides items changes the screen, not your data. |
Why Would You Use Custom JavaScript in OnePlan?OnePlan?
OnePlan's Custom JavaScript feature lets organizations make their own changes to the interface. It suits small, targeted screen changes.
Our client's staff used OnePlan Timesheets only to enter hours. But the grid also showed a Comments button and a Progress column they never used. Instead of changing core OnePlan functionality, we hid both with a short script. Timesheet data and processes stayed the same.
Want the script? It's in our guide to customizing OnePlan Timesheets.
Hiding things isn't the only use. OnePlan's own Google Analytics setup guide refers to the same editor.
Custom JavaScript makes sense when:
You need a small, clear change to how a page looks.
You can test the code before it reaches staff.
Someone can re-check the code after OnePlan updates.
It doesn't make sense when you need to switch a feature off for real. Hiding a button is not disabling the feature.
Want the bigger picture? Our OnePlan consulting hub covers planning and running OnePlan.
What Is OnePlan Custom JavaScript, and How Does It Work?
Think of it as two parts:
A switch: Enable Customizations. To enable JavaScript and CSS customizations in OnePlan, open the following URL: https://my.oneplan.ai/config/advanced
Make sure the Enable Customizations checkbox is checked to allow custom JavaScript and CSS.
A place to write code: the Custom JavaScript editor. It is at https://my.oneplan.ai/config/js.
Your code runs in the browser. Most scripts find part of a page by its HTML ID or CSS class, then change it. Our Timesheet script, for example, finds the grid by its ID, TimesheetGrid, and hides two items in it.
Some OnePlan pages redraw as people add rows or change views. Our script uses a MutationObserver, a browser tool that runs the script again whenever the page changes. It also checks for the Timesheet grid first, and stops if the grid isn't there.
How to Turn On OnePlan Custom JavaScript
You need an Administrator account, and Advanced Settings must be enabled. Work in a test environment first.
Step 1: Look for Enable Customizations
OnePlan allows you to customize its interface using JavaScript and CSS. You can add custom buttons, hide specific elements, and modify the appearance of pages to meet your requirements.
Step 1: Enable Customizations
To enable JavaScript and CSS customizations in OnePlan, open the following URL:
Make sure the Enable Customizations checkbox is checked to allow custom JavaScript and CSS.
This is where we got stuck. Our Advanced tab didn't show Enable Customizations. OnePlan may now turn on Custom JavaScript by default, but it hasn't confirmed this. Check whether custom code already works in your environment. If it doesn't, contact OnePlan Support.
Step 2: Open the Custom JavaScript editor
Go to https://my.oneplan.ai/config/js. Is your environment in another OnePlan region? Use that region's address instead. [verify]
Step 3: Add your code the safe way
Save a backup of any code already in the editor, outside OnePlan.
Paste your new code into the editor.
Add a short comment above it that says what it does. Lines that start with // are comments.
That comment makes undoing easy. You can find one change and remove it without touching the rest.
Step 4: Save and check that it worked
Click Save in the Custom JavaScript editor.
Go to the page your code changes, and refresh your browser.
Check that the change shows up the way you expected.
Then use the page the way staff will. For our Timesheet change, we switched periods, added rows, refreshed, and entered time. The Comments buttons and the Progress column stayed hidden, and everything else stayed in place.
How Do You Undo a Customization?
Go to the Custom JavaScript configuration page.
Remove the code for that customization. Leave any other code in place.
Click Save, then refresh the page it changed.
If your code only hid items, they come back if your OnePlan configuration has them switched on. Code that only hides items never deletes data. Turned on Enable Customizations only for this change? You may be able to turn it back off in the same place. [verify]
Why We Keep Custom Code Small
Custom JavaScript changes what people see without touching records or business processes. That's why we use it for small screen changes and pass on changing core OnePlan functionality. We also advise retesting any script after OnePlan updates and after any layout change.
Retest after OnePlan updates. Code tied to HTML elements and CSS classes can break when OnePlan changes its screens. Our OnePlan support team can help keep custom code working.
Hiding is not disabling. Hidden features and their data are still there in other supported OnePlan screens.
Frequently Asked Questions
What if I can't find Enable Customizations?
The option may not appear in every environment. OnePlan may now turn on Custom JavaScript by default, but OnePlan hasn't confirmed this. Check whether Custom JavaScript already works. If not, contact OnePlan Support.
Is Custom JavaScript officially supported in OnePlan?
OnePlan documents the Custom JavaScript editor and the Enable Customizations setting. But the scripts you add are custom work, not standard OnePlan features. Our Timesheet script, for example, is not an officially verified OnePlan solution.
Will Custom JavaScript change my OnePlan data?OnePlan data?
That depends on the code. A script that only hides items, like our Timesheet script, changes only what shows in the browser. It does not delete or change stored values.
Comments