linguist/samples/XPages/UnpMain.xsp

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom"
	xmlns:unp="http://unplugged.openntf.org">
	<xc:commonheader></xc:commonheader>
	<div id="main" class="container bootcards-container">
		<div class="row">

			<xp:div styleClass="bootcards-cards fullheightrow">
				<div class="col-xs-12 col-sm-12 col-md-6">
					<xc:UnpBootWorkspace title="Workspace"
						linkurlcol="UnpUrl" labelcol="Title" iconcol="ImgUrl"
						footertext="Built with Bootcards - Summary Card" badgecol="BadgeID"
						columndefinition="col-xs-6 col-md-6">
						<xc:this.workspaceview><![CDATA[#{javascript:"HomeLinks Home"}]]></xc:this.workspaceview>
					</xc:UnpBootWorkspace>
				</div>
				<div class="col-xs-12 col-sm-12 col-md-6">
					<div class="panel panel-default bootcards-chart">
						<div class="panel-heading">
							<h3 class="panel-title">
								Closed sales by team member - $000s
								(December)
							</h3>
						</div>
						<div class="">
							<div id="div2" class="chartpanelelement">
								<div id="pie1"></div>
							</div>
							<div class="panel-footer">
								<a href="" class="btn btn-default btn-block" onclick="toggleChartData(); return false;">
									<i class="fa fa-table"></i>
									&#160;Show Data
								</a>
							</div>
						</div>
						<div class="panel-footer">
							<small class="pull-left">
								Built with Bootcards - Chart Card
							</small>
						</div>
					</div>
					<div class="panel panel-default bootcards-table" style="display: none;">
						<div class="panel-heading">
							<h3 class="panel-title">
								Closed sales by team member - $000s
								(December)
							</h3>
						</div>
						<table class="table table-hover">
							<thead>
								<tr class="active">
									<th>Name</th>
									<th class="text-right">
										Sales Value
									</th>
								</tr>
							</thead>
							<tbody></tbody>
						</table>
						<div class="panel-footer">
							<a href="" class="btn btn-default btn-block" onclick="toggleChartData(); return false;">
								<i class="fa fa-bar-chart-o"></i>
								&#160;Show Chart
							</a>
						</div>
						<div class="panel-footer">
							<div class="panel-footer">
								<small class="pull-left">
									Built with Bootcards - Chart Card
								</small>
							</div>
						</div>
					</div>
				</div>
			</xp:div>
		</div>
	</div>

	<script src="unp/raphael.min.js" type="text/javascript"></script>
	<script src="unp/morris.min.js" type="text/javascript"></script>

	<xc:commonfooter></xc:commonfooter>
</xp:view>