How to show images inside selector lookup?

Question

What is the best way to show images alongside with other columns inside Inventory ID selector lookup on the Sales Orders screen:

Answer 1

PXGridColumn with the Type property set to Icon is used to show images inside PXGrid containers:

<px:PXGridColumn DataField="ImageUrl" Width="300px" Type="Icon" />

Such column is capable of showing images from 2 sources:

1. Sprites

   row.ImageUrl = string.IsNullOrEmpty(row.ImageUrl) ? "main@Fail" : "main@Success";
   

   

2. URLs:

   row.ImageUrl = @"http://www.acumatica.asia/acumaticawwwsite-acumaticainc.netdna-ssl.com/wp-content/uploads/2014/09/acumatica-2.png";
   

   

To add a column of the Icon type in the Inventory ID selector lookup, one should:

1. Declare an extension class for the SOLine DAC and extend the list of columns for Inventory ID selector:

   [PXNonInstantiatedExtension]
   public class SO_SOLine_ExistingColumn : PXCacheExtension<PX.Objects.SO.SOLine>
   {
       #region InventoryID 
       [PXMergeAttributes(Method = MergeMethod.Append)]
       [PXCustomizeSelectorColumns(
           typeof(PX.Objects.IN.InventoryItem.inventoryCD),
           typeof(PX.Objects.IN.InventoryItem.descr),
           typeof(PX.Objects.IN.InventoryItem.itemClassID),
           typeof(PX.Objects.IN.InventoryItem.itemStatus),
           typeof(PX.Objects.IN.InventoryItem.itemType),
           typeof(PX.Objects.IN.InventoryItem.baseUnit),
           typeof(PX.Objects.IN.InventoryItem.salesUnit),
           typeof(PX.Objects.IN.InventoryItem.purchaseUnit),
           typeof(PX.Objects.IN.InventoryItem.basePrice),
           typeof(PX.Objects.IN.InventoryItem.imageUrl))]
       public int? InventoryID { get; set; }
       #endregion
   }
   

2. For the new column, set Type property value to Icon:

   <px:PXSegmentMask ID="edInventoryID" runat="server" DataField="InventoryID">
       <GridProperties>
           <Columns>
               <px:PXGridColumn DataField="ImageUrl" Type="Icon" Width="300px" AutoGenerateOption="Add" />
           </Columns>
       </GridProperties>
   </px:PXSegmentMask>
   

However this doesn't seem enough to show images attached to inventory items in selector lookup. Our next steps are to define an unbound custom field for the InventoryItem DAC and populate it with valid URLs to display attached images.

Please notice, the sample below will likely result in significant performance degradation. In real life scenario, you must use reduced-size versions of pictures (thumbnails) and store URLs to access them through a custom database bound field inside Acumatica database.

1. Implement an extension class for the InventoryItem DAC and declare an unbound ThumbnailURL field to store URLs for attached images:

   public class InventoryItemExt : PXCacheExtension<InventoryItem>
   {
       public abstract class thumbnailURL : IBqlField
       { }
       [PXString]
       public string ThumbnailURL { get; set; }
   }
   

2. In the SOOrderEntry BLC extension, subscribe to RowSelecting handler and populate unbound ThumbnailURL field with valid URLs to display attached images:

   public class SOOrderEntryExt : PXGraphExtension<SOOrderEntry>
   {
       public override void Initialize()
       {
           Base.RowSelecting.AddHandler<InventoryItem>(InventoryItemRowSelecting);
       }
   
       public void InventoryItemRowSelecting(PXCache sender, PXRowSelectingEventArgs e)
       {
           var row = e.Row as InventoryItem;
           if (row != null && !string.IsNullOrEmpty(row.ImageUrl))
           {
               Guid[] files = PXNoteAttribute.GetFileNotes(sender, e.Row);
               var fm = PXGraph.CreateInstance<PX.SM.UploadFileMaintenance>();
               foreach (Guid fileID in files)
               {
                   PX.SM.FileInfo fi = fm.GetFileWithNoData(fileID);
                   if (fi.FullName == row.ImageUrl || fi.Name == row.ImageUrl)
                   {
                       row.GetExtension<InventoryItemExt>().ThumbnailURL = 
                           ControlHelper.GetAttachedFileUrl(null, fileID.ToString());
                       break;
                   }
               }
           }
       }
   }
   

3. Set Type property for the ThumbnailURL column to Icon:

   <px:PXSegmentMask CommitChanges="True" ID="edInventoryID" runat="server" DataField="InventoryID" AllowEdit="True" >
       <GridProperties>
           <Columns>
               <px:PXGridColumn DataField="ThumbnailURL" Width="300px" AutoGenerateOption="Add" Type="Icon" />
           </Columns>
       </GridProperties>
   </px:PXSegmentMask>