Creating a Simple Customer Inquiry Application

The example described on this page is also included in the Profound UI Samples Library (PUISAMPLES) that is automatically installed onto your system when you install Profound UI.

Display file source: PUISAMPLES/QDDSSRC/CUSTINQ1D
RPGLE source: PUISAMPLES/QRPGLESRC/CUSTINQ1R

Intro:

The purpose of this walkthrough is to create a simple Rich Display File application that asks for a customer number and displays the corresponding customer name.

This walkthrough assumes that you are already familiar with Rich Display Files and the Visual Designer. We recommend viewing these documentation pages before proceeding with this walkthrough.

Setting up the Application Screen

Placing a Panel on the screen:

The Panel widget is typically used to contain other widgets on your screen. There are various styles of panel widgets available in the Visual Designer, but we recommend using one of the newer-style panels available in the Widget Sets tab.

In this example, we will use the Panel - All Blue widget from the Blueprint widget set.

Click and drag the Panel - All Blue panel widget onto the Designer Canvas.
Double-click on the Panel Title to initiate inline editing and type “Customer Inquiry”.
Resize the panel to the desired size by dragging the sizers on the panel

Placing Labels into the Panel:

The Label widget is a simple widget that is used to output text onto the screen. It’s similar to the Output Field widget, but is styled differently. In this example, we will be using the Label widget from the Blueprint widget set.

Drag a Label into the panel
1. Double click the label to initiate inline editing and type “Customer Number:”
2. Choose the font color option and set the color to white
Drag another Label into the panel
1. Double click the label and type “Customer Name:”
2. Choose the font color option and set the color to white

After adding both label widgets, it should look something like this:

Placing a Textbox into the Panel:

The Textbox widget is a commonly used input widget that allows users to input data. Textbox widgets can be used to send data back to your program via field binding. In this example, we will be using the Textbox widget from the Blueprint widget set.

Drag a Textbox into the panel and place it next to the Customer Number label:
Double-click the Textbox widget to initiate the binding dialog for the value property
1. Specify Field Name and Data Type as shown below and press Ok:

Binding the value of the textbox widget gives us the ability to enter a customer number into the textbox and then send that customer number back to the program. The program can then perform a lookup based on the customer number and retrieve the customer’s name from that information.

Placing an Output Field into the Panel:

An Output Field widget (similar to the Label widget that we used previously) is used to output text onto the screen. In this example, we will be using the Output Field widget from the Blueprint widget set.

Drag an Output Field widget into the panel and place it next to Customer Name:
Double-click the Output Field widget to initiate the binding dialog for the value property
1. Specify Field Name and Data Type as shown below and press Ok:

Placing Buttons into the Panel

A Button widget is clickable element that can be used to return control to your back end program or initiate a client-side scripts. Buttons operate the same way as a standard HTML button would. In this example, we will use two Button widgets from the Blueprint widget set.

Drag a Secondary Button widget into the panel
Double-click the button, type “Find Customer” and resize the button so that the text fits well.
Select the button widget and locate the Response property in the Properties Panel
1. Use the Bind icon and bind the button widget to an indicator named btnSubmit
Locate the Shortcut Key property for the button and select Enter from the drop-down list
1. The Shortcut Key property allows you to set a keyboard key that will trigger this button. In this example, pressing Enter on the keyboard will trigger the Find Customer button.
Drag a Cancel button widget into the panel
Double-click the button, type “Exit” and resize the button so that the text fits well
Select the button widget and locate the Response property in the Properties Panel
1. Use the Bind icon and bind the button widget to an indicator named btnExit

Setting up the Record Format

In order to execute (or show) this screen in your program, you need to give the record format (or screen) a name. This will be the format that you reference in your program to then display the screen.

Select the Unnamed Screen in the Record Formats tab
1. This will bring up the Screen Properties panel that you’ll need for the remaining steps
Type “CUSTINQFMT” into the Record Format Name property
Type “Customer Inquiry” into the Description and Document Title properties
1. Note that Description and Document Title are optional properties

Saving and Compiling the Display File

Before using the display file in your program, you must save and compile it into your IBM i library. You can perform both functions directly in the Visual Designer.

Using the Save option in the Visual Designer, save the Display File to your library and name it “CUSTINQD”
After saving the DSPF, use the Compile option to compile it into your library

Once the file is saved and compiled properly, you’re ready to use the DSPF in your program.

Your screen should look similar to the following image, at this point:

Creating the RPG Program

This example uses an RPG program as the backend to run this DSPF. This section will explain how to set up the RPG program to run this display file.

Create an RPG program named “CUSTINQR” in the same library where your CUSTINQD display file exists.
The code will look similar to the following:

**free
 
Ctl-opt DFTACTGRP(*NO);

// Customer Inquiry Rich Display File 
Dcl-f GRIDSD WorkStn Handler('PROFOUNDUI(HANDLER)');

// Customer Master Database File
Dcl-f CUSTMASTP Keyed;
  
  //Run the following logic until the user presses the Exit button        
  Dou btnExit = *On;  
      
      //Display the record format
      ExFmt CUSTINQFMT; 

      //Get customer record
      Chain CSNUM CUSTMASTP; 

      //If the customer number isn't found
      If Not %Found();
        //Leave the customer name as blank
        CSNAME = '';
      EndIf;

      EndDo;

  *InLr = *On;

Key Points:

In order to run the Rich Display File with your RPG program, you’ll need to add the Open Access HANDLER keyword to your program. This is shown in line #6 in the code above.
The CUSTMASTP database file with sample records can be found in library PUISAMPLES, which ships with Profound UI.
The following attachment is a PHP version of the same example program: .