Service Portal show and save choice list value in a field

ParasRaibagkar · 3 weeks ago

Hi All,

Hope you are doing great!.

I have a choice list in a ServiceNow record, I want to display the field as list dropdown in a service portal widget that I have.
I am in Australia version, and I have tried using select2 component and the sn-choice-list component.
In sn-choice-list component, the dropdown is rendered, but the values do not populate. Current Code:

<div class="row add-margin-left-right-minus-10">
            <div class="col-md-6 add-padding-left-right-10">
              <div class="form-group">
                <label for="event_category">
                  <span>${Event Category}</span>
                </label>
                  <sn-choice-list
					sn-model="eventCategory"
					sn-items="eventCategoryChoices"
					 sn-value-field="value"
       			 	sn-label-field="label"
					>
              </div>
            </div>
          </div>

scope.eventCategoryChoices = [
        {
          value: "conference",
          name: "Conference",
        },
        {
          value: "townhall",
          label: "Townhall",
        },
      ];

I do not see the values Conference and Townhall in the dropdown, instead it's just a empty list:

While using select2 component, the code was:

 <div
                  id="event_category"
                  select2
                  select2-options="eventCategorySelect2Options"
                  ng-model="eventCategory"
                ></div>

var eventCategoryChoices = [
        {
          id: "conference",
          text: "Conference",
        },
        {
          id: "townhall",
          text: "Townhall",
        },
      ];
      scope.eventCategorySelect2Options = {
		data: eventCategoryChoices,
		minimumResultsForSearch: 0
	};

scope.eventCategory = "";

Please guide me, what am I doing wrong here? Please provide the correct code.

Sandeep Rajput · 3 weeks ago

@ParasRaibagkar Here is the fix for you.

HTML

<div class="row add-margin-left-right-minus-10">
            <div class="col-md-6 add-padding-left-right-10">
              <div class="form-group">
                <label for="event_category">
                  <span>${Event Category}</span>
                </label>
                  <sn-choice-list
					sn-model="c.eventCategory"
					sn-items="data.eventCategoryChoices"
					 sn-value-field="value"
       			 	sn-label-field="label"
					/>
              </div>
            </div>
          </div>

Server script.

(function($scope) {
    /* populate the 'data' object */
    /* e.g., data.table = $sp.getValue('table'); */
    data.eventCategoryChoices = [{
            value: "conference",
            label: "Conference",
        },
        {
            value: "townhall",
            label: "Townhall",
        },
    ];

})();

Here is the final output.

Vikram Reddy · 3 weeks ago

Hi @ParasRaibagkar,

Rename sn-label-field to sn-text-field in your markup, that's the fix.

sn-label-field is not a real attribute on the sn-choice-list directive. It's an undocumented, community-reverse-engineered control (there's no page for it on docs.servicenow.com, the underlying script lives at scripts/sn/common/controls/directive.snChoiceList.js), and the scope binding it actually reads for display text is sn-text-field. Since Angular silently ignores attributes a directive doesn't declare, your label mapping just gets dropped, leaving you with a select that has values wired up but nothing to show for them, which lines up with what your screenshot shows: the search box opens fine and there's an empty highlighted row underneath with no text in it.

Swap the attribute: use sn-text-field instead of sn-label-field.
Fix the item keys: your first choice object uses "name" and the second uses "label", they need to match each other and match whatever you put in sn-value-field/sn-text-field.
Keep sn-value-field="value" as is, that part was already correct.

Corrected code:

<sn-choice-list
  sn-model="eventCategory"
  sn-items="eventCategoryChoices"
  sn-value-field="value"
  sn-text-field="text"
>
</sn-choice-list>

scope.eventCategoryChoices = [
  { value: "conference", text: "Conference" },
  { value: "townhall", text: "Townhall" }
];

One thing that would change my answer: are you setting eventCategoryChoices straight from the widget's Server Script data object, or populating it later via a GlideAjax call in the client controller? If it's the latter, sn-choice-list can miss updates that land outside Angular's initial digest, and you'd need a small $timeout or a watch on the array even after the attribute fix.

Given sn-choice-list is undocumented and a bit finicky, if the rename alone doesn't sort it, a plain select bound with ng-options and ng-model is a lot more predictable and worth falling back to.

Thank you,
Vikram Karety
Octigo Solutions INC

MaheshG95462175 · 3 weeks ago

One reply here suggests sn-label-field; another says that's wrong and the real attribute is sn-text-field. I checked this against several older, independent community threads (2018 "Setting Value of sn-choice-list," 2020 "How can I get the value of a sn-choice-list," 2021/2022 read-only and onChange threads) all of them consistently use sn-text-field, never sn-label-field. So the second reply is correct.
Working pattern, confirmed across those sources:

html
<sn-choice-list
sn-model="c.eventCategory"
sn-items="data.eventCategoryChoices"
sn-value-field="value"
sn-text-field="label">
</sn-choice-list>

javascript
// server script
data.eventCategoryChoices = [
{ value: "conference", label: "Conference" },
{ value: "townhall", label: "Townhall" }
];

Two things from the original code to fix regardless of the attribute name: the two choice objects used inconsistent keys (name vs label) they must match each other and match whatever key is passed to sn-value-field/sn-text-field.