| Table of Contents |
|---|
...
We need to replicate fields in Web application as exist in WPF application after adding static header Vehicle code/rego.
2.1.1 Rego/License No
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> |
2.1.2 ODO
To add ODO input field; use data-ex-bind to "field" and data-ex-fieldid to "ODO.Start".
...
| 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> |
2.1.3 Report Issue
In Report Issue tab, user can report any issue and can replace vehicle as well.
...
| Code Block | ||
|---|---|---|
| ||
<div class="input-group" data-ex-bind="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> |
2.1.4 Get Vehicles
Now, we need to list down all vehicles registration number, and show them in drop-down list once user press Get Vehicles button.
...
| Code Block | ||
|---|---|---|
| ||
<div class="input-group"> <span class="input-group-addon">Select Replacement Vehicle</span> <select class="form-control" data-ex-bind="datafield" data-ex-fieldid="UDefInt" data-ex-populatemethod="listReplacementVehicles" data-ex-autopopulate="0"> </select> </div> |
2.1.5 Apply Vehicle Change
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.
2.1.6 Assign Me as Replacement
In last tab, Change Driver, user can assign vehicle using button Assign Me as Replacement with binding to method "assignMeAsReplacementDriver".
| Code Block | ||
|---|---|---|
| ||
<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> |
2.1.7 Supporting Items Onboard and Vehicle Check Done
Now, user can mark both fields Supporting Items Onboard and Vehicle Check Done.
...
| Code Block | ||
|---|---|---|
| ||
<div data-ex-bind="field" data-ex-fieldid="HideCompletedChildren"> <input id="vehicleCheckComplete" type="checkbox" data-ex-attribute="value" /> <label for="vehicleCheckComplete" class="form-control" data-ex-attribute="label">Hide Dropped Off</label> </div> <div data-ex-bind="field" data-ex-fieldid="ODO.Finish"> <span data-ex-attribute="label" class="input-group-addon"></span> <input data-ex-attribute="value" type="number" class="form-control" min="0"> </div> |
2.5 Roster
Roster application shows a list of drivers in order they have to perform duties for specific date range.
To build Roster page, we need to see traffic debug and XML request to identify activity name and style.
...