Maximiliano Romero

[mromero]

Hello everyone
I need to Pick up a blob field that can be an image or pdf and display it in a dialog

[Dino]

Hi Maximiliamo

You can use this (for example here in a web page, you can move it to a dialog)

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Height(512) Width(872)

Define_Com Class(#PRIM_WEB.Page) Name(#WebPage) DisplayPosition(1) Height(360) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(112) Width(393) Left(24)
Define_Com Class(#PRIM_IMAG) Name(#Image) DisplayPosition(2) Image(#xImageImage32) ImageSizing(BestFit) Left(499) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(112) Height(345) Width(326)
Define_Com Class(#PRIM_MD.FilePicker) Name(#FilePicker) Caption('CLICK HERE TO SELECT AN IMAGE OR PDF') DisplayPosition(3) Left(39) Parent(#COM_OWNER) TabPosition(3) ThemeDrawStyle('MediumTitle') Top(28) Width(360) Icon('drive_folder_upload')
Define_Com Class(#PRIM_MD.Label) Name(#Text) Caption('Text') DisplayPosition(4) Left(520) Parent(#COM_OWNER) TabPosition(4) Top(32) Width(270)

Evtroutine Handling(#FilePicker.FileSelected) File(#STD_BLOB)
#Text.Caption := #STD_BLOB.MimeType
If (#STD_BLOB.MimeType.UpperCase.Contains( "PDF" ))
#WebPage.Source := #STD_BLOB.Blob
Else
If (#STD_BLOB.MimeType.UpperCase.Contains( "IMAGE" ))
#Image.Image <= #SYS_APPLN.CreateBitmap( #STD_BLOB.Blob )
Endif
Endif
Endroutine
End_Com

blobtoimageorpdf.jpg (174.86 KiB) Viewed 38536 times

[mromero]

Thanks dino.
But I want to pull it from a blob field of a table

[Dino]

for that you need a server module to read the record, for example:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_SRVM)
Srvroutine Name(read)
Field_Map For(*OUTPUT) Field(#std_blob)
Fetch Fields(#xEmployeeImage) From_File(xEmployeeImages) With_Key(100066)
#std_blob := #xEmployeeImage
Endroutine
End_Com

then the web page can call that routine and use the image to populate the image or webpage with the pdf:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Height(512) Width(872)

Define_Com Class(#PRIM_WEB.Page) Name(#WebPage) DisplayPosition(1) Height(360) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(112) Width(393) Left(24)
Define_Com Class(#PRIM_IMAG) Name(#Image) DisplayPosition(2) Image(#xImageImage32) ImageSizing(BestFit) Left(499) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(112) Height(345) Width(326)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button) Caption('CLICK HERE TO LOAD A BLOB FROM FILE') DisplayPosition(3) Left(39) Parent(#COM_OWNER) TabPosition(3) ThemeDrawStyle('MediumTitle') Top(28) Width(314) Icon('drive_folder_upload')
Define_Com Class(#PRIM_MD.Label) Name(#Text) Caption('Text') DisplayPosition(4) Left(520) Parent(#COM_OWNER) TabPosition(4) Top(32) Width(270)

Evtroutine Handling(#Button.Click)
#COM_OWNER.Read
Endroutine
Mthroutine Name(Read)
Define_Com Class(#test67sm.read) Name(#readblob)
#readblob.ExecuteAsync std_blob(#std_blob)
Evtroutine Handling(#readblob.Completed)
#Text.Caption := #STD_BLOB.MimeType
If (#STD_BLOB.MimeType.UpperCase.Contains( "PDF" ))
#WebPage.Source := #STD_BLOB
Else
If (#STD_BLOB.MimeType.UpperCase.Contains( "IMAGE" ))
#Image.Image <= #SYS_APPLN.CreateBitmap( #STD_BLOB )
Endif
Endif
Endroutine

Endroutine
End_Com

blobtoimageorpdf2.jpg (146.84 KiB) Viewed 38501 times

[mromero]

Very good
thank you very much Dino

[kno_dk]

Hi

I am trying to extend your exsample. I want to add tiles to holde the Blob(PDF, images, excel etc) so the user can see the blob and then click on the blob and then opens the blob in a dialog for furthe work. But I cannot get the blob to my Tile RP. Do you have a god exsample?

Thanks
Klaus

[adale]

I have a similar question.
I am reviewing the xContacts template / demo to see how this application handles uploading of images for the contact picture as a BLOB, and then displays the BLOB image for the contact view / dialog.

In the dialog, once an image file to upload has been selected from the PRIM_WEB.FilePicker, it gets loaded to the IFS:

Code: Select all

IF (#STD_BLOB.IsNotSqlNull)
#LS7FileName := (*PART_DIR + "web\vl\images\contacts\" + #xContactPhoto.AsNativeString)
USE Builtin(OV_FILE_SERVICE) With_Args("COPY_FILE" #STD_BLOB.FileName #LS7FileName)
ENDIF

So far so good. Now there is an image file in the IFS partition directory.
/LANSA/x_lansa/x_(*PARTION)/web/vl/images/contacts/

What I don't follow or understand is how the VL web dialog would then show the newly uploaded image?
In the dialog there is:

Code: Select all

EVTROUTINE Handling(#Read.Completed)
#CardImage.IconFileName := ("images\\contacts\\" + #xContactPhoto)
#COM_OWNER.UpdateTitle
SET Com(#Details #SaveIcon #DeleteIcon) Visible(True)
ENDROUTINE

How does "images\\contacts\\" get translated or interpreted to the IFS partition directory?

Based upon other forum threads in regards to BLOBS, it would seem that there needs to be another server call, to actually get the BLOB file from the server, then assign to the #CardImage?

Or is there some intrinsic feature to directly reference where the image file is located on the server to use in a dialog/view?

[BrendanB]

you have likely noticed that /LANSA/x_lansa/x_(*PARTION)/web/vl is the place which holds the html and js files for your webpage and reusable parts (views etc...)

so /images/contacts is relative to this.

what this means is that the webserver will serve files from the /images/contacts directory...

so this part:

#CardImage.IconFileName := ("images\\contacts\\" + #xContactPhoto)

tells the component #CardImage to load its image from '/images/contacts/' + #XContactPhoto

so it loads it from there without any interference...

you could also try:

http://yourwebserver:yourport/xxxpgmlib/dem/images/contacts/abbot_morrow.png (xxxpgmlib is your system name: dcxpgmlib or whatever)..

this should directly show the picture in your browser...

so in the example, the blob is saved in this place, so that it can be served to the browser without needing a server module.

[adale]

Brendan,
Can you help point out what I might be missing here.

The file picker works as expected, and saves the image file in the IFS to:
/LANSA_dcxpgmlib/x_lansa/x_SIP/web/vl/images/contacts/tobias_allen.jpg
***************************************************
Directory . . . . : /LANSA_dcxpgmlib/x_lansa/x_SIP/web/vl/images/contacts >

Type options, press Enter.
2=Edit 3=Copy 4=Remove 5=Display 7=Rename 8=Display attributes
11=Change current directory ...

Opt Object link Type Attribute Text
. DIR
.. DIR
tobias_allen.jpg STMF
**************************************************

But when trying to use or display the image as an Icon filename (like the example in xContacts), I must be missing something.

Attempt #1 - did not display any image ?
- the console line prints in the browser console showing #MIIMAGE to be tobias_allen.jpg
- This method would be the preferred option.

Code: Select all

* test work
#MIIMAGE := 'tobias_allen.jpg'
#IconImage.IconFileName := ("images\\contacts\\" + #MIIMAGE)

* Console - debug
#sys_web.Console.Log( ('LINE-#551 Reload: ' + #CEITC + ' - ' + #MIIMAGE + ' - ' + *PARTITION) )

Note: When using the file picker to select an image file, the newly selected image file displays in the dialog IconImage. But if you close the dialog, and then open the dialog again, it does not display the image?


Attempt #2 - direct link, did display an image, but would prefer to use the simplified naming from above.

Code: Select all

* Test direct link
* * * http://yourwebserver:yourport/xxxpgmlib/dem/images/contacts/abbot_morrow.png
#IconImage.IconFileName := ("https://www.servias.net/dcxpgmlib/sip/images/contacts/tobias_allen.jpg")

[Dino]

Hi

I am trying to extend your exsample. I want to add tiles to holde the Blob(PDF, images, excel etc) so the user can see the blob and then click on the blob and then opens the blob in a dialog for furthe work. But I cannot get the blob to my Tile RP. Do you have a god exsample?

Thanks
Klaus

Hi,
Something like this

tileandimages.jpg (219.76 KiB) Viewed 38190 times

so this web page reads the blob fields (employee image) from the file and pass it to the tile:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)
Define_Com Class(#PRIM_TILE<#test616t>) Name(#Tile) DisplayPosition(1) Left(24) Parent(#COM_OWNER) TabPosition(1) Top(24) Height(616) Width(841)

Evtroutine Handling(#Com_owner.Initialize)
Define_Com Class(#xEmployeeData.FindAll) Name(#ReadsImages)

#ReadsImages.ExecuteAsync xEmployeeList(#Tile)
Endroutine
End_Com

this will be tile (reusable part, web):

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_Tile.iTileDesign *ListFields #ListFields) DisplayPosition(1) Height(80) Left(0) TabPosition(1) Top(0) Width(160)
Group_By Name(#ListFields) Fields(#xEmployeeIdentification #xEmployeeImage #xEmployeeImageThumbnail)

Define_Com Class(#PRIM_PANL) Name(#ImagePanel) DisplayPosition(1) Height(40) Image(#xImageImage32) Left(0) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(0) Width(48) ImageAlignment(Stretch)
Define_Com Class(#PRIM_LABL) Name(#Title) Caption('Title') DisplayPosition(2) Ellipses(Word) Height(20) Left(48) MarginLeft(2) Parent(#COM_OWNER) TabPosition(2) TabStop(False) ThemeDrawStyle('Strong') Top(0) VerticalAlignment(Center) Width(112) WordWrap(False)
Define_Com Class(#PRIM_LABL) Name(#Caption1) Caption('Caption') DisplayPosition(3) Ellipses(Word) Height(20) Left(48) MarginLeft(2) Parent(#COM_OWNER) TabPosition(3) TabStop(False) Top(20) VerticalAlignment(Center) Width(112) WordWrap(False)

Mthroutine Name(OnAdd) Options(*REDEFINE)
#ImagePanel.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
#Title := #xEmployeeIdentification
#Caption1 := #xEmployeeImageThumbnail.MimeType
Endroutine
End_Com

and the server module is provided as part of lansa, but the routine in use is:

Code: Select all

Srvroutine Name(FindAll)
List_Map For(*OUTPUT) List(#xEmployeeList)
Select Fields(#xEmployeeList) From_File(xEmployee)
Fetch Fields(#xEmployeeList) From_File(xEmployeeImages) With_Key(#xEmployeeIdentification)
Add_Entry To_List(#xEmployeeList)
Endselect
Endroutine

[kno_dk]

Thanks.

I got this to work now.

One more thing left - when I read the blob file I got an uniq key for this blob. I have it in the list and I can show it in the tile. If the user click on the tile I would like to read that uniq key from the tile. I have tried a few things but I am not able to make it work. So, How do I do that?

/klaus

[Dino]

if you want to add for example a dialog, you can add a method that received the employee identification from the webpage and load all the details of the employee (in my case, just the image, but you can bring all other fields, etc.):

addingdialog.jpg (198.39 KiB) Viewed 38011 times

from my previous example, you could create a dialog like this one, with name test616dl:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_DLG) Height(393) Width(304)

Define_Com Class(#xEmployeeIdentification.EditField) Name(#xEmployeeIdentification) DisplayPosition(1) Left(14) Parent(#COM_OWNER) TabPosition(1) Top(27)
Define_Com Class(#PRIM_IMAG) Name(#Image) DisplayPosition(2) Image(#xImageImage32) ImageSizing(BestFit) Left(14) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(117) Height(252) Width(259)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button) DisplayPosition(3) Left(264) Parent(#COM_OWNER) TabPosition(3) ThemeDrawStyle('MediumError') Top(0) Icon('close') Width(36)

Group_By Name(#xEmployee) Fields(#xEmployeeIdentification #xEmployeeImage)

Mthroutine Name(Init)
Define_Map For(*INPUT) Class(#xEmployeeIdentification) Name(#EmployeeIdReceived)
Define_Com Class(#xEmployeeData.Find) Name(#FindEmployee)

#xEmployeeIdentification := #EmployeeIdReceived
#FindEmployee.ExecuteAsync xEmployeeIdentification(#EmployeeIdReceived) xEmployee(#xEmployee) Status(#IO$STS)

Evtroutine Handling(#FindEmployee.Completed)
#Image.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImage )
Endroutine
Endroutine
Evtroutine Handling(#Button.Click)
#COM_OWNER.Close
Endroutine
End_Com

then modify the webpage to end like this (note the action by doubleclick in the tile):

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)
Define_Com Class(#PRIM_TILE<#test616t>) Name(#Tile) DisplayPosition(1) Left(24) Parent(#COM_OWNER) TabPosition(1) Top(24) Height(616) Width(841)
Define_Com Class(#test616dl) Name(#test616dl)

Evtroutine Handling(#Com_owner.Initialize)
Define_Com Class(#xEmployeeData.FindAll) Name(#ReadsImages)

#ReadsImages.ExecuteAsync xEmployeeList(#Tile)
Endroutine

Evtroutine Handling(#Tile.ItemDoubleClick)
#test616dl.Init EmployeeIdReceived(#xEmployeeIdentification)
#test616dl.Show
Endroutine
End_Com

if you wonder about the pdf, i placed a pdf in the lansa installation folder, webserver/images/temp/ with the name of version15_supportedplatforms.pdf and changed the tile to include a pdf:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_Tile.iTileDesign *ListFields #ListFields) DisplayPosition(1) Height(217) Left(0) TabPosition(1) Top(0) Width(233)
Group_By Name(#ListFields) Fields(#xEmployeeIdentification #xEmployeeImage #xEmployeeImageThumbnail)

Define_Com Class(#PRIM_PANL) Name(#ImagePanel) DisplayPosition(2) Height(40) Image(#xImageImage32) Left(0) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Top(0) Width(48) ImageAlignment(Stretch)
Define_Com Class(#PRIM_LABL) Name(#Title) Caption('Title') DisplayPosition(3) Ellipses(Word) Height(20) Left(48) MarginLeft(2) Parent(#COM_OWNER) TabPosition(3) TabStop(False) ThemeDrawStyle('Strong') Top(0) VerticalAlignment(Center) Width(112) WordWrap(False)
Define_Com Class(#PRIM_LABL) Name(#Caption1) Caption('Caption') DisplayPosition(4) Ellipses(Word) Height(20) Left(48) MarginLeft(2) Parent(#COM_OWNER) TabPosition(4) TabStop(False) Top(20) VerticalAlignment(Center) Width(112) WordWrap(False)
Define_Com Class(#PRIM_WEB.Page) Name(#WebPage1) DisplayPosition(1) Height(152) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(48) Width(201) Left(8)

Mthroutine Name(OnAdd) Options(*REDEFINE)
#ImagePanel.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
#Title := #xEmployeeIdentification
#Caption1 := #xEmployeeImageThumbnail.MimeType
#WebPage1.Source := '/images/temp/version15_supportedplatforms.pdf'
Endroutine
End_Com