Strangely I had yet come across having to deal with adding the url field on a form and having to have it appear on Service Portal. I find it interesting that url field functionality doesn't work the same in SP.
For some having issues with url fields not appearing in the Service Portal, the problem may be that the field is added to the Self Service view and not the Service Portal view. Service Portal form page uses the Service Portal view by default. Thus either add the url fields to the Service Portal view or tack on "&view=sp" at the end of the url when navigating to the form page in Service Portal.
Now for the functionality I thought I would try not to clone the form widget (widget-form) and come up with a simple widget leveraging the $sp.getForm api, using our knowledge about creating views and using url parameters.
First thing I did was create a new view for the incident form. In this demo I created the view "Links" and just added the url fields to this view.
Second, I created the custom widget.
HTML:
<div class="panel panel-body">
<form>
<!--div ng-repeat="formfield in data.formFields"-->
<div ng-repeat="formfield in c.urlLinks">
<label for="sp_formfield_{{formfield.name}}">{{formfield.label}}</label>
<div class="input-group" ng-if="!formfield.lock">
<input type="url" class="form-control" id="sp_formfield_{{formfield.name}}" ng-model="links[formfield.name]" aria-describedby="sp_formfield_{{formfield.name}}">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="setLink(formfield)">
<i class="fa fa-unlock"></i>
</button>
</span>
</div>
<div class="url-container wrapper-xs m-l-sm" disabled ng-if="formfield.lock">
<a ng-href="{{formfield.value}}">{{formfield.value}}</a>
<span class><button class="url-button" ng-click="setLink(formfield)">
<i class="fa fa-lock"></i>
</button>
</span>
</div>
</div>
</form>
</div>
CSS:
.url-container {
position: relative;
}
.url-button {
position: absolute;
top:0;
right:0;
padding: 5.5px 12px;
}Server:
(function() {
// get the same parameters the OOB form widget uses from the url
data.table = $sp.getParameter('table');
data.sys_id = $sp.getParameter('sys_id');
// use the .getForm() api to grab the form data
data.formFields = $sp.getForm(data.table,data.sys_id /*'a1a0199bdb761700860bd421cf9619c3'*/,null,"Links")._fields
// handle the changes to any of the url fields
if(input){
for (var field in data.formFields){
// continue to the next url field if there is no change for the current
if(data.formFields[field].value == input.formFields[field].value)
continue;
// if there is a new url update the record appropriately
var record = new GlideRecord(data.table);
record.get(data.sys_id);
if(record.getUniqueValue){
record.setValue(input.formFields[field].name, input.formFields[field].value);
record.update();
}
}
}
})();Client Controller:
function($rootScope, $scope) {
var c = this;
//setup a variable to hold the url field data
$scope.links = {}
//bring the url field data to the client side
c.urlLinks = c.data.formFields;
//add a lock/unlock state dependent upon the value
angular.forEach(c.urlLinks,function setLinks(item){
if(item.value){
item.lock = true;
}
else{
item.lock = false;
}
$scope.links[item.name] = item.value;
})
// function to set lock/unlock state and update link values
$scope.setLink = function(formfield){
if(!formfield.lock && !$scope.links[formfield.name])
return;
if(formfield.value == $scope.links[formfield.name])
formfield.value = $scope.links[formfield.name];
else{
formfield.value = $scope.links[formfield.name];
c.server.update()
})
}
formfield.lock = !formfield.lock;
}
}Third I changed the layout of the form page to add my custom widget on the right side.
It needs more work but It's a basic start and I'm sure it could be done many different ways.
Hi Chris,
I have set up the view for the links like you have in the CMS, but when I load the page they are there, once loaded they vanish, leaving me with the form below. So when I go to set up the widget on the portal page, obviously the widget is empty. I have not seen this behavior before, so I am a little confused.
I can't think of what I have 'set' that will make the fields vanish, they are there, but for some unknown reason to me, they stop appearing.
Suggestions?
