Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

My active items should only visible the item when its count > 0

NelishaJ
Tera Contributor

‎08-26-2025 02:48 AM

Hi All,

In My active items tiles we want to display only those items whose count is greater than 0 like in this tile only requests should be visible and others should be hide and they comes up when there count is greater than 0

NelishaJ_1-1756201566815.png

Thanks in advanced

 

Labels:
0 Helpfuls
  • 838 Views
6 REPLIES 6

NelishaJ
Tera Contributor
In response to Ankur Bawiskar

‎08-26-2025 05:42 AM

HTML:

<div ng-if="!isLoading" class="my-items-container panel panel-default b panel-wrapper">
<div class="panel-heading b-b">
<h2 id="{{data.instanceId}}-widget-title" class="panel-title">{{::data.title}}</h2>
</div>
<div class="activity-check" ng-if="c.checkForData()">
<p class="no-items">${You don't have any items yet.}</p>
</div>
<div class="my-items-body panel-body" aria-labelledby="{{data.instanceId}}-widget-title" role="region">
<div class="primary-activity-container" ng-if="c.primaryActivity && c.primaryActivity.totalItemCount > 0">
<div ng-init="activity = c.primaryActivity" ng-include="'activity-template'"></div>
<div class="list-view" ng-if="c.listViewData.length > 0">
<p class="list-count-summary" ng-if="c.data.listCountSummary">{{c.data.listCountSummary}}</p>
<div class="carousel-card-container" ng-if="(c.data.card_behaviour=='single')">
<div class="scrolling-panel">
<div class="slide-control-container left-control" ng-if="c.indicatorDots > 0 && c.activeIndicatorIndex != 0">
<div class="slide-control"
ng-click="c.swipeLeft(1, $event)" tabindex="-1" aria-hidden="true">
</div>
<button class="btn btn-default activity-control-circle left-button"
aria-label="${Click to swipe the cards to left}" ng-click="c.swipeLeft(1, $event)">
<i class="glyphicon glyphicon-menu-left flip-icon-rtl"></i>
</button>
</div>

<div ng-include="'card-template'"></div>

<div class="slide-control-container right-control" ng-if="c.indicatorDots > 0 && c.activeIndicatorIndex != c.indicatorDots-1">
<div class="slide-control"
ng-click="c.swipeRight(1, $event)" tabindex="-1" aria-hidden="true">
</div>
<button class="btn btn-default activity-control-circle"
aria-label="${Click to swipe the cards to right}" ng-click="c.swipeRight(1, $event)">
<i class="glyphicon glyphicon-menu-right flip-icon-rtl"></i>
</button>
</div>
<div class="fader left-fade" ng-if="c.indicatorDots > 0" ng-show="c.activeIndicatorIndex != 0">
</div>
<div class="fader right-fade" ng-if="c.indicatorDots > 0"
ng-show="c.activeIndicatorIndex != c.indicatorDots-1"></div>
</div>
<div class="scrolling-panel-footer">
<div ng-class="c.getIndicatorClass()" ng-if="c.indicatorDots > 0">
<span ng-repeat="x in [].constructor(c.indicatorDots) track by $index" class="activity-carousel-indicator circle" role="button" tabindex="0"
ng-attr-aria-label="{{'Go to page ' + ($index + 1)}}" id="{{$index + 1}}" ng-click="c.indicatorNavigation($index, $event)"
ng-class="c.getDotClass($index)" ng-attr-aria-current="{{$index === c.activeIndicatorIndex ? 'page' : undefined}}"></span>
</div>
<div class="view-all-container">
<a class="view-all" ng-href="{{c.primaryActivity.itemUrl}}"
target="{{c.primaryActivity.target}}">${View all}
<i aria-hidden="true" class="right-arrow fa fa-chevron-right flip-icon-rtl"></i>
</a>
</div>
</div>
</div>

<div class="list-card-container" ng-if="(c.data.card_behaviour=='wrap')">
<div ng-include="'card-template'"></div>
<div class="view-all-container view-all-grid-container">
<a class="view-all" ng-href="{{c.primaryActivity.itemUrl}}"
target="{{c.primaryActivity.target}}">${View all}
<i aria-hidden="true" class="right-arrow fa fa-chevron-right flip-icon-rtl"></i>
</a>
</div>
</div>

</div>
</div>
<div class="summary-view-container">
<div ng-repeat="activity in c.activitySummaries track by $index" >
<div ng-include="'activity-template'"></div>
</div>
</div>
</div>

<div ng-if="isLoading" class="skeleton-loading flex-column my-items-container panel-default">
<div class="panel-heading b-b">
<h3 class="panel-title">{{::data.title}}</h3>
</div>
<div class="my-items-body panel-body">
<span class="skeleton-loader primary-activity-heading-loader"></span>
<span class="skeleton-loader primary-activity-count-loader"></span>
<div class="cards-grid-container">
<div class="cards-grid-container" ng-repeat="item in [1,2,3]">
<div class="card-loader flex-column">
<span class="skeleton-loader item-badge-loader"></span>
<span class="skeleton-loader item-title-loader"></span>
<span class="skeleton-loader item-description-loader"></span>
<span class="skeleton-loader item-field-loader"></span>
</div>
</div>
</div>
<span class="skeleton-loader view-all-loader"></span>
<div class="summary-view-container">
<div class="flex-column" ng-repeat="item in [1,2,3,4]">
<span class="skeleton-loader secondary-activity-loader"></span>
</div>
</div>
</div>
</div>

 

Server script:

(function() {

    data.load_config = options.load_config;
    data.asyncLoad = options.async_load || false;
    if (!data.asyncLoad && data.load_config === "async" && !input)
        return;
    data.card_behaviour = options.card_behaviour;
    data.instanceId = $sp.getDisplayValue("sys_id");

    var stats = {};
    stats.callerId = instanceId;
    stats.textPrefix = 'My Items';
    stats.shortDesc = 'Load Data';
    stats.guid = gs.generateGUID();

    try {
        var portalRecord = $sp ? $sp.getPortalRecord() : '';
        var portalId = portalRecord ? portalRecord.sys_id : '';
        data.recordLimit = options.list_view_count;
        data.showViewDetails = options.show_view_details;
        data.showIcons = options.show_icons;

        var grInstanceRecord = $sp ? $sp.getInstanceRecord() : '';
        var instanceId = grInstanceRecord ? grInstanceRecord.getUniqueValue() : '';
        stats.startTime = new GlideDateTime();
        var liteView = (options.widget_behavior_during_high_load == "lite_view") && new sn_ex_emp_fd.PortalPerformanceUtil().getNodeStatus();

        var activityConfigUtil = new sn_ex_sp.ActivityConfigurationUtil();
        data.activityDetails = activityConfigUtil.getActivityData(data.recordLimit, instanceId, portalId, liteView, stats.guid);
        //Map actions with associated card
        for (var cardDataIndex = 0; cardDataIndex < data.activityDetails.listViewData.length; cardDataIndex++) {
            var currCardData = data.activityDetails.listViewData[cardDataIndex];
            currCardData.title = currCardData.title ? GlideStringUtil.unEscapeHTML(currCardData.title) : "";
            currCardData.description = currCardData.description ? GlideStringUtil.unEscapeHTML(currCardData.description) : "";
            currCardData.field1Value = currCardData.field1Value ? GlideStringUtil.unEscapeHTML(currCardData.field1Value) : "";
            currCardData.field2Value = currCardData.field2Value ? GlideStringUtil.unEscapeHTML(currCardData.field2Value) : "";
            if (currCardData.actionsWidgetDetail) {
                var context = currCardData.actionsWidgetDetail.parentRecordSysId;

                var actionsWidget = $sp.getWidget("action-widget", {
                    table: currCardData.actionsWidgetDetail.parentTable,
                    context: context,
                    action_group: currCardData.actionsWidgetDetail.actionGrpSysId,
                    max_button_count: 2,
                    primary_colored_button: true,
                    more_icon: 'fa-ellipsis-v'
                });

                currCardData.actionsWidget = actionsWidget;
                currCardData.actionsContext = context;
                currCardData.isActionWidgetVisible = true;
            }
        }

        data.title = gs.getMessage("My active items");

        if (data.activityDetails.listViewData && data.activityDetails.listViewData.length > 0) {

            var isSessionLangGerman = gs.getSession().getLanguage() == "de";
            var itemName = data.activityDetails.primaryCountData.length > 0 ? data.activityDetails.primaryCountData[0].itemName : undefined;
            //Nouns always start with capital letter in German
            itemName = isSessionLangGerman ? itemName : itemName.toLowerCase();

            data.listCountSummary = gs.getMessage("Showing {1} of {1} {2}",
                [data.activityDetails.listViewData.length.toString(),
                    data.activityDetails.primaryCountData[1].itemCount.toString(), itemName
                ]);
            data.noOfCards = data.activityDetails.listViewData.length;
        }
        data.hideWidget = false;

        new sn_ex_sp.PerformanceIndicatorUtil().postInstanceHotspot(stats);

        return data;
    } catch (e) {
        data.hideWidget = true;
        gs.addErrorMessage(gs.getMessage("Error in loading the My Items widget"));
        return data;
    }

})();
 
Client side:
api.controller = function($scope, $timeout, $location, $window) {
    var c = this;
    $scope.isLoading = false;


    c.redirect = function($event, url, target) {
        $event.stopPropagation();
        if (url) {
            target = target ? target : "_self";
            if (target === "_self") {
                $location.search(url.substr(1));
            } else {
                $window.open(url, target);
            }
        }
    };

    $scope.$on('isActionWidgetVisible', function(event, evntData) {
        event.stopPropagation();
        c.listViewData.every(function(listViewItem) {
            if (listViewItem.actionsContext === evntData.context) {
                listViewItem.isActionWidgetVisible = evntData.visibility;
                return false;
            }
            return true;
        });
    });

    $scope.$on('sn_ex_sp_action.result', function(event, actionOutput) {
        c.asyncGet();
    });

    c.checkForData = function() {
        if (!(c.primaryActivity) && !(c.secondaryActivity && c.secondaryActivity.length))
            return true;
        return false;
    };

    c.asyncGet = function() {
        c.data.action = "loadData";
        $scope.isLoading = true;
        c.server.update().then(function(response) {
            fetchMyItemsData();
            if (c.data.card_behaviour == 'single') {
                resetCarousel();
            } else {
                adaptCardGrid();
            }
            handleTextOnlyZoom();
        }).finally(function() {
            $scope.isLoading = false;
        });
    };

    var fetchMyItemsData = function() {
        if (!c.data.hideWidget) {
            c.activitySummaries = [];
            c.primaryActivity = c.data.activityDetails.primaryCountData.length ? c.data.activityDetails.primaryCountData[0] : null;
            c.secondaryActivity = c.data.activityDetails.summaryCountData;
            c.listViewData = c.data.activityDetails.listViewData;
            c.showViewAll = c.data.activityDetails.showViewAll;
            if (c.primaryActivity && c.primaryActivity.itemCount == 0) {
                c.activitySummaries.push(c.primaryActivity);
            }
            c.activitySummaries = c.activitySummaries.concat(c.secondaryActivity);
        }
    };

    var load_config = c.data.load_config;
    if (load_config === "async" && !c.data.asyncLoad) {
        $timeout(c.asyncGet);
    } else {
        fetchMyItemsData();
        if (c.data.card_behaviour == 'single') {
            resetCarousel();
        } else {
            adaptCardGrid();
        }
        handleTextOnlyZoom();
    }


    //Carousel methods

    c.getCardsContainer = function() {
        return $(".cards-flex-container");
    };

    c.getCardsContainerWidth = function() {
        return $(".cards-flex-container").width();
    };

    c.getCardHolder = function() {
        return $(".activity-card-holder-carousel");
    };

    //Returns card width + margin
    c.getCardHolderWidth = function() {
        return c.getCardHolder().outerWidth(true);
    };

    //Computing the no of dots to be shown below the carousel
    c.computeIndicatorDots = function() {
        var value = Math.ceil(c.data.noOfCards / c.getCardsInView());
        c.indicatorDots = value === 1 ? 0 : value;
    };


    /* @Param: swipeRotation - the no of rotations/swipes you need to move the flex container
     * @Param: swipeRotationDirection - the direction you wish to swipe - 'right' or 'left'
     *
     * @return: the scroll value for the movement of the card
     */

    c.getScrollLength = function(swipeRotation, swipeRotationDirection) {
        var scrollValue = 0;
        for (var i = 0; i < swipeRotation; i++) {
            var cardRightMargin = (c.getCardHolder().outerWidth(true) - c.getCardHolder().outerWidth(false));
            var cardsVisible = c.getCardsInView(); //no of cards visible in the flexbox container

            if (c.activeIndicatorIndex == (c.indicatorDots - 1)) {
                //Figuring out the cut out card width
                var cardsScrolledAtLast = c.data.noOfCards - cardsVisible * (c.indicatorDots - 1);
                var cutOffSectionWidth = c.getCardsContainerWidth() - (c.getCardsInView() * c.getCardHolderWidth());
                scrollValue += (cardsScrolledAtLast * c.getCardHolderWidth()) - cutOffSectionWidth - cardRightMargin;
            } else {
                scrollValue += c.getCardsInView() * c.getCardHolderWidth();
            }

            switch (swipeRotationDirection) {
                case "right":

                    if (c.activeIndicatorIndex < c.indicatorDots - 1)
                        c.activeIndicatorIndex++;
                    break;
                case "left":
                    if (c.activeIndicatorIndex > 0)
                        c.activeIndicatorIndex--;
                    break;
            }
        }
        return scrollValue;
    };

    //no of cards visible in the flex container
    c.getCardsInView = function() {
        var value = parseInt(Math.floor((c.getCardsContainerWidth()) / c.getCardHolderWidth()));
        return value ? value : 1;
    };

    //Move cards right
    c.swipeRight = function(swipeRotation, $event) {
        if ($event && $event.type == "keypress")
            return;
        var swipeRotationDirection = 'right';
        var scrollVal = c.getScrollLength(swipeRotation, swipeRotationDirection);
        var leftPos = c.getCardsContainer().scrollLeft();

        c.getCardsContainer().animate({
            scrollLeft: leftPos + scrollVal
        }, 100);
        // focus on the first indicator dot if we've reached the end of the carousel
        if ($event && c.activeIndicatorIndex === (c.indicatorDots - 1)) {
            $(".scrolling-panel-footer .activity-carousel-indicator:not(.hidden)")[0].focus();
        }
        $("div.slide-control").blur();
    };

    //Move cards left
    c.swipeLeft = function(swipeRotation, $event) {
        if ($event && $event.type == "keypress")
            return;
        var swipeRotationDirection = 'left';
        var scrollVal = c.getScrollLength(swipeRotation, swipeRotationDirection);
        var leftPos = c.getCardsContainer().scrollLeft();
        c.getCardsContainer().animate({
            scrollLeft: leftPos - scrollVal
        }, 100);
        // focus on the first card if we've reached the beginning of the carousel
        if ($event && c.activeIndicatorIndex === 0) {
            $('.activity-card').get(0).focus();
        }
        $("div.slide-control").blur();
    };

    //Function to swipe to a particular indicator
    c.indicatorNavigation = function(index, event) {
        if (event && event.type == 'keypress') {
            event.preventDefault();
        }
        var swipeRotation; //The no of swipes aka rotations that are needed for swipe
        if (index == c.activeIndicatorIndex)
            return;
        else if (index > c.activeIndicatorIndex) {
            swipeRotation = index - c.activeIndicatorIndex;
            c.swipeRight(swipeRotation);
        } else {
            swipeRotation = c.activeIndicatorIndex - index;
            c.swipeLeft(swipeRotation);
        }
    };

    //Toggle tabindex of tabbable items inside non-tabbable activity cards.
    function toggleTabIndex(index, setTabbable) {
        var CUSTOM_TAB_INDEX = '-7';
        if (setTabbable) {
            $('.activity-card').eq(index).siblings().find('[tabindex=' + CUSTOM_TAB_INDEX + ']').attr('aria-hidden', 'false');
            $('.activity-card').eq(index).siblings().find('[tabindex=' + CUSTOM_TAB_INDEX + ']').attr('tabindex', '0');
        } else {
            $('.activity-card').eq(index).siblings().find('a , button').attr('aria-hidden', 'true');
            $('.activity-card').eq(index).siblings().find('a , button').attr('tabindex', CUSTOM_TAB_INDEX);
        }
    }

    //Manually setting the tabIndex of the cards for A11y
    c.setCardTabIndex = function(index) {
        if (c.data.card_behaviour == 'wrap') {
            return 0;
        }
        //If indicatorDots don't exist
        if (c.indicatorDots == null)
            c.computeIndicatorDots();

        if (c.indicatorDots == 0) {
            toggleTabIndex(index, true);
            return 0;
        }

        var lastCardIndex = c.data.noOfCards - 1;
        var cardsVisible = c.getCardsInView();

        // When the active indicator dot is in the end
        if (c.activeIndicatorIndex == (c.indicatorDots - 1)) {
            if ((lastCardIndex - cardsVisible) < index &&
                index <= (lastCardIndex)) {
                toggleTabIndex(index, true);
                return 0;
            }
        }

        if (c.activeIndicatorIndex * cardsVisible <= index &&
            index < ((c.activeIndicatorIndex + 1) * cardsVisible)) {
            toggleTabIndex(index, true);
            return 0;
        }
        toggleTabIndex(index, false);
        return -1;
    };

    function resetCarousel() {
        $timeout(function() {
            c.activeIndicatorIndex = 0;
            c.indicatorNavigation(0);
            c.setCarouselCardWidth();
            c.computeIndicatorDots();
        }, 100);
    }

    var appWindow = angular.element($window);
    appWindow.bind('resize', _.debounce(function() {
        if (c.data.card_behaviour === 'single' && !$scope.isLoading) {
            c.getCardsContainer().animate({
                scrollLeft: 0
            }, 100);
            resetCarousel();
        } else {
            adaptCardGrid();
        }
    }, 500));

    function handleTextOnlyZoom() {
        var fontSize = getComputedStyle(document.documentElement).fontSize;
        setInterval(function() {
            var currentFontSize = getComputedStyle(document.documentElement).fontSize;
            if (fontSize !== currentFontSize) {
                fontSize = currentFontSize;
                if (c.data.card_behaviour === 'single' && !$scope.isLoading) {
                    c.getCardsContainer().animate({
                        scrollLeft: 0
                    }, 100);
                    resetCarousel();
                } else {
                    adaptCardGrid();
                }
            }
        }, 500);
    }

    c.getIndicatorClass = function() {
        var width = getWidgetWidth();
        return (width > 500 ? 'activity-carousel-indicator-wrapper' : 'activity-carousel-indicator-wrapper-mobile');
    };

    c.setCarouselCardWidth = function() {
        var CAROUSEL_BASE_CARD = 200;
        var CAROUSEL_OFFSET = 25;
        var remToPixel = 10;
        // HTML font size on different devices which is used for conversion
        var deviceRemToPixel = $('html').css('font-size');
        deviceRemToPixel = parseFloat(deviceRemToPixel, 10);

        var containerWidth = c.getCardsContainerWidth();
        var cardRightMargin = c.getCardHolder().outerWidth(true) - c.getCardHolder().outerWidth(false),
            cardWidth = (CAROUSEL_BASE_CARD / remToPixel) * deviceRemToPixel,
            minCardWidth = cardWidth + cardRightMargin,
            cardWidthOffset = (CAROUSEL_OFFSET / remToPixel) * deviceRemToPixel;

        var availableContainerWidth = containerWidth - cardWidthOffset;
        var noOfCards = parseInt(Math.floor(availableContainerWidth / minCardWidth));

        noOfCards = c.data.noOfCards <= noOfCards ? c.data.noOfCards : noOfCards;
        var extraWidth = (c.data.noOfCards <= noOfCards ? containerWidth : availableContainerWidth) - (noOfCards * minCardWidth);
        if (noOfCards > 0)
            cardWidth = minCardWidth + (extraWidth / noOfCards);

        c.getCardHolder().width(Math.floor(cardWidth - cardRightMargin));
        $scope.$broadcast("sn_ex_sp.reEvaluateActionsWidth");
    };

    function getWidgetWidth() {
        return $('.my-items-container').width();
    }

    function adaptCardGrid() {
        $timeout(function() {
            var width = getWidgetWidth();
            var gridLayout = $('.my-items-container').find('.cards-grid-container');
            if (width <= 550) {
                gridLayout.addClass('grid-single-column');
                gridLayout.removeClass('grid-multi-column');
            } else {
                gridLayout.addClass('grid-multi-column');
                gridLayout.removeClass('grid-single-column');
            }
            $scope.$broadcast("sn_ex_sp.reEvaluateActionsWidth");
        }, 500);

    }

    c.getDotClass = function(index) {
        var start = getStart(c.activeIndicatorIndex + 1, c.indicatorDots);
        var end = getEnd(c.activeIndicatorIndex + 1, c.indicatorDots);
        var isActive = index === c.activeIndicatorIndex;
        var isSmall = (index === start - 1 && start > 1) || (index === end - 1 && end < c.indicatorDots);
        var isHidden = index < start - 1 || index > end - 1;
        return (isActive ? 'active ' : '') + (isSmall ? 'small ' : '') + (isHidden ? 'hidden' : '');
    };

    function getStart(currentPage, numberOfPages) {
        var firstDisplayablePage = currentPage - 2;
        var lastDisplayablePage = numberOfPages - 4;
        return Math.max(1, Math.min(firstDisplayablePage, lastDisplayablePage));
    }

    function getEnd(currentPage, numberOfPages) {
        var pagesToShow = 4;
        return Math.min(getStart(currentPage, numberOfPages) + pagesToShow, numberOfPages);
    }
};
0 Helpfuls

Ankur Bawiskar
Tera Patron
Tera Patron
In response to NelishaJ

‎08-26-2025 06:03 AM

@NelishaJ 

what debugging did you do?

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader
0 Helpfuls