Filepicker in the list

[MegumiSawada]

Hi All,

Is there any way to invoke #PRIM_WEB.filepicker to select an image file from each row of the list on the web page?

I have tried to imprement it, but I cannot use filepicker in the list.
What I can think of as a workaround is as follows:
1) put a push button on each rows of list
2) when these buttons are clicked, show pop-up. In the pop-up there is a filepicker (#PRIM_WEB.Filepicker) so you can select an image file
3) Close pop-up and return BLOB value to the list

Is there any better way to use filepicker along with a list to upload BLOB?

img1.png (25.48 KiB) Viewed 16593 times

Best Regards,
Megumi Sawada

[Dino]

Hi Megumi

My vote is to use tiles. You will have more control over the design and elements on each tile/row.

tileandupload.jpg (145.67 KiB) Viewed 16582 times

so for this, for example a web page like this one:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#PRIM_TILE<#test712tl>) Name(#Tile1) DisplayPosition(1) Left(40) Parent(#COM_OWNER) TabPosition(1) Top(30) Width(729) Height(563)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button) Caption('SAVE CHANGES') DisplayPosition(2) Left(792) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('MediumSuccess') Top(16) Width(129)

Evtroutine Handling(#Com_owner.Initialize)
Define_Com Class(#xEmployeeData.FindAll) Name(#FindAll)
#FindAll.ExecuteAsync xEmployeeList(#Tile1)
Endroutine
Evtroutine Handling(#Button.Click)
Selectlist Named(#Tile1) Where(#STD_FLAG = "Y")
* Save image for #xEmployeeIdentification #xEmployeeImageThumbnail, etc.
Endselect
Endroutine
End_Com

and a tile (reusable part/object) like this:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_Tile.iTileDesign *ListFields #ListFields) DisplayPosition(1) Height(73) Left(0) TabPosition(1) Top(0) Width(609)

Define_Com Class(#PRIM_IMAG) Name(#ImageinTile) DisplayPosition(1) Image(#xImageImage32) ImageSizing(BestFit) Left(0) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(0) Height(73) Width(89)
Define_Com Class(#PRIM_MD.FilePicker) Name(#FilePicker) Caption('Select an Image') DisplayPosition(2) Left(440) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('MediumTitle') Top(24) Width(153)
Define_Com Class(#PRIM_MD.Label) Name(#TextID) Caption('Employee ID') DisplayPosition(3) Left(106) Parent(#COM_OWNER) TabPosition(3) Top(20)
Define_Com Class(#PRIM_MD.Label) Name(#TextSURNAME) Caption('Employee Surname') DisplayPosition(4) Left(224) Parent(#COM_OWNER) TabPosition(4) Top(20) Width(150)

Group_By Name(#ListFields) Fields(#xEmployeeIdentification #xEmployeeSurname #xEmployeeImageThumbnail #STD_FLAG)

Mthroutine Name(OnAdd) Options(*REDEFINE)

#TextID := #xEmployeeIdentification
#TextSURNAME := #xEmployeeSurname
#ImageinTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
#STD_FLAG := "N"
Endroutine

Evtroutine Handling(#FilePicker.FileSelected) File(#STD_BLOB)
#xEmployeeImageThumbnail := #STD_BLOB.Blob
#ImageinTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
#STD_FLAG := "Y"
Endroutine

End_Com

note that to keep this example simple, I used a flag to let the web page know that an entry has changed.
But if you go full tiles, review the use of references, events, data models, etc. (look in the repository for reusable parts that contain #PRIM_TILE)

Kind regards

[Dino]

saying so.... i just remember that in the same way you have tiledesign... you have celldesign. and that reusable parts can be used as part of a list, so you can get to this with a list as well.

celldesign.jpg (136.97 KiB) Viewed 16579 times

so a web page like this:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#PRIM_LIST) Name(#List) ColumnHeaderHeight(48) ColumnLines(False) DisplayPosition(1) Height(444) Left(83) Parent(#COM_OWNER) RowHeight(48) TabPosition(1) Top(61) Width(790)
Define_Com Class(#PRIM_LIST.Part) Name(#ListColumn1) ColumnWidth(235) Design(#test713cd) DisplayPosition(1) Parent(#List)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn2) ColumnWidth(102) DisplayPosition(2) Parent(#List) SortOnClick(True) Source(#xEmployeeIdentification)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn3) ColumnWidth(250) DisplayPosition(3) Parent(#List) SortOnClick(True) Source(#xEmployeeSurname)

Evtroutine Handling(#Com_owner.Initialize)
Define_Com Class(#xEmployeeData.FindAll) Name(#FindAll)
#FindAll.ExecuteAsync xEmployeeList(#List)
Endroutine
End_Com

using a reusable part (#test713cd) like this:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_List.iListCellDesign *ListFields #ListFields) DisplayPosition(1) Height(49) Left(0) TabPosition(1) Top(0) Width(185)

Define_Com Class(#PRIM_IMAG) Name(#ImageInTile) DisplayPosition(1) Image(#xImageImage32) ImageSizing(BestFit) Left(0) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(0)
Define_Com Class(#PRIM_MD.FilePicker) Name(#FilePicker) Caption('Change Image') DisplayPosition(2) Left(56) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('MediumTitle') Top(8) Width(119)

Group_By Name(#ListFields) Fields(#xEmployeeImageThumbnail)

Mthroutine Name(OnAdd) Options(*REDEFINE)
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
Endroutine

Evtroutine Handling(#FilePicker.FileSelected) File(#STD_BLOB)
#xEmployeeImageThumbnail := #STD_BLOB.Blob
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
Endroutine
End_Com

will do the same thing.

[MegumiSawada]

Hi Dino,

Thank you!!
I'll try these.

Best Regards,
Megumi Sawada

[MegumiSawada]

Hi,

I have successfully impremented the reusable parts in the list to file pick!
However, I would like to set BLOB value to other field in the list as well.
(I would like to upd_entry the same row of the list which file selected with the BLOB value.)

Is it possible to do so?
I think I should use parameters or properties to do so, but cannot think of how to do it
I appreciate your kind advice.

Best Regards,
Megumi Sawada

[Dino]

Hi

Something like this? (basically, added a OnUpdate routine in the reusable part, and a button to copy from one field to another)

thumbtoimagecelldesign.jpg (260.56 KiB) Viewed 16445 times

Web Page:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#PRIM_LIST) Name(#List) ColumnHeaderHeight(48) ColumnLines(False) DisplayPosition(1) Height(481) Left(16) Parent(#COM_OWNER) RowHeight(48) TabPosition(1) Top(16) Width(1161)
Define_Com Class(#PRIM_LIST.Part) Name(#ListColumn1) ColumnWidth(235) Design(#test713cd) DisplayPosition(1) Parent(#List) ColumnCaption('Thumb')

Define_Com Class(#PRIM_LIST.String) Name(#ListColumn3) ColumnWidth(102) DisplayPosition(2) Parent(#List) SortOnClick(True) Source(#xEmployeeIdentification)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn4) ColumnWidth(155) DisplayPosition(5) Parent(#List) SortOnClick(True) Source(#xEmployeeSurname)
Define_Com Class(#PRIM_LIST.String) Name(#ListColumn5) ColumnWidth(151) DisplayPosition(4) Parent(#List) SortOnClick(True) Source(#xEmployeeGivenNames)
Define_Com Class(#PRIM_LIST.Part) Name(#ListColumn2) ColumnWidth(207) Design(#test713cd2) DisplayPosition(6) Parent(#List) ColumnCaption('Image')
Define_Com Class(#PRIM_LIST.Button) Name(#ListColumn6) Caption('Thumb ==> Image') CellHeight(36) CellSizing(None) CellThemeDrawStyle('DarkSuccess') CellWidth(150) DisplayPosition(3) Parent(#List) ColumnWidth(200)

Evtroutine Handling(#Com_owner.Initialize)
#COM_OWNER.Load
Endroutine
Mthroutine Name(Load)
Define_Com Class(#xEmployeeData.FindAll) Name(#FindAll)
#FindAll.ExecuteAsync xEmployeeList(#List)
Evtroutine Handling(#FindAll.Completed)
Endroutine
Endroutine
Evtroutine Handling(#ListColumn6.Click)
#xEmployeeImage := #xEmployeeImageThumbnail
Upd_Entry
Endroutine
End_Com

changes to the original test713cd reusable part:

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_List.iListCellDesign *ListFields #ListFields) DisplayPosition(1) Height(49) Left(0) TabPosition(1) Top(0) Width(185)

Define_Com Class(#PRIM_IMAG) Name(#ImageInTile) DisplayPosition(1) Image(#xImageImage32) ImageSizing(BestFit) Left(0) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(0)
Define_Com Class(#PRIM_MD.FilePicker) Name(#FilePicker) Caption('Change Image') DisplayPosition(2) Left(56) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('MediumTitle') Top(8) Width(119)

Group_By Name(#ListFields) Fields(#xEmployeeImageThumbnail)

Define_Evt Name(ColumnClick)
Define_Map For(*INPUT) Class(#std_num) Name(#Item)

Mthroutine Name(OnAdd) Options(*REDEFINE)
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
#FilePicker.Caption := "Change Image " + #ListItem.Entry.AsString
Endroutine

Mthroutine Name(OnUpdate) Options(*REDEFINE)
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
#FilePicker.Caption := "UPDATED Image " + #ListItem.Entry.AsString
Endroutine

Evtroutine Handling(#FilePicker.FileSelected) File(#STD_BLOB)
#xEmployeeImageThumbnail := #STD_BLOB.Blob
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImageThumbnail )
Endroutine
End_Com

new reusable part test713cd2 (copy of cd1 basically but using another image, #xEmployeeImage... just note that the server module is not populating that field, so you won't see an image there initially. (if you want that you need to create your own server module to include that field as well).

Code: Select all

Function Options(*DIRECT)
Begin_Com Role(*EXTENDS #PRIM_PANL *implements #Prim_List.iListCellDesign *ListFields #ListFields) DisplayPosition(1) Height(49) Left(0) TabPosition(1) Top(0) Width(185)

Define_Com Class(#PRIM_IMAG) Name(#ImageInTile) DisplayPosition(1) Image(#xImageImage32) ImageSizing(BestFit) Left(0) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(0)
Define_Com Class(#PRIM_MD.FilePicker) Name(#FilePicker) Caption('Change Image') DisplayPosition(2) Left(56) Parent(#COM_OWNER) TabPosition(2) ThemeDrawStyle('MediumTitle') Top(8) Width(119)

Group_By Name(#ListFields) Fields(#xEmployeeImage)

Mthroutine Name(OnAdd) Options(*REDEFINE)
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImage )
#FilePicker.Caption := "Change Image " + #ListItem.Entry.AsString
Endroutine
Mthroutine Name(OnUpdate) Options(*REDEFINE)
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImage )
#FilePicker.Caption := "UPDATED Image " + #ListItem.Entry.AsString
Endroutine
Evtroutine Handling(#FilePicker.FileSelected) File(#STD_BLOB)
#xEmployeeImage := #STD_BLOB.Blob
#ImageInTile.Image <= #SYS_APPLN.CreateBitmap( #xEmployeeImage )
Endroutine
End_Com

[MegumiSawada]

Hi Dino,

Thank you for your reply.
Based on your advice and sample, I have succeeded in implementing what I desire.
Thank you!

Best Regards,
Megumi Sawada