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,

[Brad Tilton]

Hi Simon,

Try this:

<a ng-href="{{item.u_url}}">

[scwillson]

I had just tried that a few minutes ago, and it didn't work. except mine had a slash in front.

<a ng-href="/{{item.u_url}}">

I think it might be something wrong with my calling the url from the table record with "item.u_url". Just to see what it was pulling, I put it into a text area of the widget, and nothing shows...do you think perhaps it is something with it pulling from a URL field?

I'll try it with a string field.

[Brad Tilton · Accepted solution]

Ahh ok. In your server script section I would make sure that you're pulling over the url field and populating it into a property on your data.list object.

[scwillson]

Brad to the rescue again!

Thanks, I got it working by adding record.link = gr.getValue('u_url'); into the "record" array.