Hello community,
Reaching to make sure I am on the right path to accomplish this requirement i have. Our team would like to show on the widget (attached screenshot) a record count of how many surveys the user has assigned. Overall just a Count indicator I have created a simple icon link widget that goes to the survey page of the portal which is great, but on the landing page of the portal user's will like see a # of how many.
Inside my custom widget I have added a small section to show this, but i am not sure if i am using the class = Badge correctly here in the HTML section of the widget. We don't want to change any of Server Script section as we still want the user to be able to click on the widget and get to the page of survey's as intended.
<div class="iconlink" ng-class="{'high-contrast': accessibilityModeEnabled}">
<!--// Top Icon -->
<!-- <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}">
<div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>-->
<a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}}" target="{{::data.target}}" data-toggle="tooltip" data-placement="top" title="{{::options.short_description}}">
<div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}} level-0"></div>
<h2>{{::options.title}}</h2>
<!--<span class="text-muted">{{::options.short_description}}</span>-->
</a>
<div class="panel">
<div class="text-center" ng-if="options.table_to_query">
<!-- Our Widget Content Here -->
<h4>{{ options.title }}</h4>
<h4>{{ data.record_count }}</h4>
</div>
</div>
<span class="badge">{{ data.record_count }}</span>
<!--// Circle Icon -->
<a ng-if="::(options.link_template == 'Circle Icon')" ng-href="{{::data.href}}" class="circle_icon {{::options.class_name}} text-{{::options.color}}" target="{{::data.target}}">
<span class="fa fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
</span>
<h2>{{::options.title}}</h2>
<span class="text-muted">{{::options.short_description}}</span>
</a>
<!--// Color Box -->
<a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
<div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
<h2>{{::options.title}}</h2>
<span>{{::options.short_description}}</span>
</a>
</div>
</div>
