HTML Controls should have "Id" field as static, currently it changes as per themes.

HTML Controls should have "Id" field as static, currently it changes as per themes.

  

While writing custom javascript functions to fetch data from third party services , i found that HTML controls have name property but no "Id" property which enables us to control the element in javascript or jquery code. To get the value of Id property of a control we need to inspect element in browser and Id values is quite lengthy to handle in javascript code.

Another problem with html controls ID and Name property changes if we update the theme.

You could use a dynamic selector, based on the position of the element, instead.

Example:

<div>
<span>
<a>Item I want</a>
</span>
</div>


$('div > span > a')

Hi Azam,

Complementing on what Claring has said, you can also add a class to the element and select by the class name. The class name does not change.

Cheers,

José

Hi Jose and Claring,

I appreciate your suggestions.

Still its very useful and manageable to have "Id" property given at the design time for controls its helps a lot in other aspects.

Currently the Id property is auto-generated and its quite lengthy and changes as per themes. But if Id is controlled at design time then there will be no need to add extra css class  or to traverse thru the parent elements.

There might be chances of having multiple css applied to one control in that scenario it may create a problem.

Hi Azam,

At design time you can get the Id of an element by giving the element a Name, and accessing it using <Name of Element>.Id.

Cheers,

José

Hi Jose,

I am currently following the same approach in my application, but see the "Id" generated below after giving the name to a Input Text Box for UserNameInput.


WebPatterns_wt5_block_wtUsername_wtUserNameInput

Sometimes it generated double of lengths if we change theme.


Hope it make sense.

Hi Azam,

Could you give me an example/sample of what you are doing when you are using that Id?

Thanks,

Cheers,

José

Hi Jose,

I am trying to bind a value in input textbox coming from a signalR function , this SignalR function i am calling using javascript.

Right now i am perfectly able to bind the value in input textbox using jquery function as below.


 $("#WebPatterns_wt5_block_wtAction_wtInputTemplate").val(response); 


but when i changed the module theme, the id was changed.

WebPatterns_wt5_block_wtAction_wt 

the above highlighted part was replaced according to new theme.

And the Id and name become to lengthy and complicated to handle , we have to run in browser to get the Id or exact element name by using Inspect element.

So Its my small suggestion to Outsystems team to provide the "Id" and also "name" properties be manageable at design time just like in HTML and ASP.NET.

Solution

Hi Azam,

OutSystems provides the way to get the Ids at design time!

If, as an example, your element has the Name property equal to "UserNameInput", if you add a xy Expression in your screen with:

"<script>
$('#'" + UserNameInput.Id + "').val(response);
</script>"

and set the expression to Escape Content to No, you will get in your html page what you want.

Cheers,

José

Solution

Hi Azam,

Like José was mentioning, it is possible to get the Id of HTML elements if they are "named" in OutSystems. In the example, the selected Input was given the Name SearchInput:

If that's the case, widgets will have a runtime property you can use in your Expressions to build your dynamic JavaScript (notice how we set the Escape Content to No and how on the Expression Value popup we're using that runtime property to build our script, and how you can find dynamic properties of widgets on the bottom left corner tree):

and the outcome will be something like:

the output of the Alert window is the Id of the Input field on screen.

If you still want to have a static Id (for some reason) you can always add an extended property called Id, and set the value to that.

José Costa wrote:

Hi Azam,

OutSystems provides the way to get the Ids at design time!

If, as an example, your element has the Name property equal to "UserNameInput", if you add a xy Expression in your screen with:

"<script>
$('#'" + UserNameInput.Id + "').val(response);
</script>"

and set the expression to Escape Content to No, you will get in your html page what you want.

Cheers,

José

Thanks Jose, Its really helpful along with detailed explanation by Jorge.


Jorge Martins wrote:

Hi Azam,

Like José was mentioning, it is possible to get the Id of HTML elements if they are "named" in OutSystems. In the example, the selected Input was given the Name SearchInput:

If that's the case, widgets will have a runtime property you can use in your Expressions to build your dynamic JavaScript (notice how we set the Escape Content to No and how on the Expression Value popup, how we're using that runtime property to build our script, and how you can find dynamic properties of widgets on the bottom left corner tree):

and the outcome will be something like:

the output of the Alert window is the Id of the Input field on screen.

Thank you so much Jorge for the detailed explanation.