Add UI button on portal list

[sravanip]

HI

In portal under profile page we are showing list of hardware owned by the logged In user.

In widget using "ng-repeat="item in data.list track by item.sys_id" we display list of hardwares owned by the user. User may have multiple hardwares.

We display warranty data in the list. IF the warranty is expired then we have to include an UI button next to the warranty date. 

On clicking the button... user should be navigating to existing catalog request form. Button should be present to all the hardware where warranty is expired. 

Looking for suggestion how to check the condition and display the button.

Thank You

[Sanjay191]

and also the warranty date is a variable or something else ,could you confirm this ? 

[sravanip]

Yes warranty date is a date variable. 

[sravanip]

we are displaying hardware list in the profile section.

1. At each row next to the warranty date we have to show button ONLY if the warranty date is expired(greater than today's date).

2. Once the button is clicked we have to move to a separate catalog form and copy the warranty date in the DATE field of the catalog form.

[Ravi Gaurav]

Hi @sravanip 

You can use AngularJS's ng-if directive to conditionally display the button next to the warranty date.
some code snippet from community :-

<div ng-repeat="item in data.list track by item.sys_id">
<div>
<span>{{ item.name }}</span>
<span>{{ item.warranty_date | date:'mediumDate' }}</span>

<!-- Check if warranty is expired -->
<button ng-if="isWarrantyExpired(item.warranty_date)"
ng-click="navigateToCatalogRequest(item.sys_id)">
Request Renewal
</button>
</div>
</div>

[jillellaK]

I have implemented something similar using below code

If you can provide me a sample code then i could help you more

<tbody ng-if="!data.loading">
<tr ng-repeat="item in data.rec | limitTo:maxInc: currentIndex">
<td>
<span ng-if="cal.backendVarName === 'number'">
<a class="pdf-span" href="" ng-click="viewAsPDF(item, key)">
<button class="pdf-btn">PDF</button>
</a>
</span>
</td>
</tr>
</tbody>