The Zurich release has arrived! Interested in new features and functionalities? Click here for more

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

NelishaJ
Tera Contributor

4 weeks ago

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
  • 595 Views
6 REPLIES 6

NelishaJ
Tera Contributor
In response to Ankur Bawiskar

4 weeks ago

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

4 weeks ago

@NelishaJ 

what debugging did you do?

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