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 { get; set; }
 
	public abstract class imageUrl : IBqlField
	{
	}
 
	[PXString(IsKey = true)]
	public virtual string ImageUrl { get; set; }
 
	public abstract class iD2 : IBqlField
	{
	}
 
	[PXInt(IsKey = true)]
	public virtual int? ID2 { get; set; }
 
	public abstract class imageUrl2 : IBqlField
	{
	}
 
	[PXString(IsKey = true)]
	public virtual string ImageUrl2 { get; set; }
 
}

Then on page so301000, following staff was added:

<style>
    img {
        height: 100px;
        width: 100px;
        resize: both;
    }
</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.