Hi @all,
I have an action Add/Remove on my "WSD Search" Widget which calls the Macro "wsd-schedule-view".
I want to show the Add/Remove Buttons to only users having "sn_wsd_rsv.selectRooms" Role. So I have added below Highlighted code(in Red) to Macro . This is OOB macro. I have added Jelly tag as well as it doesn't has earlier.
<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">
<div>
<div class="schedule-overlay" ng-class="{'flex-space-between': isNative}">
<div class="schedule-col col-left" ng-class="{'col-xs-3' : displayRsvCard, 'col-xs-1' : !isNative && !displayRsvCard, 'text-right': !isNative, 'text-left': isNative, 'left-chevron': !isNative, 'left-chevron-native': isNative}" ng-style="disableShiftLeft && isNative && {'visibility': 'hidden'}">
<span>
<i tabindex= "0" class="fa fa-chevron-left shift-left"
ng-if="!disableShiftLeft || isNative"
ng-style="disableShiftLeft && isNative && {'visibility': 'hidden'}"
aria-label="{{scheduleViewLabels.shiftLeft}}"
ng-attr-title="{{scheduleViewLabels.shiftLeft}}"
ng-click="shiftGridLeft()"></i>
</span>
</div>
<div class="schedule-col col-middle time-grid" ng-class="displayRsvCard ? 'col-xs-8' : 'col-xs-10'">
<div class="slider-wrapper drawing-canvas">
<div class="slider-top invisible">
<span class="slider-pin pin-left" ng-style="{left: slider.leftPin.left}"></span>
<span class="slider-pin pin-right" ng-style="{left: slider.rightPin.left}"></span>
</div>
<div class="slider-body" ng-style="{left: slider.left, width: slider.width}"
ng-class="{'overlap-left': slider.overlap === 'left' || slider.overlap === 'both', 'overlap-right': slider.overlap === 'right' || slider.overlap === 'both', 'blockRed': (!displayRsvCard && reservables[0].is_available!==undefined && !reservables[0].is_available )}">
</div>
</div>
<div class="time-scale drawing-canvas grid-container">
<div class="drawing-canvas">
<span class="grid-header" ng-class="isNative ? 'date-text-native' : 'date-border'"
ng-repeat="gridHeader in grid.ganttHeaders track by $index" ng-if="gridHeader.date"
ng-style="{'right': ($index == grid.ganttHeaders.length - 1) ? (!isNative ? 'calc(' + gridHeader.right + ' + -30px)' : '-25px') : gridHeader.right, 'left': ($index == grid.ganttHeaders.length-1) ? (isNative ? 'auto' : gridHeader.left) : (isNative ? '-25px' : 'calc(' + gridHeader.left + ' + -30px)')}"
>
{{gridHeader.dateVal}}
</span>
</div>
</div>
<div class="time-scale drawing-canvas grid-container">
<div class="drawing-canvas">
<span class="grid-header"
ng-style="{left: gridHeader.left, right: gridHeader.right, 'white-space': 'nowrap'}"
ng-repeat="gridHeader in grid.ganttHeaders" ng-class="{'time-text-native': isNative}">
{{::gridHeader.label}}
</span>
</div>
</div>
<div class="time-grid-block-wrapper drawing-canvas" ng-if="!isNative">
<div ng-repeat="gridLine in grid.gridLines">
<span class="time-grid-block"
ng-style="{left: gridLine.left, 'border-right-width': gridLine.width}"
ng-if="!gridLine.thick">
</span>
<span class="time-grid-block-thick"
ng-style="{left: gridLine.left}"
ng-if="gridLine.thick">
</span>
</div>
</div>
<!-- Gridlines for native mobile screen with hour and half hour lines -->
<div class="time-grid-block-wrapper-native drawing-canvas" ng-if="isNative">
<div ng-repeat="gridLine in grid.gridLines">
<span class="time-grid-block-hour"
ng-style="{left: gridLine.left}"
ng-if="gridLine.hour">
</span>
<span class="time-grid-block-half-hour"
ng-style="{left: gridLine.left}"
ng-if="!gridLine.hour">
</span>
</div>
</div>
</div>
<div class="schedule-col col-right" ng-class="{'col-xs-1': !isNative, 'text-left': !isNative, 'text-right': isNative, 'right-chevron': !isNative, 'right-chevron-native': isNative}">
<span>
<i tabindex= "0" class="fa fa-chevron-right shift-right"
ng-if="!disableShiftRight || isNative"
ng-style="disableShiftRight && isNative && {'visibility': 'hidden'}"
aria-label="{{scheduleViewLabels.shiftRight}}"
ng-attr-title="{{scheduleViewLabels.shiftRight}}"
ng-click="shiftGridRight()"></i>
</span>
</div>
</div>
<div class="schedule-details" role="table">
<div id="{{item.sys_id}}" class="schedule-row row--item"
ng-class="{'is-reserved': item.is_reserved, 'is-selected': item.is_selected, 'unavailable': !item.is_available, 'flex-space-between': isNative}"
ng-repeat="item in reservables track by item.sys_id" role="row"
ng-style="isNative && {'border': 'none'}">
<div class="schedule-col col-left-pad col-xs-3" ng-if="displayRsvCard" ng-class="item.availabilityScore? 'availability-score':''">
<div class="item-info col-xs-12 col-sm-12 col-lg-12">
<div class="pull-right" ng-if="isFavoritesEnabled">
<sp-widget widget="item.favoriteWidget"></sp-widget>
</div>
<div class="reservable-title text-muted text-overflow-ellipsis" ng-attr-title="{{::item.name}}">
<span ng-if="item.require_approval" class="highlighted-label">
<i class="fa fa-lock" ng-attr-title="{{scheduleViewLabels.requireApproval}}"></i>
</span>
{{::item.name}}
</div>
<div class="subtitle text-overflow-ellipsis" ng-attr-title="{{::item.subtitle}}">{{::item.subtitle}}</div>
<div class="reservable-details">
<div class="col-xs-12 col-md-4 text-muted p-l-0" ng-repeat="item in item.body" ng-class="'reservable-details-' + item.field">
<i class="reservable-icon fa" data-toggle="tooltip" ng-class="::item.icon" title="{{::item.iconLabel}}"></i>
<span class="reservable-value" data-toggle="tooltip" data-container=".wsd-search" data-placement="top" title="{{::item.iconTooltipText}}">
{{item.iconTooltipText ? '+' + item.amount : item.displayValue}}
</span>
</div>
</div>
</div>
<div ng-if="item.availabilityScore" id="Availability" class="availabilityScore-scheduleView col-xs-12 col-sm-12 col-lg-12">
<span><i id="Availability-Icon" class="{{item.availabilityScore.iconClass}} availability-icon" style='color: {{item.availabilityScore.iconColor}};'></i></span>
<span id="Availability-Text" class="availabilityText-scheduleView text-overflow-ellipsis" ng-attr-title="{{item.availabilityScore.displayText}}" >{{item.availabilityScore.displayText}}</span>
</div>
</div>
<div ng-if="!displayRsvCard" ng-class="{'col-xs-1': !isNative}"></div>
<div class="schedule-col col-middle" ng-class="displayRsvCard? 'col-xs-8' : 'col-xs-10'"
aria-label="{{::item.availability_label}}" role="gridcell" ng-style="isNative && {'height': '50px'}">
<div class="drawing-canvas gantt">
<div class="reserved"
ng-style="{left: reservation.gantt.left, width: reservation.gantt.width}"
ng-repeat="reservation in item.reservations track by reservation.sys_id"
aria-label="{{::reservation.title}}"
ng-attr-title="{{::reservation.title}}">
</div>
</div>
</div>
<div ng-if="!displayRsvCard && isNative"></div>
<div class="schedule-col col-right text-center col-xs-1" ng-if="displayRsvCard">
<div class="reservable-action" tabindex="0" role="gridcell">
<g:evaluate var="jvar_admin" expression="gs.hasRole('sn_wsd_rsv.selectRooms')" />
<j2:if test="${jvar_admin == true}">
<button id="add-{{item.sys_id}}" class="btn btn-default btn-add btn-reserve form-control text-overflow-ellipsis"
ng-class="{'btn-remove': item.is_selected, 'btn-reserved': reservable.is_reserved, 'btn-selected': reservable.is_selected}"
ng-disabled="!item.is_available || (disableReserveMulti && !item.is_selected)"
tabindex="-1"
aria-label="{{item.is_selected ? item.deselect_label : item.select_label}}"
ng-attr-title="{{item.is_selected ? scheduleViewLabels.remove : scheduleViewLabels.add}}"
ng-click="toggleReservableSelection({item: item, event: $event})">
<label class="btn-label-reserve">{{item.is_selected ? scheduleViewLabels.remove : scheduleViewLabels.add}}</label>
<i ng-class="!item.is_selected? 'fa fa-shopping-cart btn-icon-reserve' : 'fa fa-trash btn-icon-reserve'"></i>
</button>
</j2:if>
</div>
</div>
</div>
</div>
</div>
</j:jelly>
but it is not hiding the button. Please help me.
Thanks,
