Forum Discussion
JavaScript API: Set state to Disabled or Hidden
I'm loving the additional flexibility with the JavaScript API. I've been able to successfully manipulate objects, including states, but for some reason, I bump into an error any time I try to change the state of an object to the built-in "Disabled" state. I've confirmed the object indeed has the state. When I test it, though, the console reports the "Disabled" state is not found.
I am able to switch to the built-in "Normal" state, as well as custom states, but something seems off with "Disabled." I also noticed the same with "Hidden," although that's not what I was specifically needing in this project. I can get around it by using traditional triggers, but it would sure be nice to be able to keep things cleanly within the JavaScript as much as I can.
Has anyone else run into this issue?
8 Replies
Hi MarkRash865!
Sorry to hear you've run into this setback, working with Storyline's new Javascript API!
We'd be happy to take a closer look at your design, and test the functionality on our end. Do you mind sharing a copy of the .story file you've been working with? Feel free to upload that here in the discussion or privately through a support case.
Looking forward to hearing from you!
Thanks for your reply, Steven. Here is a sample project with just a single object and attempted JavaScript state change. Also, please note Nedim's reply to this thread where the issue is noted as well.
Hello MarkRash865 ,
Thanks for sharing a copy of your project file. When I tested it, I observed the same results. Since this feature is relatively new, I'm not sure if the behavior is expected or if it's a product bug, so I opened a support case on your behalf. Our support engineers can do further testing to verify this, and we'll let you know of the results when we're done!
A similar question was raised in this thread. Only the Normal built-in state and custom states can be accessed via the object.state property by referencing the state name. Other built-in states (such as Hover, Visited, Selected, Disabled) are not mapped in slides.js. These states are typically triggered natively by mouse events (like mouseover) or clicks, while custom states are explicitly triggered.
Example of an error when you try to set object.state = "Disabled". You’ll encounter the same issue if you attempt to set object.state to "Visited" or "Selected". However, object.state = "Normal" will work just fine.Try:
const button1 = object('6CJN2qEzG8V'); button1.state = '_default_Disabled';Is there a solution to set an object state to hidden? I have tried _default_Hidden, _default_hidden, hidden, Hidden, _Hidden, _hidden and no luck
When an object is set to the "Hidden" state in Storyline, it gets a .hidden class that applies display: none via CSS effectively removing it from view in the DOM.
Unlike other built-in states (e.g., Normal, Selected), the Hidden state can't hold additional objects or customizations. It's not a functional state in the same sense but more of a visibility toggle Storyline controls through CSS.
That’s my understanding based on how it behaves behind the scenes.
Here are two ways to apply the hidden "state" using JavaScript:
// Hide the element using the new Storyline JavaScript API object reference const obj = object('6VGJk8yrPtO'); obj.style.display = 'none'; // Hide the same element by directly targeting its DOM node (mimicking how Storyline applies the "Hidden" state) const objDOM = document.querySelector(`[data-model-id="${obj.name}"]`); objDOM.classList.add('hidden'); // Shows the element again by removing the 'hidden' class objDOM.classList.remove('hidden');Thanks Nedim and thanks for the explanation.
I was being lazy this morning, I have written the front end for a finance game that integrates with a database. After I publish integration is a pain. And after we did it I realised I have left 3 test buttons visible. I knew I had a timeline start JS trigger so thought I could simply hide them. The real odd thing is that that although it failed the code also activated the bankruptcy function.
thank you for your time.
