Trying to make a Portal Widget Dynamic

[anirban300]

I have created a widget to fetch data from sys_properties. There are 4 URL's and their respective names. I have write the below CSS, Server Script and Client Controller. But I am stuck in HTML. How to write ng- repeat in HTML to fetch the data?

Property:

Service Portal=https://avengers.service-now.com/it,

HR Portal=https://avengers.service-now.com/hr,

Finance Portal=https://avengers.service-now.com/finance,

Treasury Portal=https://avengers.service-now.com/treasury

HTML:

<div class="panel panel- b">
<div class="panel-heading">
<h4 class="panel-title">${More Services}</h4>
</div>

<ul> 
<div class="list-group">
<div class="Switch Portal">
<li><b><a href="" target="_blank"></a></b></li>
</div>

<div class="Switch Portal">
<a href="" target="_blank"></a>
</div>

<div class="Switch Portal">
<a href="" target="_blank"></a>
</div>

<div class="Switch Portal">
<a href="" target="_blank"></a>
</div>
</div>
</ul>

Server Script:

(function() {
var arr = gs.getProperty("portal.prop").split(',');
for(var i=0;i<arr.length;i++)
{
var portal = arr[i];
var div_portal =portal.split("=",2);
var portal_label = div_portal[0];
var portal_link = div_portal[1];

var a = {};

a.LinkMyIT = portal_link;
a.LabelMyIT = portal_label;
data.a = a;

}

Client Controller:

function() {
/* widget controller */
var c = this;
}

})();

[SatheeshKumar · Accepted solution]

hey check the below code.

i have added few changes in your code, it will generate links dynamically from your property.

HTML

<div class="panel panel- b">
<div class="panel-heading">
<h4 class="panel-title">${More Services}</h4>
</div>
  
  <li ng-repeat="x in data.portals"> <a href="{{x.LinkMyIT}}" target="_blank">{{x.LabelMyIT}}</a></li>
  
</div>

Server:

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
	
	data.portals =[];
	
	var arr = gs.getProperty("portal.prop").split(',');
for(var i=0;i<arr.length;i++)
{
var portal = arr[i];
var div_portal =portal.split("=",2);
var portal_label = div_portal[0];
var portal_link = div_portal[1];

var a = {};

a.LinkMyIT = portal_link;
a.LabelMyIT = portal_label;
data.portals.push(a);

}

})();

Add CSS as per your needs.

-satheesh

[anirban300]

Hi Sateesh,

It worked, thanks a lot. It helped me understand the code as well.

Thanku

[anirban300]

Hi Sateesh,

If I make 4 different widgets for the four portals(Different Scopes) so can we show the bullet on the side of the portal in which we are now i.e. if we are in the Finance Portal then only the bullet should be shown beside the finance portal.Can we make something like this?

Now:

To be: