| Section |
|---|
| Column |
|---|
| The Goal of This ExampleShow 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. | Info |
|---|
| title | Files Used by This Example |
|---|
| Below are downloadable versions of the files used in this example: | Note |
|---|
| This data set was randomly generated meaning that the color name and the hex color associated with it might not match up. The functionality is the same and it is being provided to help users practice. |
|
|
|
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.
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 CONAME and COHEX as the bound fields. CONAME (color name) is the variable containing names of colors. COHEX (color hex) is the variable containing the hex values of CONAME's colors. 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.
| Section |
|---|
| Column |
|---|
|
Header 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 JSON object . |
| Column |
|---|
|
Body 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 JSON object as many times as there are records in the COLORSP database file. |
| Column |
|---|
|
Footer 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 JSON object . |
|
| Info |
|---|
The Insert Field button is used to add bound fields like CONAME and COHEX.  Image Added
CONAME and COHEX are defined as References to their corresponding field in the table.
 Image Added
The REF keyword containing the LIBRARY/NAME of the table is added to File Keywords.  Image Added
 Image Added
|
The Universal Display RPG Source Code
...
| Section |
|---|
| Column |
|---|
| | Code Block |
|---|
| language | cpp |
|---|
| title | Universal Display RPG Source Code File |
|---|
| firstline | 000100 |
|---|
| linenumbers | true |
|---|
| collapse | true |
|---|
| **FREE // This program is utilizing FREE-FORMAT RPG
ctl-opt DFTACTGRP(*NO);
dcl-f COLORSD WorkStn
// Use the Universal Handler as the handler in this program.
Handler('UNIVERSAL(HANDLER)');
dcl-f COLORSP Keyed;
Write Header; // Write the Header from the Universal Display File to the JSON object.
Read COLORS; // Read a record from the database file COLORSP.
Dow Not %Eof(); // While not at the end of COLORSP
Write Body; // Write the record to the JSON object
Read COLORS; // Read the next record of COLORSP
EndDo;
Write Footer; // Write the Footer from the Universal Display File to the JSON object.
// End program
*InLr = *On;
RETURN; |
|
| Column |
|---|
| | Note |
|---|
| Hard coded libraries are a bad practice! We strongly suggest you do not use hard coded libraries! |
|
|
The following is the resulting JSON object of the exactly what was shown above:
| Code Block |
|---|
| language | javascript |
|---|
| title | Universal Display Result |
|---|
| collapse | true |
|---|
|
{
"success":true,
"response":[
new Option("WHITE","#FFFFFF")
,
new Option("SILVER","#C0C0C0")
,
new Option("GRAY","#808080")
,
new Option("BLACK","#000000")
,
new Option("RED","#FF0000")
,
new Option("MAROON","#800000")
,
new Option("YELLOW","#FFFF00")
,
new Option("OLIVE","#808000")
,
new Option("LIME","#00FF00")
,
new Option("GREEN","#008000")
,
new Option("AQUA","#00FFFF")
,
new Option("TEAL","#008080")
,
new Option("BLUE","#0000FF")
,
new Option("NAVY","#000080")
,
new Option("FUCHSIA","#FF00FF")
,
new Option("PURPLE","#800080")
]
} |
The Rich Display File
Read more about it: Visual Designer Basics, Using the Web Connector, Work with URL Mappings Tool
...
| Section |
|---|
| Column |
|---|
|
|
| Column |
|---|
| | Info |
|---|
| Actions in Order: - Select Silver -> Click Ok
Select Red - Scroll down using ▼ of the scrollbar
- Double-click Olive to select and pass to program
- Select Maroon -> Press "Enter" on keyboard
- Click Exit to exit the program
|
|
|
...