Converting JS sheet worker to roll20 sheet worker.

Dear Community. Firstly I apologise if this should go in the sheets forum rather than the API forum. It seems to be somewhere half way. The non-problem: The god-awful HTML/CSS style if requesting the sheet (which I am happy to provide). The appearance of the sheet is tested in firefox, chrome and brave, and works properly. I have to test on roll20 itself of course, but this is not really a problem yet (yet!). The Problem: I am converting a JS sheet worker for opening "description" boxes for various lists (inventory, spells, abilities). In accordance to the CSS wizadry/sheetworker page for making sheets I have a button, which when pressed sets the value on a hidden input. The CSS code then sets the visibility/state of the "description box" . The JS sheet worker allows not only to switch between item description boxes, but to hide it on a second click on the button: The JS code looks like this and works: const b = document . getElementById ( x ). addEventListener ( 'click' , function () { // Get the hidden element whose value is read by the CSS script. let x = document . getElementById ( 'ability-details-tab' ); console . log ( x ); // This sets the value to blank if the hidden element is already open to this // description box, hence hiding it. if ( x . value == num + 1 ) { x . value = "" ; } else { // This sets the value to the magic number specified in the CSS code, hence // displaying the description box. x . value = num + 1 ; } }) }); However, I have the feeling that my conversion for roll20&nbsp; (SEE BELOW) is wonky. I would be very grateful if someone could tell me whether this should work, and what I should change to make it work (other than putting a `sheet-` prefix for class names, this much I know): on ( `clicked: ${ x } ` , function () { getAttrs ( 'ability-details-tab' , function ( attr ) { if ( x == num + 1 ) { setAttrs ({ ability -details-tab: "" }); } else { setAttrs ({ ability -details-tab: ( num + 1 ) }); } }); }); Backstory: I am working on a game system (Fansys: <a href="https://aleshaleksey.github.io/fansys23/" rel="nofollow">https://aleshaleksey.github.io/fansys23/</a>), &nbsp;and for now, due to HTML being my only weakness, have been using an google-sheets sheet that Alluscythe had previously made. While this was an excellent sheet, and I am very grateful for the work put in it is obviously not connected to roll20. Recently I restarted work on a roll20 sheet - a a terrifying, yet necessary proposition. For reasons of geography, preparing the necessary groundwork on roll20 takes longer than it would otherwise (such as upgrading from free to pro), so for now I am doing what I can without the roll20 infrastructure. Most of the sheet (though primitive by professional standards) works to my satisfaction, with the the exception of one part: The SHEET WORKER. The sheet worker currently works standard JS. However, I know that this will not work with roll20 out of the box, so I am converting it, and here I would like the help of the more experienced roll20 wizards. I would like to thank you for reading this far, and bring in advance my thanks for any advice rendered.

Hi Albus, a Pro/Elite sub is really needed to develop a sheet for Roll20...&nbsp; Any HTML, CSS, and JS requires special handling due to Roll20's environment/security restrictions.&nbsp; One restriction is that sheetworkers do not have access to the DOM (with the exception of some limited jquery) so many examples found on the internet will not work. Scott posted an HTML/CSS collapse/expand pattern&nbsp; here .&nbsp; Style with some CSS and that might be all you need...&nbsp; If you don't care for the checkbox, the example could easily be modified so that hiding/showing a section is handled using an action button and a hidden checkbox. Toggle the checkbox state using a sheetworker triggered by the clicked action button.&nbsp; Many more examples on the wiki <a href="https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas" rel="nofollow">https://wiki.roll20.net/CSS_Wizardry#Show.2FHide_Areas</a>

Unfortunately, trying to build sheets outside of Roll20 is pretty impossible. There's just too much Roll20 specific weirdness that can't be accounted for*. I would expect a lot of your css and html to fail as well once you finally get to test it on Roll20 (especially repeating sections). However, with regard to your specific sheetworker adaptation. I believe that what you want is to watch for button clicks in the "navbar" of your sheet and then populate your tab controller input with the button that was clicked to change the view (or close all views if the user clicks on the same buttons again). Your sheetworker implementation is close, but needs a little adjustment: // placeholder button names to illustrate how to make this a generic listener const navButtons = ['nav-pc','nav-npc','nav-settings','nav-spells']; navButtons.forEach(button =&gt; { on(`clicked:${button}`, function () { &nbsp;&nbsp;&nbsp;&nbsp;// Note that I would recommend using snake_case for your attribute names (e.g. inputs) and kebab-case for your action button names. getAttrs('ability-details-tab', function (attr) { // the attribute values are passed in the `attr` variable. You need to access them from it. const setObj = {};// We create an empty object to store your changes in so that we only need a single setAttrs call. const currTab = +attr['ability-details-tab'] || 0;//convert the data to number type if(currTab === button){ setObj['ability-details-tab'] = ''; //close all views if the user clicked on the current views button. // Note that I wouldn't actually recommend this ux for most use cases. }else{ // set the ability tab input value to be the name of the button that was just clicked. setObj['ability-details-tab'] = button; } setAttrs(setObj); }); }); }) *I'll probably be announcing a solution for this by the end of the month.

Hello Vince, Hello Scott. Thank you for both the links and the corrections to my code. I will test the solution suggestion offered by you, Scott once I have solved logistical issues. For Vince: Yes, I completely agree that a Pro sub (at least) is needed for development and am aware of this. However, because of the outlined issues it is most expedient in this case to solve one problem at a time. In this case developing a "model" of the sheet using normal tools, and then bringing it to life and debugging once the time has come/the conditions have been met. For Scott: Yes, I expect at least a couple of days of debugging hell. Regardless, thanks again, I will give this code (or its modification) a spin once I have pro. Expect me to come crying to you in about a week once all my HTML and CSS break into little pieces and burn to cinders as they fall from the cosmic height of my high horse and enter the atmosphere of reality.

I am also aware, by the way that it's much better to do things properly: Learn a language properly. Learn the particulars and quirks of a system I'm working with. Conceptualise, draft, prototype, write, test, repeat... But I am doing everything myself in "hobby spacetime", so to put it in DnD terms, I have to become multi-class as&nbsp; "Monk: Path of the Shortcut". But I think we've all been there. ;) Again, thank you for both your time and your advice.

little hijacking of the thread here. starting to learn how to script, thus learning to CSS/HTML/JS I was under the impression, if I learn roll20 scripting, I am also learning JS. I am doing a little bit of both, watching YT tutorials and reading roll20 wiki and messing around with coding. so is roll20 "javascript" not javascript if they are following different rules?&nbsp; Scott " Unfortunately, trying to build sheets outside of Roll20 is pretty impossible. There's just too much Roll20 specific weirdness that can't be accounted for*. I would expect a lot of your css and html to fail as well once you finally get to test it on Roll20" that has risen a flag for me. should I just learn for the next few months plain ol javascript/react, etc then come back to roll20 and learn the roll20 version to write scripts or try to multitask, learn, practice, write in roll20 and the basics or fundamentals of javascript will be understood from it?

IMO, just learn vanilla JS (node) and it will apply to Roll20's sheetworkers as well as regular web development. Just be aware that any DOM-related JS will not work in a legacy, CSE, or jumpgate+ based character sheet in Roll20.&nbsp;( JS restrictions ) Roll20 also has it's own builtin API functions ( functions ), while their concepts are not unique to the VTT, their specific functionality/interaction is. Beacon-based sheets are a different matter... It's a newer character sheet dev environment that's still in beta AFAIK. Very few sheet's have been completed with Beacon and seems to have some VTT and API hurdles yet to overcome. Beacon does allow you to build a character sheet much closer to a traditional website however and you can use whatever system/framework you are familiar with. ( Beacon Info )

Yep, Roll20 development is a subset of normal web development. If you know regular web development, you can do R20 development, as long as you are willing to leave a lot of normal tools at the door.