Page Comparison

...

When you click this button, a message should appear in the message control you configured earlier stating that the save was successful.

Adding new component to Web Application using JavaScript SDK

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

We will be creating new component “Chart of Accounts” and adding it to existing list of menus/components.

Image Removed

For each menu, there is corresponding html page which renders when user click on that menu.

First we have to find where the existing html pages in source code are. You can find in “Views/App” folder. Now, you can copy existing page “CheckList.cshtml” and rename it to “ChartOfAccounts.cshtml” and then add to the project in same hierarchy “Views/App” folder.

Image Removed

Image Removed

To make appropriate changes in html page, you need to login WPF application (http://apps.saasplications.com/wpf/). In “Financials” menu, press “Chart of Accounts” menu. Then in “System” menu, press “Traffic Debug”. You can see both “Request” and “Response” in both text and XML forms.

You need to set “ViewBag.Title” to same menu text as is in WPF application which is “Chart of Accounts”. You can keep “ViewBag.Icon” same as was in “CheckList” but you can change if you want.

In Traffic, you can find Activity name and Style. 

Image Removed

Now, you need to bind to that activity in your html page.

Image Removed

For now, your html page (empty) is created. Now you need to add this html page to get it displayed in existing menu list.

You can find that file where existing html pages are added, and that is “FormMapping.xml”. You can add your page at bottom.

Image Removed

You can build and run application. You can see new menu “Chart of Accounts”.

Image Removed

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

Image Removed

...

Here we will explain all menus one by one with examples of "How data is fetched from WPF application to Web Application and saved back to WPF Application from Web application using Genie SDK?".

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

To build Vehicle Check page, we need to see traffic debug and XML request to identify activity name and style.

Image Removed

<div class="row" data-ex-bind="activity" data-ex-activityname="ERP.TourRun" data-ex-activitystyle="VehicleCheck">

</div>

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

Image Removed

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

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

Image Removed

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

<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 content/fields to each tab.

<div id="vehicleCheckTabContent" class="tab-content">


</div>