Hi Karina,
Yes,i was able to do that. Let me know if need any help.
Thank you.
Anup Raheja
HTML
<!-- your widget template -->
<div class=" pill-background row">
<div class="enlpill" ng-class="{'active':c.selectedPill == 'myhrc'}" ng-click="selectPill('myhrc')">
<p class="remove-margin">${My HR Cases}</p>
</div>
<div class="enlpill" ng-class="{'active':c.selectedPill == 'mydoc'}" ng-click="selectPill('mydoc')">
<p class="remove-margin">${My Documents}</p>
</div>
</div>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Client script
function($rootScope,$scope,$timeout,$window,$location) {
var c = this;
//check value of data.parm then call selectedPill to have correct tab display.
switch($scope.data.parm)
{
case "myhrc":
c.selectedPill = "myhrc";
break;
case "mydoc":
c.selectedPill = "mydoc";
break;
default:
c.selectedPill = "myhrc";
break;
}
/*broadcast to other widgets after waiting for 500 milliseconds,
just to make sure other widgets are loaded and ready to listen when we broadcast. */
$timeout(function(){
$rootScope.$broadcast('showHideWidget', $scope.data.parm);
},500);
//broadcast the selection when ever cliked on each pill
$scope.selectPill = function(selection){
c.selectedPill = selection;
$rootScope.$broadcast('showHideWidget', selection);
};
$rootScope.$on('showHideWidget', function(event,data) {
$timeout(function(){
$scope.showWidgetc = data;
c.selectedPill = data;
});
});
$rootScope.$on('showHideWidgetbrgp', function(event,data) {
$timeout(function(){
$scope.showWidgetc = data;
c.selectedPill = data;
});
});
}
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Server Script
(function() {
/* populate the 'data' object */
//check if url contains the tab parameter. If no, set data.parm to myhrc tab as default tab, else, set data.parm to value of parameter.
if($sp.getParameter('tab') != '' && $sp.getParameter('tab') != null)
{
data.parm = $sp.getParameter('tab');
}
else
{
data.parm = myhrc;
}
})();
