Menu Widget Option Attributes

[dnataliz]

Good Morning,
I am new to Profound and I am starting to convert some of our screens with Rich Display. First let me say this product is great!
I am now looking at converting our menus screen. The existing display file has 30 different fields for the menu option descriptions (DESC01,DESC02 etc)
I was thinking of using the menu widget, and then binding CHOICES to a field that I create in the RPG program by concatenating all of the options with commas.
Question:
Can we have different attributes for the menu options with a menu widget?
i.e. some of the menu options are like sub headers for each section and depending on the value, I would like to reverse image that option if it is one of these headings. Is this possible?
Or should I just show each DESC01, DESC02, etc fields on the screen, and change each fields CSS values based on indicators in the RPG program?

Thanks
Dan

[matt.denninghoff]

I'm pleased to hear you like the product! There are no CSS selectors for elements based on the text contents of the element; so, it's not possible with just CSS to style options (e.g. reverse image) based on the value of the option.

One way to work around that is to wrap the option value in an HTML tag that will let some CSS style it differently. For example, your menu "choices" property could be:

Code: Select all

Option 1,<span class="specialHeading">Option 2</span>,Option 3

. And then you'd have some CSS selector like this in a .css file under /www/<yourinstancename>/htdocs/profoundui/userdata/custom/css/:

Code: Select all

span.specialHeading { font-weight: bold; }

. Your RPG program would need to wrap the HTML around the values when desired, and the bound field would need to be big enough to hold it all.

Another way would be to use both JavaScript and CSS. In your screen's "onload" event you can write some JavaScript to look at each table cell in your menu for a certain value. When found, you could set the element.className = "specialHeading" or something like that.

You could also just use output fields like you did in the original display file and use indicators to change the CSS class or properties.

[dnataliz]

I ended up using hyperlinks so it looked clickable with indicators and it worked great.
I used hyperlinks so the mouse pointer would be become active on the option.
I used the onload to format each field based on what was in it.

Thanks!