Example: Using Choices URL with a Universal Display File

The Universal Display File

_{Read more about it: Using the Universal Display File Editor}

Below are screen shots of the Universal Display File 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. 

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.

**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 teh Universal Display File to the JSON object.
 
// End program
*InLr = *On;
RETURN;

The Rich Display File

_{Read more about it: Visual Designer Basics, Using the Web Connector, Work with URL Mappings Tool}

Below is a screen shot of the layout of the SHOWCOLORD rich display file. There are 3 bound fields. Two for  OK and  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. 

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. 

**FREE  // This program is utilizing FREE-FORMAT RPG
ctl-opt DFTACTGRP(*NO);
dcl-f   SHOWCOLORD WorkStn 
        // Use the ProfoundUI Handler as the handler in this program
        Handler('PROFOUNDUI(HANDLER)');
 
// Run program until the exit button is pressed
Dou BTNEXIT = *On;
 ExFmt SHOWCOLORS;
EndDo;

// End program
*InLr = *On;
RETURN;

The Result

After compiling the Universal Display File (COLORSD) and the Rich Display File (SHOWCOLORD) the corresponding RPG programs, COLORSR and SHOWCOLORR, may be compiled and the program run.

To run the program, login to a Genie session and use EDTLIBL or ADDLIBLE to make sure the libraries where the program files are stored are in the library list. Please make sure that PROFOUNDUI is included in your library list. Then CALL YOURLIBRARY/SHOWCOLORR. This will run your program and you can display the colors after highlighting a color name and pressing the Ok button. 

The Program in Action

Why Do It This Way?

1. Restful Aplications
2. Security
3. Object Oriented Design