Page Comparison

...

In "Report Issue" tab, user can report any issue and can replace vehicle as well.

<div id="vehicleCheckTabContent" class="tab-content">
	<div role="tabpanel" class="tab-pane in" id="report">
	</div>
</div>

To report issue we need to create text field to enter issue and then button to report/save issue. To bind field data, use data-ex-fieldid to "Vehicle.Issues.Issue". To bind button to Save method, use type="submit", data-ex-contextobject='Vehicle.Issues', data-ex-bind="method", data-ex-method="Save".

<div id="vehicleCheckTabContent" class="tabinput-contentgroup">


	<div role data-ex-bind="tabpanel" class="tab-pane in" id="report">

		<div class="input-group" data-ex-bind="field" data-ex-field" data-ex-fieldid="Vehicle.Issues.Issue">
			<input id="issueToReport" x-webkit-speech type="text" class="form-control" placeholder="Enter Issue..." data-ex-attribute="value">
			<span class="input-group-btn">
				<button id="reportIssue" class="btn btn-default" type="submit" data-ex-contextobject='Vehicle.Issues' data-ex-bind="method" data-ex-method="Save">Report</button>
			</span>
		</div>


	</div>

</div>

Now, we need to list down all vehicles registration number, and show them in drop-down list once user press "Get Vehicles" button.

To fetch data from service, use data-ex-bind="method" data-ex-method="listReplacementVehicles".

<div id="vehicleCheckTabContent" <button class="tabpull-content">right btn 
	<div role="tabpanel" class="tab-pane in" id="report">


		<button class="pull-right btn btn-primary btn-btn-primary btn-lg" style="margin: 0 5px;" data-ex-bind="method" data-ex-method="listReplacementVehicles">
			Get Vehicles
		</button>


	</div>
</div>

To select specific Vehicle number, and bind selected field, use data-ex-bind="datafield" data-ex-fieldid="UDefInt" so that selected vehicle is passed to service using field "UDefInt".

<div idclass="vehicleCheckTabContent"input-group">
	<span class="tabinput-group-contentaddon">>Select Replacement Vehicle</span>
	<div<select role="tabpanel" class="tab-pane in" id="report">


		<div class="input-group">
			<span class="input-group-addon">Select Replacement Vehicle</span>
			<select class="class="form-control" style="height: 43px;" data-ex-bind="datafield" data-ex-fieldid="UDefInt" data-ex-populatemethod="listReplacementVehicles" data-ex-autopopulate="0">
			</select>
		</div>


	</div>
</div>

To apply vehicle change, user need to press "Apply Vehicle Change". To apply this we need to bind method to "applyVehicleChange".

<button class="pull-right btn btn-primary btn-lg" data-ex-bind="method" data-ex-method="applyVehicleChange">
	Apply Vehicle Change
</button>

Now if you build and run, you can see Vehicle check page.

Image Added

In last tab, "Change Driver", user can assign vehicle using button "Assign Me as Replacement" with binding to method "assignMeAsReplacementDriver".

<div id="vehicleCheckTabContent" class="tab-content">
	<div role="tabpanel" class="tab-pane in" id="driverChange">
		<button class="pull-right btn btn-primary btn-lg" data-ex-bind="method" data-ex-method="assignMeAsReplacementDriver">
			Assign Me as Replacement
		</button>
	</div>
</div>

Image Added

Now, user can mark both fields "Supporting Items Onboard" and "Vehicle Check Done".

<div class="input-group" data-ex-bind="field" data-ex-fieldid="SupportingItemsOnboard">
	<input id="SupportingItemsOnboard" type="checkbox" data-ex-attribute="value" />
	<label for="SupportingItemsOnboard" class="form-control" data-ex-attribute="label">Supporting Items Onboard</label>
</div>

<div class="input-group" data-ex-bind="field" data-ex-fieldid="VehicleCheckDone">
		<input id="vehicleCheckComplete" type="checkbox" data-ex-attribute="value" />
		<label for="vehicleCheckComplete" class="form-control" data-ex-attribute="label">Vehicle Check Completed</label>
</div>

Image Added

----------------------------------------------------------------------------------------------------------------End Vehicle Check--------------------------------------------------------------------------------------------