Expand my Community achievements bar.

Get ready! An upgraded Experience League Community experience is coming in January.

Display recipient's received email details in table based on search criteria using WebApp in Adobe campaign classic

Avatar

Level 2

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.

 

SantoshKa5_0-1765803532605.png

 

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 Reply

Avatar

Level 5

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: 

SorenDP_0-1765967493332.png

 

Hope that helps 🙂