Page Comparison

This chapter will guide you through the process of implementing new component to Web Portal using WPF SDK. We will also list down all WPF SDK process menus, and explains only menus that are used in Web Portal.

...

Adding new component

In this step, we will explain “How to add new JavaScript SDK component and render it as HTML page?”.

...

You can see empty “Chart of Accounts” page when you click on new menu.

...

Driver

We will list and explain all sub-menus of Driver menu.

...

Vehicle Check

Vehicle Check is used as safety measure application in which driver has to enter vehicle code/ODO and also check for any issue. If driver see any issue, he must need to report that issue and replace vehicle by finding another vehicle and assigning to himself. Then. he can mark "Vehicle  Check Done".

...

We need to replicate fields in Web application as exist in WPF application after adding static header Vehicle code/rego.

...

Rego/License No

To add static field Rego/License No; use data-ex-bind to "field", and data-ex-fieldid to "Vehicle.RegoLicenceNo".

<div class="input-group" data-ex-bind="field" data-ex-fieldid="Vehicle.RegoLicenceNo">
	<label data-ex-attribute="label" class="control-label"></label>
	&nbsp;
	<span data-ex-attribute="value" class="form-control-static"></span>
</div>

...

ODO

To add ODO input field; use data-ex-bind to "field" and data-ex-fieldid to "ODO.Start".

...

<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>

...

Report Issue

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

...

<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>

...

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.

...

<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>

...

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.

...

Assign Me as Replacement 

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>

...

Supporting Items Onboard and Vehicle Check Done

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>

...

Manifest

Manifest application is used to maintain passenger data in which driver on his vehicle pass on to some hotels and is supposed to pick passengers from that hotels. Passenger personal information is also maintained who take ride.

...

<div data-ex-bind="field" data-ex-fieldid="DriverNotes">
	<h3>Notes</h3>
	<textarea data-ex-attribute="value" style="width: 100%; height: 50px; resize: none;"></textarea>
	<button class="btn btn-primary">Save</button>
</div>

...

Menu

Menu app is used for Meal selections. Who would be supplier? How many guests are there? What are the selections of menu items? What is the estimated time of arrival?

...

<div>
	<table class="table mealMenuSelectionSummary" id="mealMenuSelectionSummary" data-ex-contextobject="WorkMealMenu" data-ex-bind="data" data-ex-populatemethod="publishSelectionsSummary">
	</table>
</div>

Notes

To add Notes field to Menu app, use data-ex-bind="field" data-ex-fieldid="WorkMealMenu.Notes".

<di  data-ex-bind="field" data-ex-fieldid="WorkMealMenu.Notes">
	<h3>Notes</h3>
	<textarea style="width: 100%; height: 50px;" data-ex-attribute="value"></textarea>
</di>

ETA

To add ETA field to Menu app, use data-ex-bind="field" data-ex-fieldid="WorkMealMenu.ETA".

<div data-ex-bind="field" data-ex-fieldid="WorkMealMenu.ETA">
	<span>ETA</span>
	<input id="mealMenuEta" tabindex="1" data-ex-attribute="value" type="number" class="form-control" />
</div>

Send Email

To add Send Email button to Menu app, specify type="button" data-ex-bind="method" data-ex-method="sendSelectionsEmail".

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

...

Return Manifest

Return Manifest application is opposite to Manifest application. In Manifest, passengers were picked up from hotels but in Return Manifest passengers are dropped off back to their places.

...

<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>

...

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.

...

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

...

Cash Count

Cash Count application is used to collect and count cash for Journal batches, find the discrepancy if exist, and reconcile cash based on cash collected and spent.

...

<button id="saveButton" tabindex="8" data-ex-bind="method" data-ex-method="MarkCounted">
	Save
</button>

...

Confirm Tomorrow

As Manifest application is used to maintain passenger data in which driver on his vehicle pass on to some hotels and is supposed to pick passengers from that hotels. Passenger personal information is also maintained who take ride. In Return Manifest passengers are dropped off back to their places.

...

<div>
	<a href="#" id="confirmManifest" data-ex-bind="method" data-ex-method="confirmManifestAndAvailability">
		Confirm Manifest
	</a>

	<a href="#" data-ex-bind="method" data-ex-method="rejectManifestAndAvailability">
		Reject Manifest
	</a>
</div>

...

Financials

We will list and explain all sub-menus of Financials menu.

...

Banking

To be added to Portal.

...

Assets

To be added to Portal.

...

Chart of Accounts

When user clicks new menu “Chart of Accounts”, program must display similar structure as displayed below containing tree-view and respective fields. For this project, only “Name” field was required to be displayed. So when user double clicks any leaf-node, program must raise a request to get data of that node from service, and then name of the clicked node must be displayed in “Name” field, then user can make any change to the field, and then changes must be saved so user can view that changes in WPF application.

...

You can see data changed in Name field was saved and can be viewed in WPF application.

...

Find/browse Journal

To be added to Portal.

...

General Journals

To be added to Portal.

...

Expense Claim

To be added to Portal.

...

Journal Batches

To be added to Portal.

...

Journal Templates

To be added to Portal.

...

Standard Reports

To be added to Portal.

...

GST Explorer

To be added to Portal.

...

Advanced

To be added to Portal.