Ask Reuben – July 8, 2025
TTY Attribute, Form Attribute, Presentation Style, Theme Variable
How can I change the appearance of this widget/container?
A common question on the support desk is how to change the appearance or behaviour of a particular Container or Widget? The mistake most developers make is that they will not look in ALL the available places in the documentation. To review all the available places is also a good view of the history of Four Js Genero. Where once you only had TTY Attributes, now you have Form Attributes, Presentation Styles, and Theme Variables with options to change the appearance or behaviour of a particular Container or Widget. If we think back to Text Rendering Mode (TUI) days, there were two places you could change the appearance. In the 4gl code, syntax such as DISPLAY AT, DISPLAY TO, DISPLAY BY NAME, OPEN WINDOW, and the various dialog statements such as INPUT allowed you to specify an ATTRIBUTES clause at the end of the instruction. There was a very limited range of things you could do here, all options were keywords for the compiler. The basic set of UI ATTRIBUTES values were listed in the DISPLAY AT documentation… Similarly in the .per you could specify some of these attribute via the COLOR and COLOR WHERE syntax. For backwards compatibility with Informix-4gl, these TTY ATTRIBUTES are legal syntax and still respected where possible. I would hope that you have recognised the limitations of these TTY ATTRIBUTES clauses and your code has evolved not to use them. With the introduction of GUI Interface and Genero in the early 2000’s, there was a lot more GUI functionality and hence syntax added. This was done in two places. In Form Files, you now had the ability to specify a Container within the LAYOUT Section or within a Container a Widget (Form Item) , and with these there were a wider range of ATTRIBUTES (Form Item Attributes) that would apply to this Container or Widget. To see what range of Attributes were available for a Container or Widget, a key tip is to find the page about the Container or Widget in our documentation. There you will see a list of available Attributes that you can click on and get an explanation of what they do. For example purposes, the following screenshots will show the Edit (an example of a Widget), and a Table (an example of a Container)TTY ATTRIBUTES
Form Attributes
Presentation Style
On the same pages of documentation that list all the available Form Attributes for Container/Widget, just below it is a section that will list all the available Presentation Style attributes that are unique to that Container/Widget.
So on the documentation page for a Container/Widget, not only can you see all the available Attributes, you can also see the unique Presentation Styles for a Container/Widget.
There is an alternate method with Presentation Styles to see all the available Style Attributes. In the Presentation Style selection of the documentation, there is a Presentation Style Attribute Reference section that allows you to view the presentation style attributes that are unique to each Container/Widget.
There is one tip you also have to remember with Presentation Style documentation. Rather than repeating the documentation for Presentation Styles that apply to all Container/Widgets, these are defined once in a page dedicated to Common Presentation Style Attributes . A key tip is to remember to check this page as well when looking to see what Presentation Style Attributes are available for a Container/Widget. (The extra screenshot in the next gallery is the Common section)
From a coding perspective, Presentation Style were a great advance on TTY Attributes. Some of the advantages are
- not having to recompile a .4st.
- change a value once in the 4st and have it change everywhere the style is used.
- as keywords are not built into compiler, more available options and more flexibility with those options.
Theme Variables
The introduction of Universal Rendering saw another way you can alter the appearance and behaviour of Container/Widgets. Within the ability to customize the GBC, you can alter the value of a GBC Theme Variable and this will alter the resultant HTML/JS/CSS of your GBC Customization based on the value of the GBC Theme Variable. The simplest example of this is to change $ui-primary-color to change base colour of your UI.
This time in the GBC Documentation, we will find a section Theme Variables Reference that will the various Containers/Widgets and in turn the unique Theme Variables that are available for each Container/Widget.
I had one support case recently where I noticed that a Table was rendered to still show one row when there was not much space available. I knew there was not a Attribute or Presentation Style, and then I thought don’t forget about Theme Variables, and sure enough, in the Table Theme Variable Reference, there was an entry $gbc-TableWidget-min-page-size that did exactly what the customer wanted.
Similarly to Presentation Styles, there are higher levels of theme variables in the framework that apply across all Container/Widgets. As per this overview there is the Top UI Design layer, and the UI Toolkit /Advanced Styling layer.
Also within the concept of GBC Customisation you have the full CSS syntax available to alter the appearance of a customer/widget via Style Sheets. This means you can do things that aren’t in Genero syntax such as Rounded Corners and hence Rounded Images., animation.
You won’t find in our documentation what available CSS syntax is. You would use resources such as W3schools, Mozilla, Stack Overflow, or your favourite search engine or AI chat box to see what is available and what other web developers have used.
Summary
So when it comes to seeing what is available, make sure you explore all the options that are available to you. Make sure you are aware of how our documentation lists all the available Attributes and Presentation Styles that are available for a Container/Widget, don’t forget about the Common Presentation Styles, and now with Universal Rendering make sure you also look for Theme Variables related to a Container/Widget.
To reinforce that if I pick a widget such as Checkbox, note the
- Form Item definition that lists the available Attributes (and also Presentation Styles)
- The Presentation Styles Available for a CheckBox (Don’t forget the common Presentation Styles)
- Theme Variables for a CheckBox (Don’t forget the Top UI Design layer, and the UI Toolkit /Advanced Styling layer, and customization)
This pattern is the same for all Container/Widgets.