Ask Reuben – October 29, 2025

Style Guide

What is a Style Guide?

I used the term “Style Guide” in a conversation and got asked the question “What is a Style Guide”. When I did my first Genero transformation in the early 2000’s, the piece of advice we got from those who had already transformed their application to Genero was after you have done some Proof of Concepts (POC) Genero applications, put together a document outlining what your User Experience (UX) should be, and then use this as the basis for

coding your .4st, .4ad, .4tb, .4tm files
coding your Genero forms and Genero dialogs
as a standard against which you measure your Genero application in both code review and QA.

This documented, which was called a “Style Guide” would contain things like …

Program Types / Pattern Recognition

List the different types of programs do you have and what determines what type an individual program is allocated to. I talked a little bit about this in last weeks article.

Window / Form Decoration

What will be the overall appearance of the Window/Form be. How will it differ by type of program or type of window?

Will a Toolbar be used, if so where will it be positioned and what will it contain?
Will a Topmenu be used, if so where will it be positioned and what will it contain?
Will the ActionPanel be used, if so where will it be positioned and what will it contain?

For example, forms that have a TABLE might use the a toolbar that includes firstpage, prevpage, prevrow, nextrow, bext page, lastpage toolbar buttons. A form without a table would not need these buttons in the toolbar.

This will have an impact wether you use ui.Interface methods to load stylesheets, action defaults etc, or ui.Form methods. It will also impact what the stylesheet, action default etc file contains.

Widget Decision Chart

For each form field, what are the rules that determine what the appropriate widget is? You should end up with a flowchart that asks a number of questions, and you follow it until it drops out with a widget, and some attribute values.

You might start out with something simple. Is the datatype a DATE?, if so the widget is a DATEEDIT otherwise the widget is an EDIT. Then you will gradually add more and more rules. For example, what determines wether you use COMPLETER or BUTTONEDIT or COMBOBOX or RADIOGROUP?

As well as what widget, this would also include how attributes including the STYLE attribute are populated. For example, the final decision point you know you are left with an EDIT, but when does FORMAT get used, and how is the FORMAT attribute populated? It might be that all numeric data should have FORMAT specified, whereas character data does not use FORMAT attribute.

Form Layout

With your forms, consider the various layout decision points :

When do you use TABLE or SCROLLGRID ?
When do use VBOX/HBOX or GRID with Layout Tags ?
Are your form field titles positioned to the left of applicable fields or above? Is the label left or right justified? Is there a delimiter between fields ?
What value do you use for the various Window Presentation Style attributes?
What value do you use for the various Table Presentation Style attributes?
How is the Window Title populated
What are your responsive rules?
What font is used ?
What icon is used ?

Terminology

What words do you want to appear in your Genero application. This includes :

text such as Ok/Cancel but also consistent terminology such as Query vs Find vs Search vs Browse, Add vs Insert, Update vs Edit vs Change, Remove vs Delete etc. Your QAUD pattern might be FIED !
business terminology, is it Branch or Warehouse or Store, is it Product or Item or SKU etc
acceptable abbreviations, what can you shorten Account to, is it Ac, A/c, Acc, Acct etc
phrasing of error messages is it “Fieldname must be greater than zero” or “Fieldname must not be less than zero”. Do you accentuate what the correct value should be, or what the incorrect value is etc

Live Document

A Style Guide is a live document. You should be prepared to make changes to it over time. So now with the recent GUI enhancements such as Color Picker Widget, TagEdit Widget, PhoneNumber Edit, your Style Guide should be updated to reflect the appropriate use of these new widgets.

The Style Guide takes away developers needing to make decisions. These GUI design decision have already been made. If the Style Guide is followed you can be assured that your screens have a consistent user interface.

If you have a Style Guide, do not throw away your Style Guide. It is not something that would be used in the initial Genero transformation and thrown away. It should be kept and constantly referred to. The second motivating factor for this article was being on a site that I know used to have a Style Guide, but now that document was no longer referred to.