How to display images in grid of Acumatica

Hello everybody,

today I want to leave a short post on how to display images in grid of Acumatica. 

I'll demonstrate it on sample of Sales Orders pages, which is known as SO301000.

End result will look like this:

 

In order to make it work, I've done the following:

  1. Created extension to SOOrderEntry and added there some kind of reading of url images
  2. Created DAC class for demo purposes
  3. Added few controls and css/js on customized so301000 page.

Now a bit more details. For SOOrderEntry I've created following extension:

    public class SOOrderEntryExt : PXGraphExtension<SOOrderEntry>
    {
	    public PXSelect<SOImageItem> Images;
 
	    protected virtual IEnumerable images()
	    {
		    var result = new List<SOImageItem>();
			result.Add(new SOImageItem()
			{
				ID = 1,
				ImageUrl = "https://img.grouponcdn.com/deal/074cef17e1fc40c69e309870fcfbc8d7/d7/v1/c700x420.jpg",
				ID2 = 2,
				ImageUrl2 = "https://cdn1.shoebacca.com/catalog/product/P/K/PK54467_1l.jpg?quality=80&bg-color=255,255,255&fit=bounds&height=&width="
			});
 
		    
		    result.Add(new SOImageItem()
		    {
			    ID = 3,
			    ImageUrl = "https://cdn1.shoebacca.com/catalog/product/P/K/PK54467_2l.jpg?quality=80&bg-color=255,255,255&fit=bounds&height=&width=",
			    ID2 = 4,
			    ImageUrl2 = "https://cdn1.shoebacca.com/catalog/product/P/K/PK54467_4l.jpg?quality=80&bg-color=255,255,255&fit=bounds&height=&width="
			});
 
		    result.Add(new SOImageItem()
		    {
			    ID = 5,
			    ImageUrl = "https://cdn1.shoebacca.com/catalog/product/P/K/PK54467_6l.jpg?quality=80&bg-color=255,255,255&fit=bounds&height=&width=",
			    ID2 = 6,
			    ImageUrl2 = "https://cdn1.shoebacca.com/catalog/product/P/K/PK54477_1l.jpg?quality=80&bg-color=255,255,255&fit=bounds&height=&width="
			});
		    
		    result.Add(new SOImageItem()
		    {
			    ID = 7,
			    ImageUrl = "https://cdn1.shoebacca.com/catalog/product/P/K/PK54477_2l.jpg?quality=80&bg-color=255,255,255&fit=bounds&height=&width=",
				ID2 = null,
				ImageUrl2 = null
			});
 
			return result;
	    }
    }

and following DAC class:

[Serializable]
public class SOImageItem : IBqlTable
{
	public abstract class iD : IBqlField
	{
	}
 
	[PXInt(IsKey = true)]
	public virtual int? ID { getset; }
 
	public abstract class imageUrl : IBqlField
	{
	}
 
	[PXString(IsKey = true)]
	public virtual string ImageUrl { getset; }
 
	public abstract class iD2 : IBqlField
	{
	}
 
	[PXInt(IsKey = true)]
	public virtual int? ID2 { getset; }
 
	public abstract class imageUrl2 : IBqlField
	{
	}
 
	[PXString(IsKey = true)]
	public virtual string ImageUrl2 { getset; }
 
}

Then on page so301000, following staff was added:

<style>
    img {
        height100px;
        width100px;
        resizeboth;
    }
</style>

And final piece tab:

	<px:PXTabItem Visible="True" Text="Images"  BindingContext="form">
		<Template>
			<px:PXGrid runat="server" ID="grdImages" Width="100%" DataSourceID="ds">
				<Levels>
					<px:PXGridLevel DataMember="Images">
						<RowTemplate>
						    <px:PXNumberEdit runat="server" ID="CstPXNumberEdit5" DataField="ID"  Width="100"/>
							<px:PXTextEdit runat="server" ID="CstPXTextEdit4" DataField="ImageUrl"  />
                            
						    <px:PXNumberEdit runat="server" ID="PXNumberEdit2" DataField="ID2"  Width="100"/>
						    <px:PXTextEdit runat="server" ID="PXTextEdit1" DataField="ImageUrl2"  />
							
						</RowTemplate>
                        <Columns>
                            <px:PXGridColumn DataField="ID" Width="100" />
                            <px:PXGridColumn DataField="ImageUrl" Type="Icon" Width="350"   />
                            
                            <px:PXGridColumn DataField="ID2" Width="100" />
                            <px:PXGridColumn DataField="ImageUrl2" Type="Icon" Width="350"   />
                        </Columns>
					</px:PXGridLevel>
                </Levels>
			</px:PXGrid></Template></px:PXTabItem></Items>
        <CallbackCommands>
            <Search CommitChanges="True" PostData="Page" ></Search>
            <Refresh CommitChanges="True" PostData="Page" ></Refresh>
            <Refresh CommitChanges="True" PostData="Page" ></Refresh>
            <Search CommitChanges="True" PostData="Page" ></Search>
        </CallbackCommands>
        <AutoSize Enabled="True" Container="Window" ></AutoSize>
    </px:PXTab>

After that I was able to see result, that is shown on the screenshot of begining of the article.

 

Inventory items images structure in Acumatica

Hello everybody,

today I want to document some information about how images for inventory items are stored in Acumatica. 

Database structure (Acumatica)

InventoryItem - A table that contains all InventoryItem data

> ImageURL - A data field where the image file name being saved.

 

UploadFile - A table that contains attachments data

> Name - A data field where you can use to join with InventoryItem using InventoryItem.ImageURL = UploadFile.Name

 

NoteDoc - A table that contains all NoteDoc data

> FileID - A data field unique ID where you can use to join with UploadFile using UploadFile.FileID = NoteDoc.FileID

 

A SQL query that get data necessary to create the imageExternalLink some like this.

SELECT InventoryItem.InventoryCD, InventoryItem.imageUrl, UploadFile.Name, NoteDoc.FileId, * FROM InventoryItem
LEFT JOIN UploadFile ON InventoryItem.imageUrl = UploadFile.Name
LEFT JOIN NoteDoc ON UploadFile.FileID = NoteDoc.FileID where imageurl is not null

 

#2 Business Logic to create the imageExternalLink

Concatenate  “https://yourAcumatica.acumatica.com/Frames/GetFile.ashx?fileID=” with data filed [NoteDoc.FileID]

 

ImageURL:  https://yourAcumatica.acumatica.com/Frames/GetFile.ashx?fileID=3FFC1E8F-63B3-448A-A5C2-501499B9257A

 

You will not be able to see those pictures unless you are logged in into Acumatica.