Versions Compared

Old Version 78

changes.mady.by.user Megan Bond

Saved on

compared with

New Version 79

changes.mady.by.user Megan Bond

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Warning
titlePlease Note!

This example assumes you have familiarized yourself with the Universal Display Files, Using the Universal Display File Editor, and Using the Web Connector! Notes and links may be provided, but complete explanations may not!

Section
Column
width20%

 

 

Panel
titleTable of Contents

Table of Contents
indent0px

 

Column
width80%

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.

Info
titleFiles Used by This Example

Below are downloadable versions of the files used in this example:

  • Choices URL in Universal Display File: COLORSD.json
  • Universal Display File RPG Code: COLORSR.txt
  • Rich Display File: SHOWCOLORD.json
  • Rich Dipslay File RPG Code: SHOWCOLORR.txt
  • Sample Color Table SQL File: COLORSP.sql (contains the CREATE TABLE)
    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

...

Info

The Insert Field button is used to add bound fields like CONAME and COHEX.

CONAME and COHEX are defined as References to their corresponding field in the table.

The REF keyword containing the NAME of the table is added to File Keywords.

The library containing the table should be added to the Library List.

 

The Universal Display RPG Source Code

Read more about it:  RPG Coding for Universal Display Files

...

Code Block
languagejavascript
titleUniversal Display Result
collapsetrue
{
     "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
width20%

 

Column
width40%


Example Display Arrangement

This is an image of the Visual Designer with the arrangement of elements of this example.

Column
width30%
Note
titleRemember!

Don't forget that the choices url value needs to be mapped! The Web Connector, as of Profound UI Version 5, Fix Pack 10.0, has a URL Mappings Tool that can be used to maintain the URL Mappings, previous versions require a PUIMAPP record to be created.

Column
width10%

 

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. 

Section
Column
width80%
Code Block
languagecpp
titleRich Display RPG Source Code
firstline000100
linenumberstrue
collapsetrue
**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;
Column
width20%
Note
titleRemember!

Hard coded libraries are a bad practice! We strongly suggest you do not use hard coded libraries!

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 then the program run.

...

Section
Column
width20%
 
Column
width30%


Column
width30%
Info
iconfalse

Actions in Order:

  1. Select Silver -> Click Ok

  2. Select Red

  3. Scroll down using ▼ of the scrollbar
  4. Double-click Olive to select and pass to program
  5. Select Maroon -> Press "Enter" on keyboard
  6. Click Exit to exit the program

 

Column
width20%

 

The Program in Action

Why Do It This Way?

  1. 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 XML or JSON document to a client program via HTTP.
    • A plain text, XML, JSON, or CSV document on the IFS.

  2. The static content is embedded into the DDS source and display file object, allowing for easy integration with existing change management systems and procedures.

  3. The Universal Display File web connector allows you to map a URL on the Profound UI HTTP server 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 HTTP response where the called RPG program can use the HTTP query string and POST input for READ operations.