Surely there is a way to do this, but I don’t have the knowledge yet.
Can you create an #ID for a row of a detail table based on a field in that row?
My data has a code on each line that designates how the line should be displayed. In PP7 we used a whole lot of IF/ELSE in a global function, but I thought using that CODE field as an #ID would help with both styling and scripting.
To make this:
Look like this:
I expect I will need JS scripting to “slice” each line and position each part, but I don’t think I can style in JS, so dynamically designating an #ID for each line type will kill two birds with one stone.
Any suggestions on where to start would be appreciated.
So why doesn’t this work?
If I did this right, the #ID for the first row of this table should be #HDRH, and the style I created for this ID should work.
But no dice. What am I missing?
I was feeling pretty smart for figuring this out…until it didn’t work.
You can achieve this with classes:
<table style="width :100%" data-column-resize="" data-hide-when-empty="" data-expander="2019" id="table">
<thead>
<tr>
<th style="text-align: left; width: 99.46%;">Field1</th>
</tr>
</thead>
<tbody>
<tr data-repeat="detail">
<td style="text-align: left;" class="{{{Field1}}}">{{{Field1}}}</td>
</tr>
</tbody>
</table>
This is not an ID, it is an HTML element named HDRH. you need to put a # in front to be an id. #HDRH.
Also IDs are “supposed” to be unique. So if any value are to be repeated, you best to use classes.
Basically you had the right idea…just didn’t implement it according to CSS Syntax
I was just copying the default.css, where it does not appear the IDs have the “#” selector in front of them.
But, taking your advice and changing it to a class (with the “.” in the stylesheet) has changed nothing.
Should I remove all the inline style elements?
I also notice this element is not getting anything from the context_print_styles.css stylesheet where I added this class. How can I point this element to that stylesheet?
Show me your CSS and the value that will become a class.
Like I said:
#theTag = ID
.theTag = class
theTag = HTML element
It is only a metter of syntax.
IDs are to be used for specific element that exist uniquely.
Like this:
<p ID="myElement">some text</p>
Only the element with that specific ID will be affected by your CSS:
#myElement{
font-weight: bold;
}
Classes for element that share what you want.
Like this:
<p class="myElement">some text</p>
<div class="myElement">something else</div>
Only the elements with that specific class will be affected by your CSS:
.myElement{
font-weight: bold;
}
HTML elements are for affecting element by their very nature (HTML element)
Like this:
<p>some text</p>
Only the <p> element will be affected by your CSS:
p{
font-weight: bold;
}
So the syntax for the “p” I was copying in the default.css is not an ID, but an HTML element, hence no “#”.
But here is the context_print_styles.css with one entry
And the Source code
The value for CODE_1 is “HDRH” but I know I am missing something.
Please share an anonymized version of your project so I can look into it. Will save us both some time. You can also message me in private to provide it.
SUCCESS!!!
The issue was I had 3 sets of curly brackets around the field name in the source code {{{CODE_!}}}, when I only need 2 {{CODE_1}}.
Thanks for helping me work through this.
I tried the version your shared with me in private and it works out of the box…
Weird. Why is that?
I am using a relatively current version of Connect
Version 2025.2.1.27910 • Professional
Is there some logic to using 3 sets of curly brackets as opposed to 2 sets?
I first tried it in Connect Chromium 2026.1.1 and just tried it in Connect “normal” 2025.2.3 and I get the same result.
Maybe your workstation needs a reboot? 
