Need help with script to build a select box type variable on a custom Service Portal form

[patricklatella]

Hi all,

I'm building a custom widget to present a custom form in Service Portal, and need to build a Select Box type variable...and I'm struggling with the script in the HTML field of the widget.  Here's where I'm at so far, I got this from Stackoverflow.com and am trying to manipulate for my need.  Anyone done this before?  Thanks!

<div class="select">
         <select [(ngModel)]="corporationObj" class="form-control col-lg-8" #corporation required>
             <option *ngFor="let corporation of corporations"></option>    
         </select>
         
     </div>

[patricklatella]

I'm realizing that this latest script is not passing the value from the variable to the data object either...so I'm missing that too

[Shweta KHAJAPUR]

Please write ng-model as below,

<div class="form-group">
 <label for="technology">What technology is this related to?</label>
 <select id="technology" name="technology"
 ng-model="technology" class="form-control" required>


<option value="0">None</option>
 <option value="1">Help Desk</option>
 <option value="2">IT</option>
 <option value="3">Payroll</option>
 </select>
 </div>

[Shweta KHAJAPUR]

Try below code,

<div class="form-group">
 <label for="technology">What technology is this related to?</label>
 <select id="technology" name="technology"
 ng-model="c.data.technology" ng-change="c.addItem()" class="form-control" required>


<option value="0">None</option>
 <option value="1">Help Desk</option>
 <option value="2">IT</option>
 <option value="3">Payroll</option>
 </select>
 </div>

Client script,

function($scope) {
 
 var c = this;
 
 console.log('technology is '+c.data.technology);
 c.addItem = function(){
 var tech = c.data.technology;
 console.log('technology is '+tech);
 c.server.update().then(function(response){
 c.data = {};
 })
 
 }
}

[patricklatella]

OK thanks, I tried that...the "ng-change="c.addItem()" part is causing the field to clear immediately after entering a value.

However, this script is now passing the value to the client, however it is still not showing "--None--" on load, and it's not mandatory

<div class="form-group">
<label for="technology">What technology is this related to?</label>
<select id="technology" name="technology"
ng-model="c.data.technology" class="form-control" required>
<option value="0">--None--</option>-->
<option value="1">Help Desk</option>
<option value="2">IT</option>
<option value="3">Payroll</option>
</select>
</div>

[patricklatella]

Hi Shweta,

so there's more going on in my HTML script...this is all meant to create a custom form that acts essentially like a record producer.  So here's my full script...there are issues with the fields as indicated:

<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">

<!-- Variables-->

<!-- Requested by : Reference field: THIS ONE IS NOT PASSING THE DATA OBJECT-->
<label>Requested by</label>
<!--<input class="form-control" ng-model="c.data.requested_by">-->
<sn-record-picker field="c.requested_by" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>
</div>

<!-- Affected user : Reference field: THIS ONE IS NOT PASSING THE DATA OBJECT-->
<div class="form-group">
<label>Affected user</label>
<!--<input class="form-control" ng-model="c.data.requested_by">-->
<sn-record-picker field="c.affected_user" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>
</div>

<!--What technology?- THIS ONE IS PASSING THE DATA OBJECT, BUT DOESN'T SHOW NONE ON LOAD AND ISN'T MANDATORY->
<div class="form-group">
<label for="technology">What technology is this related to?</label>
<select id="technology" name="technology"
ng-model="c.data.technology" class="form-control" required>
<option value="0">--None--</option>-->
<option value="1">Help Desk</option>
<option value="2">IT</option>
<option value="3">Payroll</option>
</select>
</div>

<!--Urgency: THIS ONE IS PASSING THE DATA OBJECT-->
<div class="form-group">
<label for="urgency">Urgency</label>
<select id="urgency" name="urgency"
ng-model="c.urgency" class="form-control">

<option value="0">--None--</option>
<option value="1">1 - High</option>
<option value="2">2 - Medium</option>
<option value="3">3 - Low</option>
</select>
</div>

<!--Impact : THIS ONE IS PASSING THE DATA OBJECT-->
<div class="form-group">
<label for="impact">Impact</label>
<select id="impact" name="impact"

ng-model="c.impact" class="form-control">
<option value="0">--None--</option>
<option value="1">1 - High</option>
<option value="2">2 - Medium</option>
<option value="3">3 - Low</option>
</select>
</div>

<!--Description: THIS ONE IS PASSING THE DATA OBJECT-->
<div class="form-group">
<label>Description</label>
<input class="form-control" ng-model="c.data.short_description">
</div>

<div class="form-group">
<input class="btn btn-primary btn-block" ng-click="c.addItem()" type="submit" value="Submit">
</div>
</div>
</div>