Page Comparison

...

In this example, we’ll show you how to use BLOB fields in Profound UI. This particular example will Below, we explain how to convert a BLOB field into an image, so that you can display this image in Profound UI. For this example, we will be making use of the pui.downloadURL() API and the PUIDNLEXIT program.

The PUIDNLEXIT Program

...

Below is the PUIDNLEXIT we set up for this example in its entirety:

Code Block

theme	Eclipse
linenumbers	true
collapse	true

     H **FREE
CTL-OPT DFTACTGRP(*NO) ACTGRP(*CALLER) BNDDIR('QC2LE');
    D InputData_t     ds          DCL-DS INPUTDATA_T QUALIFIED BASED(TEMPLATE);
	FILEID VARCHAR(640);
	USERID CHAR(10);
	IPADDR CHAR(15);
	INLINE IND;
END-DS;
DCL-PR TMPNAM POINTER EXTPROC('_C_IFS_tmpnam');
       qualifiedSTRING      D                                     based(Template)
     D   fileid                     640a   varying
     D   userid                      10a
     D   ipAddr                      15a
     D   inline                       1n
 
     D Main            PR                  ExtPgmCHAR(39) OPTIONS(*OMIT);
END-PR;
DCL-PR MAIN EXTPGM('PUIDNLEXIT');
	TIMINGFLAG INT(10) CONST;
  D   timingFlag                  10i 0 const
     D   inputData                         likeds(InputData_t) const
     D   stmfDir                    640a   varying
     D   stmfName                   256a   varying
     D   attName                    256a   varying
     D   contentType                255a   varying
     D   allow                        5i 0
 
       dcl-pr unlink      int(10) ExtProc	INPUTDATA LIKEDS(INPUTDATA_T) CONST;
	STMFDIR VARCHAR(640);
	STMFNAME VARCHAR(256);
	ATTNAME VARCHAR(256);
	CONTENTTYPE VARCHAR(256);
	ALLOW INT(5);
END-PR;

DCL-PR UNLINK INT(10) EXTPROC('unlink');
    PATH POINTER    path      pointer value options(*string);
      VALUE OPTIONS(*STRING);
END-PR;
DCL-PI MAIN;
	TIMINGFLAG INT(10) CONST;
 D Main            PI
     D   timingFlag                  10i 0 const
     D   inputData                         likeds(InputData_t) const
     D   stmfDir     	INPUTDATA LIKEDS(INPUTDATA_T) CONST;
	STMFDIR VARCHAR(640);
	STMFNAME VARCHAR(256);
	ATTNAME VARCHAR(256);
	CONTENTTYPE VARCHAR(256);
	ALLOW INT(5);
END-PI;
DCL-S MYPIC SQLTYPE(BLOB_FILE);
DCL-S FILENAME VARCHAR(50);
DCL-S RECNUMPOS INT(5); // USED TO PARSE THE PARAM STRING
DCL-S BLOBLOC VARCHAR(25); // STORES THE KEYWORD FOR THE LOCATION OF THE TABLE CONTAINING THE BLOB
DCL-S RECID VARCHAR(25); // STORES THE RECORD KEY FOR THE BLOB IMAGE

IF %SUBST(INPUTDATA.FILEID:1:5) = 'BLOB:'; // CHECKING PASSED PARAMETER FOR THE KEYWORD 'BLOB' 
    IF TIMINGFLAG = 0;
        FILENAME = %STR(TMPNAM(*OMIT)) + '.jpg';
        RECNUMPOS = %SCAN(':' : INPUTDATA.FILEID : 640a6);
  varying      DBLOBLOC = %SUBST(INPUTDATA.FILEID stmfName: 6 : RECNUMPOS - 6);
        RECID = %SUBST(INPUTDATA.FILEID : RECNUMPOS 256a+ 1 :
varying      D   attName   %LEN(%TRIM(INPUTDATA.FILEID)) - RECNUMPOS);
        IF BLOBLOC = 'ANIMALS';
  256a   varying      D MYPIC_FO = contentTypeSQFCRT;
            MYPIC_NAME = FILENAME;
255a   varying      D   allowMYPIC_NL = %LEN(%TRIM(FILENAME));
            EXEC SQL
       5i 0    SELECT MYBLOB INTO :MYPIC FROM dcl-sMYTABLE myPic SQLTYPE(BLOB_FILE);
 WHERE FILEID = :RECID;
     dcl-s filename varchar(255) inz('/tmp/myTestImage.jpg');    IF SQLCODE   dcl-s myid int(5);

      /free
  = 0; // SQL WAS SUCCESSFUL
    allow = 1;         if timingFlagSTMFNAME = 0FILENAME;

        myid  =  %int(%trim(InputData.fileid));         ATTNAME myPic_fo = SQFCRT'elephant';
         myPic_name = filename;          myPic_nlALLOW = %Len(%trim(filename));1;
           Exec SQLELSE;
         select myBlob into :myPic from myLibrary.myTable where fileidALLOW = :myid0;
          stmfDir = '/tmp/'ENDIF;
        ELSE;
stmfName = 'myTestImage.jpg';          attNameALLOW = 'elephant'0;
        ENDIF;
    ENDIF;
   if IF timingFlagTIMINGFLAG = 1;
         unlinkUNLINK(%trim%TRIM(filenameFILENAME));
       ENDIF;
ELSE;
    ALLOW =  *inlr = *on;
      /end-free  1; //ADD NON BLOB DOWNLOAD CONDITIONS HERE
ENDIF;

*INLR = *ON;

We won’t go into detail about the parameters set in this exit program. You can learn more about the different parameters for the the PUIDNLEXIT program in the documentation. It’s It is also important to note that we did not change modify any of the parameters in the PUIDNLEXIT program we used for this, we kept them the same as they were in the sample PUIDNLEXIT program in PUIDNLEXIT from sample that is shipped with Profound UI, but we are using the id property to pass a "key" value instead of an IFS path. This You can read more about that here.

This PUIDNLEXIT program is called twice. The first time it is called before the download, timingFlag = 0. This is where you will actually write the image to the IFS in the program. IBM has more detailed information about LOB files here on their website that will also help you with understanding parts of this program. A few important notes about this section of the program:

Fileid RECID is the ID value supplied to the the pui.downloadURL() API. This will be your file’s key value.
myPicMYPIC_name NAME is used in order to tell the program where to put the file. Notice in our program this is equal to “filename”“FILENAME”, which has a value of “/tmp/myTestImage.jpg”. So, it will create a file named “myTestImage.jpg” in the “/tmp” folder. Instead of hardcoding this in your program, you could add columns to your table, read the values from those fields, and create the file based on those valuescontains a temporary name generated by the TMPNAM() API. You can find more information about the TMPNAM() API here.

The second time the the PUIDNLEXIT program is called is after the download occurs, in which case timingFlag = 1. This is where you will want to delete the file from the IFS. To do this, we used the “unlink()” API. This API is simply used to delete a link. You can find more detailed information about this API here.

Using pui.downloadURL()

...

The display file that we used for this example is quite simple. Below you can see how this is set up in the Visual Designer:

We placed an image widget onto the screen and changed the "visibility" property of this image to "hidden", since we don’t want to see the default image. The “Download” button is where we use the the pui.downloadURL() API. In the onclick event of this button, we have the following:

Code Block

language	javascript
theme	Eclipse
language	javascript

var imageSrc =  pui.downloadURL({ "id":  "BLOB:ANIMALS:1", "contentType": "image/jpeg" });
applyProperty('Image1', 'image source', imageSrc);
applyProperty('Image1', 'visibility', 'visible');

Here, we download the image using using pui.downloadURL() by setting the “id” to “1”. This comes from ‘fileid’ in your PUIDNLEXIT program, as mentioned earlierto “BLOB:ANIMALS:1”, which contains the keywords to tell our PUIDNLEXIT program that we are downloading a BLOB object and where to find it. Note, that we need to include the logic to parse the keywords in "id" as it is not included in the default PUIDNLEXIT program shipped with Profound UI.

After downloading the image and setting this to a variable, “imageSrc”, we then use the applyProperty() API to change the "image source" property of our image to our downloaded image and change the visibility to “visible”, so that we can see the downloaded image. Now, when we click the download button, the image will download and appear in place of the image widget.

Final Result

...

After setting up our display file for our RPG program, and creating our our PUIDNLEXIT program, we get the following result.

...

Versions Compared

Old Version 1

New Version Current

Key

The PUIDNLEXIT Program

Using pui.downloadURL()

Final Result