Colons in dynamically generated IDs

Colons in dynamically generated IDs

Is there any way to change how OutSystems uses colons in their dynamically generated IDs?  Since CSS uses colons to mark psuedo-classes and psuedo-elements, it is very bad practice to use them in an ID.

As an example,

OutSystems is generating the following HTML:
    <div id="wt121:wtItems:wt259:wtContent">...</div>

And I am trying to use jQuery to select that <div>, using the RuntimeID property of the web block:
... $('#" + CarouselItem.RuntimeId + "') ...
- generates to -
    ... $('#wt121:wtItems:wt259') ...

It's giving me this error:
    Uncaught Error: Syntax error, unrecognized expression: unsupported pseudo: wtItems

Because the colon is used by CSS to denote a psuedo-class, it treats "wtItems" as such a class and fails when it cannot parse it.

I have to hack at my expression (with the jQuery) to find-and-replace and escape all colons:
    $('#" + Replace(CarouselItem.RuntimeId, ":", "\\:") + "')

OutSystems should not use colons in their generated IDs; hyphens are much more standard, extremely widely used, and have no special meaning that would break CSS selection engines like Sizzle (which is what jQuery uses).  Is there any setting in OutSystems to swap out the colons with hyphens or underscores?

Hi Michael,

Is that $ the one provided by the platform or are you overriding the jQuery yourself?
Because the one from the platform is prepared for the ":" separators.

You can install the outsystemsidfilter plugin on your jQuery as well.
It is available on github:

Also to answer the "Is there any setting in OutSystems to swap out the colons with hyphens or underscores?" question.
That is a limitation in the java platform, since the current jsf version used does not allow the configuration of the separators.

João Rosado
I don't think that helps the point that there is a workaround, but thank you for providing it.  Is there a reason that colons are used instead of hyphens? I think requiring a special plugin for jQuery to handle an issue that doesn't need to exist in the first place is an unnecessary obstacle to development.
Hehe I was editing my answer already to add that part :)
Check above.
Indeed, just read it.  Thanks for the information.
Which version of JSF outsystems uses?
I know there is a context parameter to configure that

Hi Thiru, the platform generated applications use JSF 1.2, that context parameter that you're talking about is only allowed for JSF 2.x applications. 

Hope it clarified your doubt.


Ok thanks! Yes cleared
Are there plans to update the JSF version to 2.x anytime soon?