“For every complex problem there is an answer that is clear, simple, and wrong.”
— H. L. Mencken
Now that we have completed all of the coding on the main widget, it is time to build the new Perspective Editor widget that we will launch in the modal dialog. This will be a simple form with three input fields for the three properties of a Perspective: Label, Name, and Roles. The first two will be simple text fields, but we can select the Roles from a list, so for that we can leverage our old friend, the sn-record-picker. Once again, we can start out with the HTML, just to see how things look.
<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="persp"
snh-label="Name"
snh-required="true"/>
<snh-form-field
snh-model="c.widget.options.shared.roles"
snh-name="roles"
snh-type="reference"
table="'sys_user_role'"
field="c.widget.options.shared.roles"
default-query="'active=true'"
display-field="'name'"
search-fields="'name'"
value-field="'name'"
multiple="true"/>
</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>
Basically, this is just three standard snh-form-field elements, the first two being of type text and the last one being of type reference, which is just a wrapper around the sn-record-picker. There are a couple of things to note here: 1) when I tried to use the word name for the name of the name field, it crashed the widget, so I called it persp instead, and 2) I ended up adding a couple of buttons to the layout, even though the spModal already provides buttons for you (more on that later). I’m not sure why using the word name crashed the widget, but I have a sinking feeling that there is some kind of bug in the snh-form-field code. I didn’t really feel like digging into that right at the moment, though, and changing the name fixed the problem, so I’m good for now. Here’s how it looks when it gets launched:
Now, about those buttons: if you don’t override the defaults, an spModal pop-up will have two standard buttons, Cancel and OK. I wanted to use those buttons, but I also wanted to validate the form, and I’m not smart enough to know how to insert form validation underneath the OK button so that it won’t just go right back to the main page and close the pop-up. I tried a few things, but nothing worked, so I ended up adding my own buttons, hiding the originals, but still clicking on them programmatically to obtain their original function. It’s pretty much a convoluted hack, but it gets the job done, so I’ll take it. Here is the client-side code that makes all of that work:
function PerspectiveEditor($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’s it. There is no server-side code on this one and no link code, so that’s the entire widget. That completes everything for the Perspectives section, and now that it all checks out, we can pretty much just copy it all to create the States section. Let’s start with the HTML:
<div>
<h4 class="text-primary">${States}</h4>
</div>
<div>
<table class="table table-hover table-condensed">
<thead>
<tr>
<th style="text-align: center;">Label</th>
<th style="text-align: center;">Name</th>
<th style="text-align: center;">Edit</th>
<th style="text-align: center;">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.config.state" ng-hide="item.removed">
<td data-th="Name">{{item.label}}</td>
<td data-th="Label">{{item.name}}</td>
<td data-th="Edit" style="text-align: center;"><img src="/images/edittsk_tsk.gif" ng-click="editState($index)" alt="Click here to edit the details of this State" title="Click here to edit the details of this State" style="cursor: pointer;"/></td>
<td data-th="Delete" style="text-align: center;"><img src="/images/delete_row.gif" ng-click="deleteState($index)" alt="Click here to permanently delete this State" title="Click here to permanently delete this State" style="cursor: pointer;"/></td>
</tr>
</tbody>
</table>
</div>
<div style="width: 100%; text-align: right;">
<button ng-click="editState('new')" class="btn btn-primary ng-binding ng-scope" role="button" title="Click here to add a new State">Add a new State</button>
</div>
This is just a line by line copy of the Perspectives section with the Roles column removed and the names changed. Let’s see how it looks.
It looks good, and it has been pretty easy so far. The client-side functions should also be quite similar, although removing and altering States in the Table section of the JSON object will be a little more involved, as a State object appears in every Table in every Perspective. We’ll have to throw in a couple of nested loops to deal with every one of those when things change. Other than that, though, everything else should be a wholesale copy of the same code used in the Perspective section. Here are the new client-side functions:
$scope.editState = function(i) {
var shared = {};
if (i != 'new') {
shared.label = c.data.config.state[i].label;
shared.name = c.data.config.state[i].name;
}
spModal.open({
title: 'State Editor',
widget: 'e4bdae0d2f3b60104425fcecf699b649',
shared: shared
}).then(function() {
if (i == 'new') {
for (var x1 in c.data.config.perspective) {
var p1 = c.data.config.perspective[x1].name;
for (var y1 in c.data.config.table[p1]) {
var table1 = c.data.config.table[p1][y1];
table1[shared.name] = {btnarray: [], refmap: {}};
}
}
i = c.data.config.state.length;
c.data.config.state.push({});
} else {
if (shared.name != c.data.config.state[i].name) {
for (var x2 in c.data.config.perspective) {
var p2 = c.data.config.perspective[x2].name;
for (var y2 in c.data.config.table[p2]) {
var table2 = c.data.config.table[p2][y2];
table2[shared.name] = table2[c.data.config.state[i].name];
table2[c.data.config.state[i].name] = null;
}
}
}
}
c.data.config.state[i].name = shared.name;
c.data.config.state[i].label = shared.label;
});
};
$scope.deleteState = function(i) {
var confirmMsg = '<b>Delete State</b>';
confirmMsg += '<br/>Deleting the ';
confirmMsg += c.data.config.perspective[i].label;
confirmMsg += ' State will also delete all information for that State in every Table in every Perspective.';
confirmMsg += '<br/>Are you sure you want to delete this State?';
spModal.confirm(confirmMsg).then(function(confirmed) {
if (confirmed) {
for (var x3 in c.data.config.perspective) {
var p3 = c.data.config.perspective[x3].name;
for (var y3 in c.data.config.table[p3]) {
var table3 = c.data.config.table[p3][y3];
table3[c.data.config.state[i].name] = null;
}
}
c.data.config.state.splice(i, 1);
}
});
};
Other than the loops through the Perspectives and Tables and the missing Roles, it’s pretty much the exact same code that we had for the previous section. Now all we need to do is clone the Perspective Editor to create the State Editor, and this section should be completed as well. Dropping the Roles and changing the names leaves the HTML for the State Editor looking like this:
<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="persp"
snh-label="Name"
snh-required="true"/>
</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>
There is virtually no change at all to the client-side code, and there isn’t any server-side code, so we’re done. That was easy! Here is what it looks like in action:
So now we have completed two of our three sections, which makes it sound like we are two-thirds of the way there, but the next section is quite a bit more complicated than the first two. Tackling that guy sounds like a good place to start next time out.
