I thought I’d create a wiki topic to post useful JS “hacks”. It’d be good to include methods using the Markdown component as well as Ben Musson’s Periscope module’s system.perspective.runJavaScript* methods, but either or is ok initially and others can update your wiki reply later.
What I had in mind was to have posts include the JSON for the Markdown component that includes the JS script within it, so that all you need to do is copy the JSON and paste it into your View.
This is the template that I use myself for Markdown JS hacking, and I just edit the custom.inlineJavaScript prop value with the JS script. You need to make sure that the JS script is valid for inserting into a dummy DOM element’s onLoad script.
Please include a screenshot and a brief description of what the code does.
Please make sure to change your post to a wiki after posting so that others can edit if needed.
Power Chart - Set X-Trace tag labels to their pen colour
This will set the tag labels and values shown in all x-trace panels to the colour of their chart pens. The script (dodgilly?) grabs the colours from the legend key at the bottom.
I haven’t tested if this works when the legend is collapsed into the smaller version
Copy and paste into a View with a Power Chart and your operators will no longer become frustrated trying to eyeball x-trace tags with their corresponding pens on the chart.
Accordian - Allow smooth scrolling to items based on item index
This allows you to scroll an Accordian component to show a specific item, given an item index and the Accordian’s domId.
Instructions
Copy the JSON below and paste it into your View with the Accordian.
To your accordian component, add the meta.domId key and set it to something unique like “Accordian”
Inside the “JSInject_Accordian_ScrollToIndex” component, set the “accordianDomId” to what you set it to. Then you can scroll to a specific item index by setting the custom.index to the index number. You can bind to this or set its value via script
Resources
Markdown Version (Includes 2x Markdown components)
This contains 2x Markdown components:
“JSInject_Accordian_ScrollToIndexBase” injects the JS function scrollToAccordionItem
“JSInject_Accordian_ScrollToIndex” calls the function with the domID of the accordian to scroll, and the index to scroll to, based on custom props on the component.
I thought I would add this despite it not being an injection since it can be helpful even when trying to inspect data through window.__client.page.views._data (although you can change this path in the code if needed).
This utility attempts to find the shortest path, within a fixed time limit (currently hard‑coded to 40 seconds), to a target key, value, or prototype property, depending on how it is called.
Because the search space can be large and complex, the function may return multiple possible paths. Some of these paths may be React-related internals or may not actually point to the value you’re interested in, so you’ll need to manually choose the correct one from the results.
How It Works
The script walks through objects starting from window.__client.page.views._data.
It searches breadth‑first to find the shortest reachable paths.
Depending on the selected search type, it checks:
Object keys
Object values
Prototype properties
The search stops when:
A maximum number of results is reached (set to 10 in while statement), or
The time limit expires
How to Use It
Open Inspect Element in your browser.
Go to the Sources tab.
Create a new JavaScript Snippet.
Paste the script into the snippet and save it.
Run the snippet so the function becomes available.
After that, you can call it directly from the browser console using findPath(arg1,arg2):
The first argument: the key, value, or prototype property you’re searching for.
The second argument: the search type (key, value, proto, or all).
an example would be something like findPath('virtualized','key').
Notes
The function returns several candidate paths; not all of them will necessarily be useful.
Some results may point to React internals or unrelated references.
This was written quickly, so while it should work, there may be minor edge cases or errors that were missed.
function findPath(target, searchType = 'all')
{ // 'key', 'value', 'proto', 'all'
const results = [];
const visited = new WeakSet();
const queue = [];
const startTime = Date.now();
const MAX_TIME = 40000;
const dataMap = window.__client?.page?.views?._data;
if (!dataMap) return console.error("Perspective client not found.");
dataMap.forEach((view, id) => {
queue.push({ obj: view, path: `window.__client.page.views._data.get('${id}')` });
});
console.log(`Searching for ${searchType}: "${target}"...`);
while (queue.length > 0 && results.length < 10) {
if (Date.now() - startTime > MAX_TIME) break;
const { obj, path } = queue.shift();
if (!obj || typeof obj !== 'object' || visited.has(obj)) continue;
visited.add(obj);
try {
// 1. CHECK THE PROTOTYPE (The "Class" level)
if (searchType === 'proto' || searchType === 'all') {
const proto = Object.getPrototypeOf(obj);
if (proto && proto.hasOwnProperty(target)) {
console.log(`%c PROTO MATCH: "${target}" exists on ${path} prototype`, "color: #9C27B0; font-weight: bold;");
results.push({ path: `${path}.__proto__['${target}']`, type: 'proto' });
}
}
// 2. CHECK KEYS AND VALUES (The "Instance" level)
for (const key in obj) {
const val = obj[key];
const currentPath = `${path}['${key}']`;
if ((searchType === 'key' || searchType === 'all') && key === target) {
console.log(`%c KEY MATCH: ${currentPath}`, "color: #2196F3; font-weight: bold;");
results.push({ path: currentPath, type: 'key' });
}
if ((searchType === 'value' || searchType === 'all') && val === target) {
console.log(`%c VAL MATCH: ${currentPath}`, "color: #4CAF50; font-weight: bold;");
results.push({ path: currentPath, type: 'value' });
}
if (val && typeof val === 'object') {
queue.push({ obj: val, path: currentPath });
}
}
} catch (e) {}
}
return results;
}
Just wanted to give everyone a heads up. The JavaScript execution technique being shared here is considered an exploit. The Markdown component was not intended to execute arbitrary JavaScript, and we're treating this as a security concern.
We'll be addressing this in a future release. In the meantime, be aware of the risks this introduces, particularly in environments where external sources could influence the content of that property.
The tooltip when you hover escapeHTML does say use at your own risk, but I suppose a warning here probably is a good idea as I doubt many people read the tooltip.
So, does that mean that there are plans to patch/remove the escapeHTML feature? If this is getting patched, is there an official feature in the works that will let us run JavaScript on perspective pages? I’d love to see a way to load Web Dev files directly into a Perspective page. Most of the time I use Markdown injections, I’m just pulling in a Web Dev file.
I feel as if a way to add JavaScript is almost a requirement for some tasks. For instance, clicking an element and getting its data back is incredibly easy in JS, but as far as I know, doing that natively in Perspective requires an event script on every single element, which is a massive chore.
yeah, modules are great, but my company doesn't like opensource stuff due to there not being a LTSA. it just seems crazy to me that the JS injections have been talked about for at least three years on this forum, yet we are no closer to an official solution.
Adding official support for running arbitrary Javascript is not on our road map. While I understand the flexibility this offers, it also opens up security and stability issues depending on the environment.
Sorry I do not have a solution for you at this time. We will re-evaluate this position over time.
I have this question in my head. Why to use hacks of injecting JS while i can create a proper module to handle my custom needs? is there an advantage to use JS injection or markdown trick rather than building a custom module?
If js hacking is going away, then we need to have some of the basic things we use it for available in the components, like scrolling to an item in a table or ability to click on svg elements and run a script. Some things are definitely more hacky than others, but unless you know how to or have the time to invest into writing a module, some basic things that are offered by the underlying react componentsthat just aren't exposed just aren't possible without it.
