Custom div with custom id

Hi! I’m brand new here. Coming from a developer background.

I want to add a chart with amcharts and I found how to add custom javascript, as well as figured out how to import the libraries I need within the custom javascript node. I think the only piece I am missing to make it work is a div with a custom id. In the javascript, I tell amcharts the HTML id of the div I want it to render in and it will hook itself up to that div and render the chart.

Is there any way to make such a thing in appgyver? Even maybe in javascript? If I even knew how to access an existing element in JS I could add in a div with the custom id within it in code. I see that each component has a “Component ID” in the advanced section of the Properties panel … can I use that to access the element I want to add a div with the ID I want within JS?

I’m looking at the preview version of the app in the chrome inspector and I see no id’s on any div. I did make a page variable with the ‘Component ID’ of the container I would like to use and added that variable as an input in the JS… but I know that ID isn’t really a div ID… so I don’t know how it might help me actually access the element.

Any ideas for me?

Thanks!

I realized I might be able to have an element set it’s own ID… have been trying “this.setAttribute(‘id’, ‘chart_container’)” but getting the error “this.setAttribute is not a function”… so I guess the JS doesn’t know what element I am referring to by ‘this’.

I thought I had it there for a minute… I added some placeholder text [[chart placeholder]] into the div… and used an xpath to find that element. This code works great when I try it in the chrome JS console… but when run within the appgyver JS node, I get “TypeError: Cannot read properties of null (reading ‘evaluate’)”.

At first I thought maybe it wasn’t loaded at the time it was trying to find it, so I changed the code to be on the click event of the element so I could trigger it myself and I am getting the same error. Super strange. It is like the JS can’t see the text on the page.

I just realized that the JS can’t even find the ‘body’ element.

Well.

I guess it has no access to the DOM whatsoever. That’s gonna make this hard.

Oh gosh… then even if I was to succeed at adding an id, the code can’t access that element anyway, can it. So even the imported amcharts code can’t see anything either, I mean. Sigh.

Ahhhhhh. WebView. I think that will work.

Alas… WebView doesn’t work. Won’t load either simple HTML or a web URL.

I dont believe you can do that because Appgyver is built on React Native, not HTML.

Yep what @JOHN_WORSHAM said, you can’t access the DOM. For now you can use WebView to point to an external page or use the d3.js chart component we have (mobile only) or wait for third party plugin support (in the works but not out yet and will take some while still). Even with third party plugin support, the plugins supported are React and React Native plugins specifically.

1 Like