“We are what we repeatedly do. Excellence, then, is not an act, but habit.”
— Aristotle
The other day I was using my sn-record-picker Helper to create a picker that allowed multiple selections and I discovered that there were a couple of undetected errors in there that needed to be cleaned up. I rarely have an occasion to use the multiple=”true” option, so I never noticed the issues before. The first one was relatively simple: there was an extra trailing quote in the generated code for the multiple attribute. That was easy enough to fix. The other one was a little more complicated. The live example of the configured picker was never set up to handle multiple selections. That seemed like it would be a relatively easy fix, but it turned out to be a little more complicated than I realized.
My first thought was to just add the multiple attribute to the tag, and set the value to the value of the checkbox on the form, thinking that it would resolve to true or false and take care of the problem.
<snh-form-field
snh-model="c.data.liveExample"
snh-name="liveExample"
snh-label="Live Example"
snh-type="reference"
snh-change="optionSelected()"
placeholder="{{c.data.placeholder}}"
table="c.data.table.value"
display-field="c.data.displayField.value"
display-fields="c.data.displayFields.value"
value-field="c.data.valueField.value"
search-fields="c.data.searchFields.value"
default-query="c.data.filter"
multiple="c.data.multiple">
Unfortunately, that didn’t work. It didn’t really do anything bad, it just did not render out as a multiple selection picker, even when I checked the box. I thought maybe that it needed to be interpreted/resolved, so I surrounded the variable with double curly braces.
multiple="{{c.data.multiple}}">
Things really went South at that point. The whole thing crashed with the following error:
invalid key at column 2 of the expression [{{c.data.multiple}}] starting at [{c.data.multiple}}].
So, I tried a number of other, different things, none of which seemed to do the trick. Apparently, you have to hard-code the value of that attribute to true or it just won’t work. So much for making it dynamic. So, in the end, I had to create two versions of the element, one for single and another nearly identical one for multiple, and then show or hide them based on the value of the c.data.multiple variable.
<snh-form-field
ng-hide="c.data.multiple"
snh-model="c.data.liveExample"
snh-name="liveExample"
snh-label="Live Example"
snh-type="reference"
snh-change="optionSelected()"
placeholder="{{c.data.placeholder}}"
table="c.data.table.value"
display-field="c.data.displayField.value"
display-fields="c.data.displayFields.value"
value-field="c.data.valueField.value"
search-fields="c.data.searchFields.value"
default-query="c.data.filter">
</snh-form-field>
<snh-form-field
ng-show="c.data.multiple"
snh-model="c.data.liveExample"
snh-name="liveExample"
snh-label="Live Example"
snh-type="reference"
table="c.data.table.value"
display-field="c.data.displayField.value"
display-fields="c.data.displayFields.value"
value-field="c.data.valueField.value"
search-fields="c.data.searchFields.value"
default-query="c.data.filter"
multiple="true">
</snh-form-field>
Not the most elegant solution, but it does work, so there’s that. One thing that did not work on the multiple version was the modal pop-up on change. That works pretty slick on the single selection version, but on the multiple, the change event never fires. I played around with that for a while looking for a solution, but I finally gave up and just removed that attribute from the multiple version, since it didn’t actually do anything. On the multiple version, everything that you have selected is already displayed right there in front of you, so I figured that we weren’t losing all that much by my not finding a ready solution to the problem.
So that’s it: two little fixes. It’s not all that much, but it does correct a couple of annoying little problems, so here’s a fresh Update Set with the corrections in place.
Update: There is a better (corrected further) version here.