Outsystems creates DOM object IDs dynamically. To create or destroy event listeners, or to capture the state of an object I need that ID. How do I obtain this information?
Perhaps just as importantly, why is this solution so difficult to find? Surely everyone, everywhere needs to integrate JS to create useful interactions?.
Yes, you should create your JS in flow --> OnReady or OnRender (depends of your use case).
For what you need you should create in OnReady, see the picture below.
If this helps you you can mark as a solution to help another new people with the same question :)
If you have more doubts, feel free to ask.
Hi Duffalo,
To answer your last question: no, we don't need to integrate JavaScript. OutSystems provides so much out of the box, that I personally have almost never needed to enhance it with JavaScript. So if you find yourself needing JavaScript very often, you perhaps have to rethink the way you are using OutSystems.
That said, the IDs that OutSystems generates can be obtained by using the runtime Id property of a widget.
You can use that in Expressions containing JavaScript, or as input to JavaScript nodes in Reactive.
Thank you! So... I don't need JavaScript to change the state of an object in the DOM, i.e. to add or remove a class? That's great news, but that solution is equally elusive. If you'd be kind enough to refer me to documentation, I'd be grateful.
Regarding your second suggestion: the dialog looks useful, but how is it obtained?
What @Kilian Hekhuis said is right. What you want to achieve? Do you want to change class's dynamically?
Tell us more about your use case and we can advice you the best way to do it.
Regards
I don't doubt that it's factual, and I appreciate the generous assistance. Let's take the case I've described: I'd like to add and remove classes from DOM objects and inspect their current state.
No need to be sarcastic. We all need to learn how to use a new platform or frame work. I'm not blaming you for wanting to use JavaScript, presumably you come from a high-code background, and that's fine. I'm just saying that most of the time, you don't need high code.
If you want to add or remove a class, you set the Style Classes property of the widget to a local variable, and change the content of that variable to the style class you want (or set it to empty to remove a class). I don't know whether there's specific documentation about that topic, but that's where this forum is for: asking questions about how to do things.
As for the dialog in my picture, that's just the expression editor, in this case from an assign. I opened it to show that widgets have an Id property that contains its ID.
But do you know you can use an IF on Style Classes, right?
But if you want to do with JS it's also possible, anyway we should use JS only if we cannot do in another efficient way :)
Thank you for the suggestion! Styles that are specific to a particular medium or screen size are properly handled via media queries, though. No scripting of any kind is necessary.
You are not right, sometimes you need this, trust me. And it's just an example, you can make several conditions.
I'm sorry for having given offense, it was not my intent, and I assure you, my questions are completely sincere.
I don't understand how setting a variable is going to change the set of classes on an object, unless that variable contains the object itself.
How does one invoke the expression editor? Does that tell me what objects are in scope at any given time?
Thank you, once again, for your patience and understanding.
It looks to me you have missed an OutSystems course or two :). Have you followed the guided paths on becoming a Reactive Web Developer? Especially the expression editor is as basic as it gets. You use it when editing expressions (duh!) on a screen, or when assigining a value to a variable in an Assign node. (And yes, it does tell yoy what's in scope.)
You talk about an "object", but that's not OutSystems terminology. On screen, there's widgets, like the Container (that translates to an HTML div), the Input, Table, Dropdown etc. They're available in the toolbox that's at the left of your screen when inside the screen editor.
Now each of these widgets has properties, e.g. the Container properties look like this:
As you can see, one of these properties is Style Classes. You can directly assign styles, like this:
or you can define a local variable that you assign to the Style Classes like this:
Now everytime, in your code, you change the value of the ContainerClasses variable, the container is refreshed, and the new classes are applied. And as Paulo wrote, instead of just a variable you could also use an expression using some other local variable instead:
Anyway I give you some examples how you can change CSS properties and classes with JS. Those scripts it's working with ID of element, you can also found an element by class or you can create your own ID, Like yzx_id.
Script 1
document.getElementById($parameters.ContainerId).style.width = $parameters.Width + "%";
Script 2
document.getElementById($parameters.DivInputTextId).style.paddingRight = (document.getElementById($parameters.DivFixedTextId).offsetWidth) + "px";
Script 3
var div = document.getElementById($parameters.DivId);
var searchlink = document.getElementById($parameters.SeachLinkId);
var crosslink = document.getElementById($parameters.CrossLinkId);
// Toggle the class on Div to hide or show (visibility: visible; or visibility: hidden;)
div.classList.toggle("search-bar-visibility--visible");
// Toggle the display on SearchLink
if (searchlink.style.display === "none") {
searchlink.style.display = "block";
} else {
searchlink.style.display = "none";
}
// Toggle the display on crosslink
if (crosslink.style.display === "none") {
crosslink.style.display = "block";
crosslink.style.display = "none";
Many, many thanks! How do you know which object will be returned by "document.getElementById($parameters.DivId)"? Obviously "DivId" is a member of "$parameters" but I don't know what $paramters is, or its scope. In fact, I don't even know where to place the JavaScript node (in the "blocks?" in the "flows?" somewhere else?) Thank you for your guidance.