The Goal of This Example
Show how a Universal Display File can work in tandem with a Rich Display File's List Box Widget's choices URL property. You could also utilize the choices URL property within a Combo Box Widget, but this example will be using a List Box Widget.
The Universal Display File
Read more about it: Using the Universal Display File Editor
For this example, we are creating a
JSON object to reference for the options of our options box. Please remember to set the
Below are screen shots of the Universal Display File (
COLORSD) being created the Universal Designer. There are 3 record formats representing the parts of an HTML page, the Header, Body, and Footer. The middle image shows
COHEX as the bound fields.
CONAME (color name) is the variable containing names of colors, the example
CONAME is defined as
COHEX (color hex) is the variable containing the hex values of
CONAME's colors, the example
CONAME is defined as
CHAR(7) and the records include the
'#' along with the hex color value (i.e.
#FF0022). If you would prefer, you can use valid CSS color names instead of the hex color value and the example will still work. You will need to make sure your fields are properly defined for the length and type of field. Our Universal Display File will access the information in these bound fields and display them in our program. Please refer to the for more information with this step.
The Header format is used to define the file/object being made by the Universal Display Program and is only printed once to the file/object. The Header format in this example defines the start of a
The Body format is used to define a section of the file/object that will be printed one or more times depending on an input source. The Body format in this example defines an Option for the List Box and will be printed to the
The Footer format is used to define the end of the file/object that will only be printed once. The Footer format in this example ends the
The Universal Display RPG Source Code
Read more about it: RPG Coding for Universal Display Files
The source code file of this example is named
COLORSR. An important part to mention is that the Universal Handler is used for this program.
What this program will do is grab a list of colors from a specified database file,
COLORSP for this example, on the
IBM i and create a
JSON object that will contain the option objects that will populate the List Box.
CONAME will display in the List Box and the corresponding
COHEX will be passed to the program when a selection is made.
The following is the resulting
JSON object of the exactly what was shown above:
The Rich Display File
Below is a screen shot of the layout of the
SHOWCOLORD rich display file. There are 3 bound fields. Two for
EXIT buttons, and one for the color bound field. Once you click the
OK button after selecting a color name in the List Box, the background color of the label underneath will change to the corresponding color. The
COLOR bound field is bound to the background color attribute of the label widget, and is also bound to the value property of the List Box; this is how the label is able to change colors accordingly.
The Choices URL property of the List Box is what populates the choices of colors that can be picked. We set this property to the URL of our Universal Display File application.
Example Display Arrangement
This is an image of the Visual Designer with the arrangement of elements of this example.
The Rich Display RPG Source Code
File name is
SHOWCOLORR. Notice that the ProfoundUI Handler is being used in the handler for this program. The EXFMT operation will display the
SHOWCOLORD display file.
After compiling the Universal Display File (
COLORSD) and the Rich Display File (
SHOWCOLORD) the corresponding RPG programs,
SHOWCOLORR, may be compiled and then the program run.
To run the program, login to a Genie session and use
ADDLIBLE to make sure the libraries where the program files are stored are in the library list. Then you may run the command
CALL YOURLIBRARY/SHOWCOLORR to run your program and you can display the colors after highlighting a color name and pressing the Ok button, double-clicking the color, or selecting a color and pressing the 'Enter' key on your keyboard.
The Program in Action
Why Do It This Way?
- Universal Display Files can be used to output:
- A program that produces dynamic HTML content for a web browser.
- A web service that outputs an
JSONdocument to a client program via
- A plain text,
CSVdocument on the IFS.
The static content is embedded into the DDS source and display file object, allowing for easy integration with existing change management systems and procedures.
- The Universal Display File web connector allows you to map a URL on the
Profound UI HTTPserver to a call to an RPG program on the IBM i, which will take the information written to the Universal Display File (
COLORSD) by the Universal RPG program (
COLORSR) and send it to the client via the
HTTPresponse where the called RPG program can use the
HTTPquery string and