create record to table using Widget

[ha]

I want to create record to my custom table 'x_703225_booking_m_booking'

have fields:

1. start_date (date)
2. end_date(date)
3. purpose(choice),  choice: Travel, Business, Special events, Vacation, Amenities
4. people (Integer)

using Widget

[ha · Accepted solution]

HTML

<div class="form-container">
  <form class="form" ng-submit="submitForm()">
    
     <label>Start Date:</label>
    <input type="date" class="form-control" ng-model="start_date">
    <br>
    <label>End Date:</label>
    <input  type="date" class="form-control" ng-model="end_date">
    <br>
    
    <div class="field layout-2">
      <div class="sub-field">
        <h4>
          <span style="color:red;">*</span> Purpose </h4>
        <select class="form-control" ng-model="purpose"> <option value="">None</option>
          <option value="Travel">Travel</option> 
          <option value="Business">Business</option>
          <option value="Special events">Special events</option>
          <option value="Vacation">Vacation</option>
          <option value="Amenities and services">Amenities and services</option>
          <option value="Orther">Orther</option>
        </select>
      </div>
      
    </div>

    <div class="field">
      <h4>
        <span style="color:red;">*</span>People
      </h4>
      <input ng-model="people_number" type="text" class="form-control"/> </div>
    <div class="buttons">
      <button class="btn btn-primary" type="submit" ng-hide="submitting">
        Submit
      </button>
      <button class="btn btn-primary" type="submit" ng-show="submitting" disabled>
        Submitting...
      </button>
    </div>

CSS

.layout-2 {
  display: flex;
  gap:10px; .sub-field{ flex:1;
    h4{
    }
    color:#000;
    .field{ margin:10px 0; width:100%;
      h4{
      }
    }
    color:#000;
    .buttons{
      margin:10px 0;
    }
    

Client Script

api.controller=function($scope) { 
	/* widget controller */ 
	var c= this;
	$scope.submitting=false;
	$scope.submitForm=function(){
		$scope.submitting=true;
		// server call codes
		c.data.action="create_record";
		//c.data.user=g_user.userID;
		c.data.end_date=$scope.end_date;
		c.data.start_date=$scope.start_date;
		c.data.purpose=$scope.purpose;
		c.data.people_number=$scope.people_number;

		c.server.update().then(function(){
		});
	}
};

Server Script

(function() {
	/* populate the 'data' object */
	/* e.g., data.table = $sp.getValue('table'); */
	if(input) {
		if(input.action=="create_record"){
			createRecord(input);
		}
	}
})();

function createRecord(input){
	var gr=new GlideRecord("x_703225_booking_m_booking"); 
	gr.initialize();
	//gr.setValue('user',gs.getUserDisplayName()); 
	gr.setValue('start_date',input.start_date);
	gr.setValue('end_date',input.end_date);
	gr.setValue('purpose', input.purpose);
	gr.setValue('people_number', input.people_number);
	gr.insert();
	gs.addInfoMessage ("Hi "+ gs.getUserDisplayName());
}