Page Comparison

...

<button id="passengerNoShowButton" type="button" data-ex-bind="method" data-ex-method="sendSelectionsEmail" class="btn btn-lg btn-primary">
	Send Email
</button>

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.

...

In Roster app, we simply need two fields; From Date and To Date to enter From and End date respectively. We also need to have List Roster button so when user press it, all drivers will be listed for specified date range.

To pass From and To date to service, we need to bind these fields.

From date is bound to field "QueryDateRange.From" while To date is bound to "QueryDateRange.To". And "datepicker" adapter is used to show calendar to select date.

<div data-ex-bind="field" data-ex-fieldid="QueryDateRange.From">
	<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> From</span>
	<input type="text" data-ex-attribute="value" data-ex-adapter="datepicker" class="form-control">
</div>


<div data-ex-bind="field" data-ex-fieldid="QueryDateRange.To">
	<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> To</span>
	<input type="text" data-ex-attribute="value" data-ex-adapter="datepicker" class="form-control">
</div>

To get data from service we added button List Roster when pressed request is made to service so we would have all drivers available.

<button id="listDriverRoster" type="button" data-ex-bind="method" data-ex-method="listDriverRoster">
	List Roster
</button>

To display data returned from service, we need to display in table.

<table id="portalRoster" data-ex-bind="data" data-ex-populatemethod="listDriverRoster"></table>