...
We need to replicate fields in Web application as exist in WPF application after adding static header Vehicle code/rego.
To add static field "Rego/License No:"; use data-ex-bind to "field", and data-ex-fieldid to "Vehicle.RegoLicenceNo".
| Code Block | ||
|---|---|---|
| ||
<div class="input-group" data-ex-bind="field" data-ex-fieldid="Vehicle.RegoLicenceNo"> <label data-ex-attribute="label" class="control-label"></label> <span data-ex-attribute="value" class="form-control-static"></span> </div> |
To add ODO input field; use data-ex-bind to "field" and data-ex-fieldid to "ODO.Start".
...
We need to add three tabs "Things to Take", "Report Issue" and " and Change Driver" while while making first tab "Things to Take" as as active tab.
| Code Block | ||
|---|---|---|
| ||
<ul id="vehicleCheckTabs" class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"> <a href="#things" id="things-tab" role="tab" data-toggle="tab">Things To Take</a> </li> <li role="presentation"> <a href="#report" role="tab" id="report-tab" data-toggle="tab">Report Isssue</a> </li> <li role="presentation"> <a href="#driverChange" role="tab" id="driverChange-tab" data-toggle="tab">Change Driver</a> </li> </ul> |
...
We need to display special instructions (if exist) in "Things to Take" tab. To bind with "SpecialInstrunctions" field field; use data-ex-bind to"field" and data-ex-fieldid to "SpecialInstructions".
| Code Block | ||
|---|---|---|
| ||
<div id="vehicleCheckTabContent" class="tab-content"> <div role="tabpanel" class="tab-pane active in" id="things" data-ex-bind="field" data-ex-fieldid="SpecialInstructions"> <p style="padding-top: 10px; padding-bottom: 10px" class="col-xs-12" data-ex-attribute="value" data-ex-renderashtml="true"></p> </div> </div> |
In "Report Issue" tab tab, user can report any issue and can replace vehicle as well.
...
Now, we need to list down all vehicles registration number, and show them in drop-down list once user press "Get Vehicles" button button.
To fetch data from service, use data-ex-bind="method" data-ex-method="listReplacementVehicles".
| Code Block | ||
|---|---|---|
| ||
<button class="pull-right btn btn-primary btn-lg" style="margin: 0 5px;" data-ex-bind="method" data-ex-method="listReplacementVehicles"> Get Vehicles </button> |
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".
...
To apply vehicle change, user need to press "Apply Vehicle Change". To apply this we need to bind method to "applyVehicleChange".
...
Now if you build and run, you can see Vehicle check page.
In last tab, "Change Driver", user can assign vehicle using button "Assign Me as Replacement" with with binding to method "assignMeAsReplacementDriver".
...
Now, user can mark both fields "Supporting Items Onboard" and " and Vehicle Check Done".
| Code Block | ||
|---|---|---|
| ||
<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> |
...