Important KPI Widget
Admin: Web Office Admin
Page: Code Customization > Custom Widgets
URL: {client_ID}.admin.directscale.com/#/Widgets
Display an important data point (KPI) in a widget for emphasis.
The following code will help you create a similar custom widget:
<div class="card minheight">
<!-- Header -->
<div class="card-header bgm-color1">
<h2 class="card-title">@String("This is Your Life")</h2>
</div>
<!-- Body Content -->
<div class="card-body">
<p>User Country: @User.Country</p>
<p>An Important Number to Increase:</p>
<p style="text-align:center"><span class="circle">@User.CommissionsCV</span></p>
</div>
<!-- Footer -->
<a class="card-footer--link" href="https://www.directscale.com/">
<svg class="card-footer__icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24">
<path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
</svg>
<span class="ng-scope">@String("See Inside...")</span>
</a>
</div>
.circle {
display: inline-block;
height: 60px;
width: 60px;
line-height: 60px;
border-radius: 30px; /* or 50% */
background-color: black;
color: white;
text-align: center;
font-size: 2em;
}
<p style="text-align:center"><span class="circle">@User.CommissionsCV</span></p>
Use Razor Syntax to pull-in data points.
Updated about 3 years ago