Skip to content

Instantly share code, notes, and snippets.

@floriancgit

floriancgit/page1-list.html

Created March 7, 2019 18:11
Show Gist options
  • Save floriancgit/3e67f996ce2552fb46ad479922f9a83e to your computer and use it in GitHub Desktop.
Save floriancgit/3e67f996ce2552fb46ad479922f9a83e to your computer and use it in GitHub Desktop.
Download ZIP
HTML files for /2018/07/use-the-context-in-web-apps-in-adobe-campaign/
Raw
page1-list.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<title>Starter Template · Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body style="" class="">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"><a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" id="input155197075600849" aria-expanded="false" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation" type="button" data-target="#navbarsExampleDefault" data-toggle="collapse"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item nav-link">Bootstrap 4 starter template</li>
</ul>
</div>
</nav><main class="container mt-5 pt-3" role="main"><form method="post" name="page" id="page-form">
<table class="table table-bordered table-hover table-striped table-sm">
<thead>
<tr><th>@firstName</th><th>@lastName</th><th>@email</th><th>Actions</th></tr>
</thead>
<tbody><% for each(var recipient in ctx.queryRecipients.recipient){ %>
<tr>
<td><%= recipient.@firstName %></td>
<td><%= recipient.@lastName %></td>
<td><%= recipient.@email %></td>
<td><a class="btn btn-sm btn-primary" onclick="
document.controller.setValue('/ctx/vars/recipientId', <%= recipient.@id %>);
document.controller.submit('next', '_self', 'transition1');"
href="#"> Show</a></td>
</tr>
<% } %></tbody>
</table>
</form></main><!-- /.container -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Raw
page2-show.html
<% var r = ctx.queryShowRecipient.recipient; %>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Starter Template · Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body style="" class="">
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top"><a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" id="input155197075600849" aria-expanded="false" aria-controls="navbarsExampleDefault" aria-label="Toggle navigation" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"> <span class="navbar-toggler-icon"></span> </button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item nav-link">Bootstrap 4 starter template</li>
</ul>
</div>
</nav><main class="container mt-5 pt-3"><form name="page" id="page-form" method="post">
<h1>Show recipient</h1>
<div class="row">
<div class="col-md-4">
<div class="profile-img"><img class="nlui-widget" style="width: 100px;" src="/xtk/img/operator-large.png" unselectable="on" /></div>
</div>
<div class="col-md-6">
<div class="profile-head">
<h5><%= r.@firstName %> <%= r.@lastName %></h5>
<h6><%= r.@email %></h6>
<p class="proile-rating">RANKINGS : <span>8/10</span></p>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item"><a class="nav-link active" id="home-tab" role="tab" aria-selected="true" aria-controls="home" href="#home" data-toggle="tab">About</a></li>
<li class="nav-item"><a class="nav-link" id="profile-tab" role="tab" aria-selected="false" aria-controls="profile" href="#profile" data-toggle="tab">Timeline</a></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="profile-work">
<p>Address</p>
<%= r.location.@address1 %> <%= r.location.@address2 %><br /> <%= r.location.@address3 %> <%= r.location.@address4 %><br /> <%= r.location.@city %>, <%= r.location.@zipCode %> <%= r.location.@state %></div>
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
<div class="row">
<div class="col-md-6"><label>Account #</label></div>
<div class="col-md-6">
<p><%= r.@account%></p>
</div>
</div>
<div class="row">
<div class="col-md-6"><label>Name</label></div>
<div class="col-md-6">
<p><%= r.@firstName %> <%= r.@lastName %></p>
</div>
</div>
<div class="row">
<div class="col-md-6"><label>Email</label></div>
<div class="col-md-6">
<p><%= r.@email %></p>
</div>
</div>
<div class="row">
<div class="col-md-6"><label>Language</label></div>
<div class="col-md-6">
<p><%= r.@language %></p>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="row">
<div class="col-md-6"><label>Experience</label></div>
<div class="col-md-6">
<p>Expert</p>
</div>
</div>
</div>
</div>
</div>
<input class="btn btn-outline-primary btn-sm" id="input155198202521318" onclick="return document.controller.submit('previous');" type="button" value="&laquo; Previous" /></div>
</form></main>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment