Using BLOB Fields with pui.downloadURL()

Introduction

In this example, we’ll show you how to use BLOB fields in Profound UI. 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:

**FREE
CTL-OPT DFTACTGRP(*NO) ACTGRP(*CALLER) BNDDIR('QC2LE');
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');
       STRING CHAR(39) OPTIONS(*OMIT);
END-PR;
DCL-PR MAIN EXTPGM('PUIDNLEXIT');
	TIMINGFLAG INT(10) CONST;
	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 VALUE OPTIONS(*STRING);
END-PR;
DCL-PI MAIN;
	TIMINGFLAG INT(10) CONST;
	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 : 6);
        BLOBLOC = %SUBST(INPUTDATA.FILEID : 6 : RECNUMPOS - 6);
        RECID = %SUBST(INPUTDATA.FILEID : RECNUMPOS + 1 :
            %LEN(%TRIM(INPUTDATA.FILEID)) - RECNUMPOS);
        IF BLOBLOC = 'ANIMALS';
            MYPIC_FO = SQFCRT;
            MYPIC_NAME = FILENAME;
            MYPIC_NL = %LEN(%TRIM(FILENAME));
            EXEC SQL
            SELECT MYBLOB INTO :MYPIC FROM MYTABLE WHERE FILEID = :RECID;
            IF SQLCODE = 0; // SQL WAS SUCCESSFUL
                STMFNAME = FILENAME;
                ATTNAME = 'elephant';
                ALLOW = 1;
            ELSE;
                ALLOW = 0;
            ENDIF;
        ELSE;
            ALLOW = 0;
        ENDIF;
    ENDIF;
    IF TIMINGFLAG = 1;
        UNLINK(%TRIM(FILENAME));
    ENDIF;
ELSE;
    ALLOW = 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 PUIDNLEXIT program in the documentation. It is also important to note that we did not modify any of the parameters 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. 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:

RECID is the ID value supplied to the pui.downloadURL() API. This will be your file’s key value.
MYPIC_NAME is used in order to tell the program where to put the file. Notice in our program this is equal to “FILENAME”, which contains a temporary name generated by the TMPNAM() API. You can find more information about the TMPNAM() API here.

The second time 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 pui.downloadURL() API. In the onclick event of this button, we have the following:

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 pui.downloadURL() by setting the “id” to “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 PUIDNLEXIT program, we get the following result.

Initial screen:

After pressing the “Download” button: