--This is for the Mobile App building process--


I am having trouble accessing extended properties of the elements i am defining on a screen using the outsystems editor



see the way i am setting up this button to have an additional note (the reason for setting it changes, and i want the subsequent code to be able to reference this attribute using a single switch)




When i do this, however, it seems to be filtering this attribute out of the DOM that it creates for the mobile application (so that i can no longer reference it through script)

here's what the page shows while "opening with Chrome"


notice the missing attribute

the only javascript i ahve attempted (and found this error) is this


$parameters.Chosen = document.getElementById($parameters.FirstChoice).additional_info;

where the "FirstChoice" is a variable used as an input parameter, and is being filled with the buttons id


So, i have 2 main questions:


  1. If this attribute were being created, and exists while debugging, is it wrong to assume that this field translates into an HTML attribute (see the tooltip above)?  If so, where is this attribute being stored?
  2. How would i best go about fixing this?

Hey Ryan! Just to double-check, you are accessing button? Your "h1" label was confusing as though maybe you labeled it as a header.

Under Properties and Attributes, make sure that your values can pull up the entities within the aggregates within the screens. To ensure that your entities and aggregates can show up, double-check your reference or Manage Dependencies (the plug icon) and also that your entity properties are set to Public/Yes

If you continue to scroll down you have Events and On Click, you can then connect a Client Action

In regards to your DOM question, are you using your Styles tab, to input your CSS attributes?

Extending UI with JS
https://www.outsystems.com/evaluation-guide/extending-the-ui-with-html-javascript-and-css/

Solution

Hi Ryan,


about being able to get the attribute into the DOM : OS will let through attributes that start with data-  

(see this post)

apart from that, I'm not sure your line of Javascript will work, specifically I think he won't know what to do with the last part, try doing it with getAttribute(...)

see attached oml


Hope this solves it for you,

Dorine

Solution

Sydney Lai wrote:

Hey Ryan! Just to double-check, you are accessing button? Your "h1" label was confusing as though maybe you labeled it as a header.

Under Properties and Attributes, make sure that your values can pull up the entities within the aggregates within the screens. To ensure that your entities and aggregates can show up, double-check your reference or Manage Dependencies (the plug icon) and also that your entity properties are set to Public/Yes

If you continue to scroll down you have Events and On Click, you can then connect a Client Action

In regards to your DOM question, are you using your Styles tab, to input your CSS attributes?

Extending UI with JS
https://www.outsystems.com/evaluation-guide/extending-the-ui-with-html-javascript-and-css/

Yes, Sydney, it's a button.  the "h1" label makes the most sense when understood with teh other buttons..


H1   H2

G1   G2


that way the buttons themselves take on a grid, that design is what i was going for to standardize UI.


And i don't have an associated aggregate with the button-set yet, so making sure i can pull them into an aggregate doesn't help.


I am adding the extra attribute in the properties of the button in the UI editor for the button itself.



and, thanks for the reference link, i'll check it out!




Dorine Boudry wrote:

Hi Ryan,


about being able to get the attribute into the DOM : OS will let through attributes that start with data-  

(see this post)

apart from that, I'm not sure your line of Javascript will work, specifically I think he won't know what to do with the last part, try doing it with getAttribute(...)

see attached oml


Hope this solves it for you,

Dorine


This looks promising... I was trying to access the additional attribute more like i had set up a class (which i am now seeing).... thanks for the direction with getAttribute().  I'll post again with this as the solution or any additional hurdles i encounter, but THANK you!



I don't think i'll be needing to access run-time attributes as often, but as long as i were actually able to affect the DOM through asynchronous calls...  i don't see where i WOULDN'T be able to....  


Again, i don't have plans with this current project to cross that bridge


EDIT:


Your oml and buttons and javascript work exactly like i intended mine to work... i'll mark this as solution... To help further this (and help people in a similar issue later) something about the Outsystems engine when creating the DOM before posting it to the screen (similar to the preparation screen of traditional web apps) doesn't like "_" characters


I had an "_" in my additional attribute, where you had a "-"... i didn't think it made a difference... but it does =o)

although i also didn't have "data-" prefixing my additional attributes (thanks for that link at the start of your post)  both were changed, and i am now working smoothly!