# On JavaScript injection in markdown component

**URL:** <https://forum.inductiveautomation.com/t/on-javascript-injection-in-markdown-component/92718>\
**Category:** Ignition\
**Tags:** perspective, scripting\
**Created:** [July 2, 2024, 9:15pm UTC](https://forum.inductiveautomation.com/t/on-javascript-injection-in-markdown-component/92718 "2024-07-02T21:15:26Z")\
**Posts on this page:** 1\
**Showing post:** 2

<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:** [July 3, 2024, 6:43am UTC](https://forum.inductiveautomation.com/t/on-javascript-injection-in-markdown-component/92718/2 "2024-07-03T06:43:25Z")

</div>

Take a look at some of my posts, i do a bunch of stuff with markdown js.  
There is a lot more you can do with this.

With some string replace, i fixed the space/tab formatting issues, allowing you to code a bit more cleanly.  
Using an img' onload function you can trigger anything screen wide,  
With some mutation observers you can trigger stuff on data changes (quite advanced js knowledge required).  
With window.\_\_client, you can access perspective properties and even write to them ect.

> [@Javascript inject in Perspective... have fun](https://forum.inductiveautomation.com/t/javascript-inject-in-perspective-have-fun/65805/5):
>
> Gonna try to keep this topic updated with all my cool injectings stuck_out_tongue Version 8.1.22 svg clicker wink

> [@Dragging rows in Perspective Table](https://forum.inductiveautomation.com/t/dragging-rows-in-perspective-table/68922/8):
>
> ah it was easy, ignition puts its row id in a data atrribute so it was easy to read. @jasoncoope[dragtable.zip](https://forum.inductiveautomation.com/uploads/short-url/AvXF36eUYUY52tcHnheVhENIotA.zip) (27.7 KB) copy the markdown and add in a custom property on the view you probably will have to adapt the onchange script in the view.custom element to your needs. sometimes the columns seem to move around too when you drag a row... not sure why or how to prevent that... probably clashing with the other drag events on the table xd edit : ahah, turn this off too, well unless you d…

> [@SVG Elements Mouse Clicked](https://forum.inductiveautomation.com/t/svg-elements-mouse-clicked/56528/10):
>
> Made something new for 8.1.22

(ive done a lot of stuff so these are just a few examples)

It can also be used to add some dynamic css to parts of components that otherwise cant be accesed

> [@\[FEATURE\] Add ability to add Icon and styling to Perspective Dropdown items](https://forum.inductiveautomation.com/t/feature-add-ability-to-add-icon-and-styling-to-perspective-dropdown-items/73823/2):
>
> put this in the markdown component binding like usual you'll ofc will have to add some python logic to append the style string based on the required labels in de dropdown (idk if everyone has these Builtin/icons or is it from my test project?) styles=".iaDropdownCommon\_options [data-label='YourLabel']:before { content: url('/system/images/Builtin/icons/16/check2.png'); }" code = """\<style\> """+styles+""" \"\>\</style\>""".replace("\n", "").replace("\t", "") return code

Not the markdown, but another way to add js in perspective, though i have not really done a lot with this yet

> [@\[feature-748\]Perspective Favicon](https://forum.inductiveautomation.com/t/feature-748-perspective-favicon/24642/29):
>
> Soo i got something for you mage Create these files (and injectables folder) (depending on install folder ofc) "C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\injectables\head\_bottom.txt" "C:\Program Files\Inductive Automation\Ignition\webserver\webapps\main\newFavicon.ico" In the head\_bottom.txt put this: \<script\> const oldLinks = document.querySelectorAll('link[rel\*="icon"]'); oldLinks.forEach(e =\> {e.href = '/newFavicon.ico';}); \</script\>…

---

_[View the full topic](https://forum.inductiveautomation.com/t/on-javascript-injection-in-markdown-component/92718)._
