“It is amazing what you can accomplish if you do not care who gets the credit.”
— Harry Truman
At the end of our last installment in this series we had coded all of the client-side functions to add and remove Buttons/Icons and Reference Pages, but still needed to create the modal widgets needed to edit the values for those. The Button/Icon editor is the more complex of the two, plus it’s the first one that we encounter on the page, so let’s start with that one, and as usual, let’s start with the HTML.
<div>
<form name="form1">
<snh-form-field
snh-model="c.widget.options.shared.label"
snh-name="label"
snh-required="true"/>
<snh-form-field
snh-model="c.widget.options.shared.name"
snh-name="the_name"
snh-label="Name"
snh-required="true"/>
<snh-form-field
snh-model="c.widget.options.shared.heading"
snh-name="heading"/>
<snh-form-field
snh-model="c.widget.options.shared.icon"
snh-name="icon"
snh-type="icon"/>
<snh-form-field
snh-model="c.widget.options.shared.color"
snh-name="color"
snh-type="select"
snh-choices='[
{"label":"default","value":"default"},
{"label":"primary","value":"primary"},
{"label":"secondary","value":"secondary"},
{"label":"success","value":"success"},
{"label":"danger","value":"danger"},
{"label":"warning","value":"warning"},
{"label":"info","value":"info"},
{"label":"light","value":"light"},
{"label":"dark","value":"dark"},
{"label":"muted","value":"muted"},
{"label":"white","value":"white"}]'/>
<snh-form-field
snh-model="c.widget.options.shared.hint"
snh-name="hint"/>
<div id="element.example" class="form-group">
<div id="label.example" class="snh-label" nowrap="true">
<label for="example" class="col-xs-12 col-md-4 col-lg-6 control-label">
<span id="status.example"></span>
<span title="Example" data-original-title="Example">Example</span>
</label>
</div>
<span class="input-group">
<a ng-if="!c.widget.options.shared.icon" href="javascript:void(0)" role="button" class="btn-ref btn btn-{{c.widget.options.shared.color || 'default'}}" title="{{c.widget.options.shared.hint}}" data-original-title="{{c.widget.options.shared.hint}}">{{c.widget.options.shared.label}}</a>
<a ng-if="c.widget.options.shared.icon" href="javascript:void(0)" role="button" class="btn-ref btn btn-{{c.widget.options.shared.color || 'default'}}" title="{{c.widget.options.shared.hint}}" data-original-title="{{c.widget.options.shared.hint}}">
<span class="icon icon-{{c.widget.options.shared.icon}}" aria-hidden="true"></span>
<span class="sr-only">{{c.widget.options.shared.hint}}</span>
</a>
</span>
</div>
</form>
<div style="width: 100%; padding: 5px 50px; text-align: right;">
<button ng-click="cancel()" class="btn btn-default ng-binding ng-scope" role="button" title="Click here to cancel this edit">Cancel</button>
<button ng-click="save()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to save your changes">Save</button>
</div>
</div>
Pretty standard stuff. There are just a few more fields here than with some of the other things that we have been editing in a pop-up window, and one of them happens to be the new icon field type. Also, there is an “Example” field to show you what the Button/Icon will look like based on the values that you have entered. Here’s how it looks in action:
Other than the additional fields, it’s pretty much the same as the others, and the client-side code is virtually identical to what we have used in the past, with the one exception of having to assign spModal to the $scope so that it can be available to the Icon Picker.
function ButtonIconEditor($scope, $timeout, spModal) {
var c = this;
$scope.spModal = spModal;
$scope.selectIcon = function() {
spModal.open({
title: 'Select Icon',
widget: 'icon-picker',
buttons: [
{label: '${Cancel}', cancel: true}
],
size: 'sm',
}).then(function(response) {
c.widget.options.shared.icon = response.selected;
});
};
$scope.cancel = function() {
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(0).click();
});
};
$scope.save = function() {
if ($scope.form1.$valid) {
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(1).click();
});
} else {
$scope.form1.$setSubmitted(true);
}
};
$timeout(function() {
angular.element('[class*="modal-footer"]').css({display:'none'});
}, 100);
}
As with our other pop-up editor widgets, there is no server-side code, so that’s the entire widget. The Reference Page editor is even simpler.
<div>
<form name="form1">
<snh-form-field
snh-type="reference"
snh-model="c.widget.options.shared.table"
snh-name="table"
snh-change="buildFieldFilter();"
snh-required="true"
placeholder="Choose a Table"
table="'sys_db_object'"
display-field="'label'"
display-fields="'name'"
value-field="'name'"
search-fields="'name,label'"/>
<snh-form-field
snh-type="reference"
snh-model="c.widget.options.shared.page"
snh-name="page"
snh-required="true"
placeholder="Choose a Portal Page"
table="'sp_page'"
display-field="'title'"
display-fields="'id'"
value-field="'id'"
search-fields="'id,title'"/>
</form>
<div style="width: 100%; padding: 5px 50px; text-align: right;">
<button ng-click="cancel()" class="btn btn-default ng-binding ng-scope" role="button" title="Click here to cancel this edit">Cancel</button>
<button ng-click="save()" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to save your changes">Save</button>
</div>
</div>
Here, we just have two sn-record-pickers, one for the reference table and the other for the portal page that you want to bring up whenever someone clicks on a reference value from that table. And once again, the client-side code looks very familiar.
function ReferencePageEditor($scope, $timeout) {
var c = this;
$scope.cancel = function() {
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(0).click();
});
};
$scope.save = function() {
if ($scope.form1.$valid) {
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(1).click();
});
} else {
$scope.form1.$setSubmitted(true);
}
};
$timeout(function() {
angular.element('[class*="modal-footer"]').css({display:'none'});
}, 100);
}
That takes care of everything that we discussed last time, but last time we neglected to make allowances for a couple of very import features: the ability to add a new Table and the ability to remove a Table. Since each Perspective has its own list of Tables, we will need to add a New Table button at the bottom of the list for each Perspective. To remove a Table, we can just add a Delete icon next to the Table name for that purpose. That will change the basic HTML structure to now look like this:
<div>
<h4 class="text-primary">${Tables}</h4>
</div>
<uib-tabset active="active">
<uib-tab ng-repeat="persp in c.data.config.perspective track by persp.name" heading="{{persp.label}}">
<div ng-repeat="tbl in c.data.config.table[persp.name] track by tbl.name" style="padding-left: 25px;">
<h4 style="color: darkblue">
{{tbl.displayName}}
({{tbl.name}})
<img src="/images/delete_row.gif" ng-click="deleteTable(persp.name, tbl.name)" alt="Click here to permanently delete table {{tbl.name}} from this Perspective" title="Click here to permanently delete table {{tbl.name}} from this Perspective" style="cursor: pointer;"/>
</h4>
<uib-tabset active="active">
<uib-tab ng-repeat="state in c.data.config.state track by state.name" heading="{{state.label}}">
<div style="padding-left: 25px;">
<!----- all of the specific properties are defined here ----->
</div>
</uib-tab>
</uib-tabset>
</div>
<div style="width: 100%;">
<button ng-click="newTable(persp.name)" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to add a new table to the {{persp.label}} perspective">Add a new Table</button>
</div>
</uib-tab>
</uib-tabset>
And of course, we will need functions to handle both the Table Add and Table Remove processes. For the Add, let’s use a pop-up Table selector that will allow you to select a Table from a list. For the Delete, we can adapt one of the other Delete functions that we have already written.
$scope.deleteTable = function(perspective, tableName) {
var confirmMsg = '<b>Delete Table</b>';
confirmMsg += '<br/>Deleting the ';
confirmMsg += tableName;
confirmMsg += ' Table will also delete all information for that Table in every State in this Perspective.';
confirmMsg += '<br/>Are you sure you want to delete this Table?';
spModal.confirm(confirmMsg).then(function(confirmed) {
if (confirmed) {
var a = -1;
for (var b=0; b<c.data.config.table[perspective].length; b++) {
if (c.data.config.table[perspective][b].name == tableName) {
a = b;
}
}
c.data.config.table[perspective].splice(a, 1);
}
});
};
The function to pop open the modal Table Selector widget is quite familiar as well.
$scope.newTable = function(perspective) {
var shared = {};
spModal.open({
title: 'Table Selector',
widget: 'table-selector',
shared: shared
}).then(function() {
c.data.config.table[perspective].push(shared);
});
};
… and the widget itself we can clone from the Reference Page widget, which already had a Table picker defined.
<div>
<form name="form1">
<snh-form-field
snh-type="reference"
snh-model="c.data.table"
snh-name="table"
snh-change="tableSelected();"
snh-required="true"
snh-help="Choose a Table to be added to this Perspective"
placeholder="Choose a Table"
table="'sys_db_object'"
display-field="'label'"
display-fields="'name'"
value-field="'name'"
search-fields="'name,label'"/>
</form>
</div>
Since all we want them to do is to select a table, we can use an snh-change to call the function and send back the selection.
function TableSelector($scope, $timeout) {
var c = this;
$scope.tableSelected = function() {
if (c.data.table.value > '') {
c.server.update().then(function(response) {
c.widget.options.shared.name = response.table.value;
c.widget.options.shared.displayName = response.table.displayValue;
$timeout(function() {
angular.element('[ng-click*="buttonClicked"]').get(1).click();
});
});
}
};
}
On server side, we just make sure that we have both a table name and a display name.
(function() {
data.table = {};
if (input && input.table && input.table.value) {
data.table = input.table;
if (!data.table.displayValue) {
data.table.displayValue = getItemName(data.table.value);
}
}
function getItemName(key) {
var ciGR = new GlideRecord(key);
return ciGR.getLabel();
}
})();
That pretty much wraps up all of the editing functions. We still need to throw in some code to save all of the changes, but that might get pretty involved, so let’s say we save that for our next installment.
