Get ready! An upgraded Experience League Community experience is coming in January.
SOLVED
Display recipient's received email details in table based on search criteria using WebApp in Adobe campaign classic
Hi Team,
We have WebApp requirement like a small search engine to display the received emails of the person, like Email, Contact Date, ID, Delivery label, Mirror Page Link with view option in a table.
Sample UI for this single page application.
I am trying to use webapp application from scratch but not getting starting point.
Can anyone help me on this use case.
Best Regards,
Santosh Kumar.
Topics
Topics help categorize Community content and increase your ability to discover relevant content.
1 Accepted Solution
Correct answer by
Hi @SorenDP ,
Thank you for your response.
I have built it using WebApp features in ACC.
Out Screens for reference:
Before Search when page Loaded:
After Enter some Inputs and Hits the Submit Button:
JS for Filter and fetch the Output columns,
var startDate = ctx.vars.startDate;
var endDate = ctx.vars.endDate;
var rcpId = ctx.vars.rcpId;
var email = ctx.vars.email;
var q = <queryDef schema="nms:broadLogRcp" operation="select">
<select>
<node expr="@id"/>
<node expr="@eventDate"/>
<node expr="[@recipient-id]" alias="drcpId"/>
<node expr="@address"/>
<node expr="[@delivery-id]" alias="dId"/>
<node expr="[delivery/@label]" alias="dLabel"/>
<node expr="@status" alias="status"/>
<node expr="[delivery/@deleteStatus]" alias="delDeleteStatus"/>
</select>
//Initial Condition
<where>
<condition expr={"[@recipient-id] = '"+rcpId+"'"}/>
<condition expr={"@address = '"+email+"'"}/>
<condition expr={ "DateOnly(@eventDate) >= #" + startDate + "#" }/>
<condition expr={ "DateOnly(@eventDate) <= #" + endDate + "#" }/>
</where>
<orderBy>
<node expr="@eventDate" sortDesc="true" />
</orderBy>
</queryDef>;
var deliveries = xtk.queryDef.create(q).ExecuteQuery();
// Build a plain JS array of rows
var rowsXml = deliveries.broadLogRcp;
var rows = [];
if (rowsXml && rowsXml.length() > 0) {
for each (var r in rowsXml) {
var broadLogId = Number(r.@id);
var deliveryId = Number(r.dId);
var status = Number(r.status);
var delDelSt = Number(r.delDeleteStatus); // 0 = not deleted [web:58]
var mirrorUrl = "";
var deliveryDeleted = false;
try {
// Only build mirror when delivery not deleted AND broadLog status = sent
if (delDelSt === 0 && status === 1) {
mirrorUrl = nms.delivery.GetMirrorURL(deliveryId, broadLogId.toString());
if (!mirrorUrl || mirrorUrl.length === 0) {
// treat as deleted/invalid mirror
deliveryDeleted = true;
}
} else if (delDelSt !== 0) {
// delivery marked deleted or recycled
deliveryDeleted = true;
}
} catch (e) {
logError("GetMirrorURL failed. deliveryId=" + deliveryId +
", broadLogId=" + broadLogId + ", error=" + e);
deliveryDeleted = true;
}
// --- tracking flags from nms:trackingLogRcp ---
var trRes = xtk.queryDef.create(
<queryDef schema="nms:trackingLogRcp" operation="select">
<select>
<node expr="@id"/>
<node expr="[url/@type]" alias="type"/>
</select>
<where>
<condition expr={ "[@broadLog-id] = " + broadLogId }/>
</where>
</queryDef>
).ExecuteQuery();
var opened = false;
var clicked = false;
if (trRes && trRes.trackingLogRcp) {
for each (var t in trRes.trackingLogRcp) {
var tType = String(t.type); // 1=click, 2=open in your instance
if (tType == "2") opened = true;
if (tType == "1") clicked = true;
}
}
// simple bounce flag example
var bounce = Number(r.status) != 1;
rows.push({
eventDate: r.@eventDate.toString(),
address: r.@address.toString(),
drcpId: r.drcpId.toString(),
dId: r.dId.toString(),
dLabel: r.dLabel.toString(),
mirrorUrl: mirrorUrl,
deliveryDeleted: deliveryDeleted,
status: status,
delDeleteStatus: delDelSt,
opened: opened,
clicked: clicked,
bounce: bounce
});
}
}
// Serialize to JSON and store as a string in ctx
var json = JSON.stringify(rows);
logInfo("JS rows JSON = " + json);
ctx.deliveriesJson = json;
Thnak you.
Hi! I've built a POC on this use case using purely JSSP instead. It takes url parameters as arguments, but I bet you could easily change that to use form input instead. Here's my code:
<%
response.setContentType("text/html;charset=utf-8");
var oldContext = logonEscalation("webapp");
//VARIABLES
var deliveryCode = ""; var authId = ""; var numOfExamples = ''; var error = 1; var email="";
//GET request parameters
// authId = request.getUTF8Parameter("id");
email = request.getUTF8Parameter("email");
numOfExamples = request.getUTF8Parameter("amount");
//empty email return -1
if (email === "") {
error = -1;
return -1;
}
if(numOfExamples === '' || parseInt(numOfExamples) > 20){
// Set default limit...
numOfExamples = '10';
}
if(numOfExamples != '' && parseInt(numOfExamples) < 20 && parseInt(numOfExamples) > 0){
// Add '' around the value...
// numOfExamples = "'"+numOfExamples+"'";
}
%>
<head>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #f2f2f2
}
th {
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<%
if (error >= 0) //no error
{
try
{
var query = xtk.queryDef.create(
<queryDef schema="nms:broadLogRcp" operation="select" lineCount={numOfExamples}>
<select>
<node expr="@id"/>
<node expr="@eventDate"/>
<node expr="@campaignName"/>
<node expr="[delivery/@id]"/>
<node expr="[delivery/@deliveryCode]"/>
</select>
<where>
<condition expr={"[recipient/@email]='"+email+"'"}/>
<condition expr="[delivery/@deliveryCode]!=''"/>
</where>
<orderBy>
<node expr="@eventDate" sortDesc="true"/>
</orderBy>
</queryDef>
)
var result = query.ExecuteQuery();
var examplesObject = [];
for each(var row in result){
var obj =
{
"name": row.delivery.@deliveryCode,
"eventDate": row.@eventDate,
"id": row.@id,
"url": nms.delivery.GetMirrorURL(row.delivery.@id, row.@id),
"campaign":row.@campaignName
};
examplesObject.push(obj);
}
%>
<h3>Viser seneste emails sendt til: <%=email%>.</h3>
<p>Links til mirror pages er kun gyldige i op til 60 dage...</p><br>
<h4>Email</h4>
/*<form action="">
<label for="email">Id</label><br>
<input type="text" id="authId" value="Xyz"><br><br>
<input type="submit" value="Submit">
</form>*/
<table>
<tr>
<th>Dato</th>
<th>Kampagne</th>
<th>Delivery Code</th>
<th>Mirror Page</th>
</tr>
<% for each(var row in examplesObject){
var eventDate = formatDate(row.eventDate, "%2D-%2M-%4Y %2H:%2N:%2S");%>
<tr>
<td>
<%=row.eventDate%>
</td>
<td>
<%=row.campaign%>
</td>
<td>
<%=row.name%>
</td>
<td><a href="<%=row.url%>">Link</a></td>
</tr>
<%
}
%>
</table>
<%
}
catch(e)
{
document.write(e);
document.write("-3");
return document.write(JSON.stringify({ status: 'KO', error: 'error: parameters null' }));
}
}
else {
document.write(error);
return error;
}
logonWithContext(oldContext);
%>
</body>And it looks like this:
Hope that helps 🙂
Correct answer by
Hi @SorenDP ,
Thank you for your response.
I have built it using WebApp features in ACC.
Out Screens for reference:
Before Search when page Loaded:
After Enter some Inputs and Hits the Submit Button:
JS for Filter and fetch the Output columns,
var startDate = ctx.vars.startDate;
var endDate = ctx.vars.endDate;
var rcpId = ctx.vars.rcpId;
var email = ctx.vars.email;
var q = <queryDef schema="nms:broadLogRcp" operation="select">
<select>
<node expr="@id"/>
<node expr="@eventDate"/>
<node expr="[@recipient-id]" alias="drcpId"/>
<node expr="@address"/>
<node expr="[@delivery-id]" alias="dId"/>
<node expr="[delivery/@label]" alias="dLabel"/>
<node expr="@status" alias="status"/>
<node expr="[delivery/@deleteStatus]" alias="delDeleteStatus"/>
</select>
//Initial Condition
<where>
<condition expr={"[@recipient-id] = '"+rcpId+"'"}/>
<condition expr={"@address = '"+email+"'"}/>
<condition expr={ "DateOnly(@eventDate) >= #" + startDate + "#" }/>
<condition expr={ "DateOnly(@eventDate) <= #" + endDate + "#" }/>
</where>
<orderBy>
<node expr="@eventDate" sortDesc="true" />
</orderBy>
</queryDef>;
var deliveries = xtk.queryDef.create(q).ExecuteQuery();
// Build a plain JS array of rows
var rowsXml = deliveries.broadLogRcp;
var rows = [];
if (rowsXml && rowsXml.length() > 0) {
for each (var r in rowsXml) {
var broadLogId = Number(r.@id);
var deliveryId = Number(r.dId);
var status = Number(r.status);
var delDelSt = Number(r.delDeleteStatus); // 0 = not deleted [web:58]
var mirrorUrl = "";
var deliveryDeleted = false;
try {
// Only build mirror when delivery not deleted AND broadLog status = sent
if (delDelSt === 0 && status === 1) {
mirrorUrl = nms.delivery.GetMirrorURL(deliveryId, broadLogId.toString());
if (!mirrorUrl || mirrorUrl.length === 0) {
// treat as deleted/invalid mirror
deliveryDeleted = true;
}
} else if (delDelSt !== 0) {
// delivery marked deleted or recycled
deliveryDeleted = true;
}
} catch (e) {
logError("GetMirrorURL failed. deliveryId=" + deliveryId +
", broadLogId=" + broadLogId + ", error=" + e);
deliveryDeleted = true;
}
// --- tracking flags from nms:trackingLogRcp ---
var trRes = xtk.queryDef.create(
<queryDef schema="nms:trackingLogRcp" operation="select">
<select>
<node expr="@id"/>
<node expr="[url/@type]" alias="type"/>
</select>
<where>
<condition expr={ "[@broadLog-id] = " + broadLogId }/>
</where>
</queryDef>
).ExecuteQuery();
var opened = false;
var clicked = false;
if (trRes && trRes.trackingLogRcp) {
for each (var t in trRes.trackingLogRcp) {
var tType = String(t.type); // 1=click, 2=open in your instance
if (tType == "2") opened = true;
if (tType == "1") clicked = true;
}
}
// simple bounce flag example
var bounce = Number(r.status) != 1;
rows.push({
eventDate: r.@eventDate.toString(),
address: r.@address.toString(),
drcpId: r.drcpId.toString(),
dId: r.dId.toString(),
dLabel: r.dLabel.toString(),
mirrorUrl: mirrorUrl,
deliveryDeleted: deliveryDeleted,
status: status,
delDeleteStatus: delDelSt,
opened: opened,
clicked: clicked,
bounce: bounce
});
}
}
// Serialize to JSON and store as a string in ctx
var json = JSON.stringify(rows);
logInfo("JS rows JSON = " + json);
ctx.deliveriesJson = json;
Thnak you.
Related Conversations
