- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-13-2022 11:20 PM
Hi All,
Please help me with this requirement:
1. Create Catalog item "Access Request" and Create variables as shown in the SS i.e. Category,Short Description, Incorrect Serial Number,Correct Serial Number.
2. Create Add button.
3. When clicked on Add button, data should be pushed in table in below format. (as seen in SS)
Hint - To create add button, use variable type - Custom. On that you need to create widget and add it in the variable's widget.
This should be done in service portal only.
After inserting the data when clicked on add button the data should be pushed in table.
Thanks
Sweenal Umredkar
Solved! Go to Solution.

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-14-2022 06:14 AM
Here is a SAMPLE , you will have to take it from there and make it work accordingly though ! I will point out that you need to have portal experience one more time !
Widget HTML
<button type="button" class="btn btn-success" ng-click="c.add()">Add</button>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.storage track by $index">
<th scope="row">{{$index}}</th>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
Widget Controller
api.controller = function ($scope) {
/* widget controller */
var c = this;
c.storage = [];
c.add = function () {
// store only if button clicked
c.storage.push({
name: c.name,
age: c.age,
});
};
// look for changes !
$scope.$watch(
function () {
return $scope.page.g_form.getValue("age");
},
function (age) {
c.age = age;
c.name = $scope.page.g_form.getValue("name");
}
);
};
How it looks

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-14-2022 06:14 AM
Here is a SAMPLE , you will have to take it from there and make it work accordingly though ! I will point out that you need to have portal experience one more time !
Widget HTML
<button type="button" class="btn btn-success" ng-click="c.add()">Add</button>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.storage track by $index">
<th scope="row">{{$index}}</th>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</tbody>
</table>
Widget Controller
api.controller = function ($scope) {
/* widget controller */
var c = this;
c.storage = [];
c.add = function () {
// store only if button clicked
c.storage.push({
name: c.name,
age: c.age,
});
};
// look for changes !
$scope.$watch(
function () {
return $scope.page.g_form.getValue("age");
},
function (age) {
c.age = age;
c.name = $scope.page.g_form.getValue("name");
}
);
};
How it looks
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-14-2022 07:26 AM
Thanks for your solution.It Helped me

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-14-2022 07:49 AM
your welcome !
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-14-2022 04:29 AM
Hi,
I would suggest to keep it OOB
Regards
Ankur
Ankur
✨ Certified Technical Architect || ✨ 9x ServiceNow MVP || ✨ ServiceNow Community Leader
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
‎03-14-2022 05:28 AM
Hi,
Ok Thanks for your time and guidance.
But i need to create it by widget only .
Thanks and Regards
Sweenal