...
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".
| Code Block | ||
|---|---|---|
| ||
<div class="input-group" data-ex-bind="field" data-ex-fieldid="ODO.Start">
<span data-ex-attribute="label" class="input-group-addon">ODO</span>
<input data-ex-attribute="value" type="number" class="form-control" min="0">
</div> |
We need to add three tabs "Things to Take", "Report Issue" and "Change Driver" while making first tab "Things to Take" 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> |
Now, we need to add contentcontents/fields to each tab.
| Code Block | ||
|---|---|---|
| ||
<div id="vehicleCheckTabContent" class="tab-content">
</div> |
We need to display special instructions (if exist) in "Things to Take" tab. To bind with "SpecialInstrunctions" 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, user can report any issue and can replace vehicle as well.
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".
| Code Block | ||
|---|---|---|
| ||
<div id="vehicleCheckTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane in" id="report">
<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>
</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".
| Code Block | ||
|---|---|---|
| ||
<div id="vehicleCheckTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane in" id="report">
<button class="pull-right 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".
| Code Block | ||
|---|---|---|
| ||
<div id="vehicleCheckTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane in" id="report">
<div class="input-group">
<span class="input-group-addon">Select Replacement Vehicle</span>
<select 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> |