Skip to main content

Hey Acumatica Community,

Is there a way to create a table in a Notification that displays the articles within an order along with their corresponding ImageUrls?

I've tried the following html code, which generates the article list, but I can't get the actual images to display. Any suggestions?

 

            <div class="article-list">
<h3 class="highlight">Artikelübersicht:</h3>
<ul>
<li data-foreach-view="Transactions">
<span>((Transactions.InventoryID))</span>
<span><img src="((Transactions.InventoryID.ImageUrl))" style="width: 100px; height: auto;"></span>
<span>((Transactions.OrderQty)) ((Transactions.UOM))</span>
</li>
</ul>
</div>

 

@jwestermann17  Have you tried with the HTML code (<table>, <tr>, <td> and <ImageUrl>) and verify?

Sample HTML code and Its result.

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Description</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Switch it up</h1>
<p>
Test Paragraph here
</p>
<table>
<tr>
<th>Feature</th>
<th>Details</th>
</tr>
<tr>
<td>Image</td>
<td><img src="https://play-lh.googleusercontent.com/R2f0wEbrGDdEuECuO-VX6FdM749eRyYXt3neh106Ij3M1jNalfnwWUwkF96EP0Ql8Q=w480-h960-rw" alt="Acer Aspire Switch 11" width="200"></td>
</tr>
<tr>
<td>Display</td>
<td>11.6-inch Full HD touchscreen</td>
</tr>
<tr>
<td>Processor</td>
<td>Intel Core i3-4012Y</td>
</tr>
<tr>
<td>Memory/Storage</td>
<td>4GB memory / 128GB SSD</td>
</tr>
<tr>
<td>Battery Life</td>
<td>Up to 6.5 hours at 25&#176;C</td>
</tr>
</table>
</body>
</html>

 

 

 

 


Hi @Naveen Boga, thanks for the reply.

Getting fixed Image URLs to show in my HTML is not the problem I am facing. I'd like to rather display the image I've attached to my Article. Since we are able to upload product images to articles I've tried to reference to the Inventory item.ImageUrl but wasn't able to display a working image preview yet. 

 


Hi @jwestermann17 

InventoryItem.ImageUrl contains only name of the attached image that should be used as an associated image.  

You can get the full url that you can paste as src parameter using ControlHelper.GetAttachedFileUrl.  

I’d suggest trying to add a new unbound field in the customization and try to use it inside your notification.

Here’s an example:

using PX.Data;
using PX.Data.BQL;
using PX.Objects.IN;
using PX.SM;
using PX.Web.UI;
using System;
using System.ComponentModel;
using System.Web;

namespace FullImageUrl
{
// Acuminator disable once PX1016 ExtensionDoesNotDeclareIsActiveMethod extension should be constantly active
public sealed class InventoryItemExt : PXCacheExtension<InventoryItem>
{
bPXString]
bDisplayName("Full Image Url")]
public string UsrTIImageUrl { get; set; }
public abstract class usrTIImageUrl : BqlString.Field<usrTIImageUrl> { }

bPXString]
bDisplayName("Test")]
public string UsrTITestString { get { return HttpContext.Current.Request.Url.Host; } }
public abstract class usrTITestString : BqlString.Field<usrTITestString> { }
}

// Acuminator disable once PX1016 ExtensionDoesNotDeclareIsActiveMethod extension should be constantly active
public class InventoryItemMaintExt : PXGraphExtension<InventoryItemMaint>
{
public void _(Events.RowSelecting<InventoryItem> e)
{
if (!(e.Row is InventoryItem row) || string.IsNullOrEmpty(row.ImageUrl)) return;

var fileNoteIds = PXNoteAttribute.GetFileNotes(e.Cache, e.Row);
var fileGraph = PXGraph.CreateInstance<UploadFileMaintenance>();

foreach (Guid fileNoteId in fileNoteIds)
{
var fileInfo = fileGraph.GetFileWithNoData(fileNoteId);
if (fileInfo.FullName != row.ImageUrl && fileInfo.Name != row.ImageUrl)
continue;

var itemExt = row.GetExtension<InventoryItemExt>();
var imageUrl = ControlHelper.GetAttachedFileUrl(null, fileNoteId.ToString());
itemExt.UsrTIImageUrl = imageUrl;
break;
}
}
}
}

You can also add PXTrace.WriteInformation(imageUrl); to check the value set into the new field.  

 

If you need more than one picture added to the Notification or the example above didn’t give you desired result - I’d also suggest looking into programmatically creating the notification:

var accountId = PX.Data.EP.MailAccountManager.DefaultSystemMailAccountID;
var mailTo = "recipient@test.com"; // replace with your way of getting recipient
var mailSubject = "Your subject";
var mailBody = GenerateBody(); // create desired notification in this method
PX.Data.EP.NotificationSenderProvider.Notify(accountId, mailTo, null, null, mailSubject, mailBody);

 


Reply