Service Portal show and save choice list value in a field

[ParasRaibagkar]

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]

@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.