How to display images inside selector search?

Question

What is the best way to show images along with other columns inside the search for the resource identifier selector on the Orders screen:

Answer 1

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

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

Such a column is capable of displaying images from two sources:

• Sprites

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

  

• address:

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

  

To add an Icon column to the inventory ID selector search, you must:

• Declare an extension class for SOLine DAC and expand the column list for the inventory identifier 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 } 

• For the new column, set the value of the Type property 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 is not enough to display images attached to inventory items in search of a selector. Our next steps are to identify an unrelated custom field for the InventoryItem DAC and populate it with valid URLs to display the attached images.

Please note: the example below is likely to result in a significant decrease in performance. In a real-life scenario, you should use thumbnails of images (thumbnails) and save the URLs to access them through a custom database border field inside the Acumatica database.

• Deploy the InventoryItem DAC extension class and declare an unrelated ThumbnailURL field to store the URLs for the attached images:

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

• In the BOO SOOrderEntry extension, subscribe to the RowSelecting handler and fill in the unused ThumbnailURL field with valid URLs to display the 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; } } } } } 

• Set the Type property for the ThumbnailURL column for 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>