Building Widget with hyperlink (in Angular)

[scwillson]

I am attempting to modify a copy of an OOTB widget for Service Portal, but am having trouble due to the fact that I am a novice when it comes to AngularJS.

I am modeling my widget after the "Simple" list widget. Though instead of referencing a table of ticket to open, I have a "Quick Links" table I've created where the customer will have the ability to add or remove links as needed. This widget will just render based on the list of records. Each record contains the "Display Name", URL, and additional info text. That part of all this that I am having trouble doing is stripping out the original hyperlinking of the widget, and instead just make it look to the record to pull the "u_url" field value.

Here is (part of) the original HTML of the widget:

<div class="list-group hide-x-overflow" style="max-height: {{::c.options.panel_body_height || 'none'}}; overflow-y: auto;">
       <div ng-if="c.data.list.length > 0" ng-repeat="item in c.data.list track by item.sys_id" class="list-group-item">
           <a ng-click="c.onClick($event, item, item.url, {})" href="javascript:void(0)" >
               <span ng-repeat="action in c.data.actions" href="" ng-click="c.onClick($event, item, action.url, action)" ng-if="action.glyph"
                           class="list-action l-h-40 pull-right">
                   <fa name="{{action.glyph}}" ng-class="c.getActionColor(action)" />
               </span>
               <span ng-if="c.options.image_field" class="pull-left m-r"
                           ng-class="{'avatar': c.options.rounded_images, 'thumb-sm': c.options.rounded_images}">
                   <img ng-src="{{item.image_field}}" alt="..." class="img-sm" ng-class="{'img-circle': c.options.rounded_images}">
               </span>
               <div>
                   <div ng-switch on="item.display_field.type" ng-class="{'l-h-40': !item.secondary_fields.length}">
                       <span class="translated-html" ng-switch-when="translated_html" ng-bind-html="item.display_field.value"></span>
                       <div ng-switch-default>{{item.display_field.display_value}}</div>
                   </div>
                   <small class="text-muted" ng-repeat="f in item.secondary_fields">
                       <span ng-if="!$first"> • </span>
                       <span ng-switch="f.type" title="{{::f.label}}">
                           <span ng-switch-when="glide_date"><sn-time-ago timestamp="::f.value" /></span>
                           <span ng-switch-when="glide_date_time"><sn-time-ago timestamp="::f.value" /></span>
                           <span ng-switch-default="">{{f.display_value}}</span>
                       </span>
                   </small>
               </div>
           </a>
       </div>

I have tried just adding {{item.u_url}} to two different parts in the href attribute, but neither worked. (didn't try them at the same time, but add them below to illustrate what I am referring to)

           <a ng-click="c.onClick($event, item, item.url, {})" href="{{item.u_url}}" >
               <span ng-repeat="action in c.data.actions" href="{{item.u_url}}" ng-click="c.onClick($event, item, action.url, action)" ng-if="action.glyph"

I also tried swapping {{item.u_url}} for the "action.url" section of the onClick function parameter.

I am still working through it, but any feedback, hints, or suggestions would be much appreciated.

Thanks,

[jackinsidend]

So this is exactly what I want, I have a list with a title and url field, and I want to use the simple list widget and pop those links open in same or new window.

What else did you have to change in the widget other than the record.link up there?

Thank you,

Jack

[Sriram6]

Can you brief more on this?