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

patricklatella
Mega Sage

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>
1 ACCEPTED SOLUTION

 <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">
 <option value="">--None--</option>-->
 <option value="1">Help Desk</option>
 <option value="2">IT</option>
 <option value="3">Payroll</option>
 </select>
 </div>

View solution in original post

22 REPLIES 22

patricklatella
Mega Sage

I think my reference fields are part of the problem...have you ever build a reference field this way?

for me, the form is getting displayed correctly and the code is working fine,

find_real_file.png

 

huh...ok...is that screen shot from the script I put in last?  did those fields show "--None--" on load?

Shweta KHAJAPUR
Tera Guru

Please copy paste below code and try once,

<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="">--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="">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="">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>

 

 

Client script,

function(spUtil) {
 
 var c = this;
	
spUtil.addInfoMessage('technology is '+c.data.technology);
 c.addItem = function(){
 var tech = c.data.technology;
 spUtil.addInfoMessage('technology is '+tech);
 c.server.update().then(function(response){
 
 })
 
 }
 
 
}

I put in your code and it now does load properly, except the "Technology" variable is not mandatory.  Also, I don't think the value from the "Requested by" variable is being passed to the client script.  is it doing that properly for you?