# Javascript inject in Perspective... have fun

**URL:** <https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 28, 2022, 9:17am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805 "2022-10-28T09:17:54Z")\
**Posts on this page:** 17\
**Page:** 2

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [May 22, 2025, 6:17am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/21 "2025-05-22T06:17:52Z")

</div>

> [@bmusson](#):
>
> That seems to be a commonly requested feature.

and pain point!! (my op case in point)

Another question, JS hack or otherwise, is: how can I use JS to set the value of a component prop?

It may seem like a dumb thing to do, but I'm having nothing but issues defaulting BIJC's Calendar component to show a date in a binding, or the type of view to display. It's driving me insane. I figure I can force it in the same way that my focus example works above works...

---

<div class="post-metadata">

**Author:** ![Ryan\_Deardorff](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan_deardorff/32/63815_2.png) [@Ryan\_Deardorff](https://forum.inductiveautomation.com/u/Ryan_Deardorff)\
**Post date:** [May 22, 2025, 1:30pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/22 "2025-05-22T13:30:35Z")

</div>

> [@nminchin](#):
>
> use JS to set the value of a component prop

I've been using JS injection to allow inserting text at the cursor within a Text Area:

```python
def transform(self, value, quality, timestamp):
	return "<img style='display: none' src='/favicon.ico' onload=\" \
		const view = [...window.__client.page.views._data.values()].find(view => view.value.mountPath == this.parentNode.parentNode.parentNode.getAttributeNode('data-component-path').value.split('.')[0]).value; \
		const notesTextArea = document.getElementById('" + value + "'); \
		function getSelected() { \
			const selectionStart = notesTextArea.selectionStart; \
			view.custom.write('selectionStart', selectionStart); \
			const selectionEnd = notesTextArea.selectionEnd; \
			view.custom.write('selectionEnd', selectionEnd); \
		} \
		function reportSel() { \
			setCursorAt = view.custom.read('setCursorAt'); \
			if (setCursorAt > -1) { \
				notesTextArea.blur(); \
				notesTextArea.setSelectionRange(setCursorAt, setCursorAt); \
				notesTextArea.focus(); \
				getSelected(); \
				view.custom.write('setCursorAt', -1); \
			} \
			if (view.custom.read('runJS')) \
				setTimeout(() => { reportSel(); }, 10); \
		} \
		notesTextArea.onclick = getSelected; \
		notesTextArea.onkeyup = getSelected; \
		notesTextArea.oncontextmenu = getSelected; \
		notesTextArea.onmouseout = getSelected; \
		view.custom.write('runJS', true); \
		reportSel(); \"></img>"

```

You can see how `view.custom.write()` is used to set a custom property on the view.

As far as the question of trying to focus components "on load," that's something I've struggled with and put a request in for a proper event handler:

> **[Perspective view onLoad event that fires when the view is done loading |...](https://ideas.inductiveautomation.com/ignition-features-and-ideas/p/perspective-view-onload-event-that-fires-when-the-view-is-done-loading)**
>
> This would be the only clean way of ensuring that, for example, an input .focus() would execute at the right time... https://forum.inductiveautomation.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [May 22, 2025, 6:40pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/23 "2025-05-22T18:40:39Z")

</div>

> [@nminchin](#):
>
> Another question, JS hack or otherwise, is: how can I use JS to set the value of a component prop?

It's possible; the easiest way I know is by sending a message, then using a message handler to write to the property.

To send a message from a client using JavaScript:

```javascript
// type MessageScope = 'view' | 'page' | 'session'

__client.connection.send('send-message', {
    'type': 'MyMessageType',
    'payload': { 'key': 'value' },
    'scope': 'page'
})

```

If you need to do this in Periscope's JavaScripting contexts, you can also use the helper function:

```javascript
perspective.sendMessage(type, payload, scope)

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 26, 2025, 6:39am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/24 "2025-05-26T06:39:18Z")

</div>

untested, but you could probably use @bmusson Js script to trigger this

```python
function = '''(domId)=>{
		window.addEventListener("load", (event) => {
		 const element = document.getElementById(domId);
				console.log(element)
				if (element){
					console.log('focusing element');
					element.focus();
				}
		});		
	}'''

```

---

<div class="post-metadata">

**Author:** ![JNimb](https://avatars.discourse-cdn.com/v4/letter/j/67e7ee/32.png) [@JNimb](https://forum.inductiveautomation.com/u/JNimb)\
**Post date:** [June 4, 2025, 11:47am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/25 "2025-06-04T11:47:16Z")

</div>

Interesting solution!

I myself had been pretty bummed that Ignition didn't support Serial Port communication from the Client PC, but later realized it was mostly a limitation of the browsers.

Now knowing that, I set out to attempt to make use of the Web Serial API of Chromium, using Javascript.

It's a bit unrefined as the Javascript in the OnClick, could be placed in a separate .JS file, but I'll share it as a proof of concept in honor of this thread!

Also, apologies for the params on the View, they could've been in an array, but this was an attempt to try out to make it configurable, as we were trying to make it a base component to use across our projects.

[Web Serial API Test.zip](https://forum.inductiveautomation.com/uploads/short-url/zLl1Wp5eHpPuVFsXQDIRBuCHABS.zip) (13.6 KB)

Quick note, as a limitation of the Web Serial API, the requestPort is only allowed on a secure HTTPS connection.  
So attempting to use this functionality on an HTTP connection, you'll get the console error in the browser of "Cannot read properties of undefined (reading 'requestPort')"

---

<div class="post-metadata">

**Author:** ![sunshare21](https://avatars.discourse-cdn.com/v4/letter/s/9de0a6/32.png) [@sunshare21](https://forum.inductiveautomation.com/u/sunshare21)\
**Post date:** [November 16, 2025, 8:58am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/26 "2025-11-16T08:58:00Z")

</div>

Hello everyone, may I ask if the Javascript injection method is feasible in IgnitionScada8.3? Has anyone tested it?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 16, 2025, 10:41pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/27 "2025-11-16T22:41:02Z")

</div>

Markdown injection certainly works

---

<div class="post-metadata">

**Author:** ![sunshare21](https://avatars.discourse-cdn.com/v4/letter/s/9de0a6/32.png) [@sunshare21](https://forum.inductiveautomation.com/u/sunshare21)\
**Post date:** [November 17, 2025, 12:21pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/28 "2025-11-17T12:21:19Z")

</div>

Thank you very much. The markdown method has been successfully tested, but we were unable to test the global injection method in version 8.3 temporarily. Is there a problem with my method?

> [@Perspective HTML Injection](https://forum.inductiveautomation.com/t/perspective-html-injection/74680):
>
> So... while doing some module debugging, I noticed Ignition trying to access a non-existent folder \<install-directory\>\data\modules\com.inductiveautomation.perspective\injectables. After creating the folder manually, Ignition then tried to access: injectables\head\_top.txt injectables\head\_bottom.txt injectables\body\_top.txt injectables\body\_bottom.txt And what do you know, any HTML you put in these files will be directly loaded in the DOM of all Perspective sessions man_shrugging . [java\_x…

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [November 17, 2025, 2:52pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/29 "2025-11-17T14:52:21Z")

</div>

you can test it with this i think, it was pretty easy to follow

> [@Adding moving particles to the background](https://forum.inductiveautomation.com/t/adding-moving-particles-to-the-background/98283/10):
>
> i think i coppied different json than the front page example, and maybe missing some css. this head.txt has to go here(depending on instal folder, might need to create injectables yourself too) C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\injectables (copy pasted from [https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js](https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js)) [head\_bottom.txt](https://forum.inductiveautomation.com/uploads/short-url/qcsBo4SN24cig9PP6chJ9O4IHv7.txt) (22.6 KB) Than a simple view with simple js code code = """\<img style='display:none'…

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [November 17, 2025, 3:37pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/30 "2025-11-17T15:37:48Z")

</div>

I haven’t tried it on 8.3; I’m not doing anything with 8.3 yet besides supporting modules.

---

<div class="post-metadata">

**Author:** ![sunshare21](https://avatars.discourse-cdn.com/v4/letter/s/9de0a6/32.png) [@sunshare21](https://forum.inductiveautomation.com/u/sunshare21)\
**Post date:** [November 18, 2025, 1:32am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/31 "2025-11-18T01:32:06Z")

</div>

Thank you for your replies. In version 8.1, I used: "C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\injectables" The injection of the "head\_top.txt" file into the test was successful, but there were some changes in the file path in version 8.3. I tried to insert it into the path: "C:\Program Files\Inductive Automation\Ignition\data\config\resources\core\com.inductiveautomation.perspective\injectables" Injecting the same "head\_top.txt" file into the system did not work. I wonder if there is a problem with my method?

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [November 18, 2025, 2:56am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/32 "2025-11-18T02:56:03Z")

</div>

If I had to guess, I'd bet this "injectables" folder got ignored for the 8.3 configuration changes and the path is still `data\modules\com.inductiveautomation.perspective\injectables` 🤷‍♂️

I'm going to quote this post from Paul here:

> [@Perspective HTML Injection](https://forum.inductiveautomation.com/t/perspective-html-injection/74680/3):
>
> TL;DR: This has been possible forever. You're certainly allowed to do it (we can't stop you) but I'll present the following caveats as reasons we haven't and won't document this: You can completely break Perspective, pretty easily, with this We don't want you to have to know HTML or JS to develop in Perspective We don't want people doing silly stuff like trying to dynamically modify these Anything you do use this for should be considered unsupported. If we ever broke this functionality, it wou…

Specifically this part:

> Anything you _do_ use this for should be considered unsupported.

---

<div class="post-metadata">

**Author:** ![sunshare21](https://avatars.discourse-cdn.com/v4/letter/s/9de0a6/32.png) [@sunshare21](https://forum.inductiveautomation.com/u/sunshare21)\
**Post date:** [November 18, 2025, 7:50am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/33 "2025-11-18T07:50:52Z")

</div>

Okay, thank you for your reply

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [November 18, 2025, 5:25pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/34 "2025-11-18T17:25:45Z")

</div>

> [@bmusson](#):
>
> the path is still `data\modules\com.inductiveautomation.perspective\injectables`

That's correct from the code.

---

<div class="post-metadata">

**Author:** ![bmusson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/bmusson/32/87530_2.png) [@bmusson](https://forum.inductiveautomation.com/u/bmusson)\
**Post date:** [November 18, 2025, 5:44pm UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/35 "2025-11-18T17:44:06Z")

</div>

🧙‍♂️

---

<div class="post-metadata">

**Author:** ![sunshare21](https://avatars.discourse-cdn.com/v4/letter/s/9de0a6/32.png) [@sunshare21](https://forum.inductiveautomation.com/u/sunshare21)\
**Post date:** [November 20, 2025, 8:30am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/36 "2025-11-20T08:30:59Z")

</div>

I attempted to manually create this file path and it has been successfully tested. Thank you very much

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 20, 2025, 10:21am UTC](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/37 "2025-11-20T10:21:50Z")

</div>

I wonder if it gets backed up with gwbk..

[Previous page](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805.md?page=1)