| Table of Contents |
|---|
...
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.
Confirm Manifest is just used to confirm once correct information is made, otherwise Manifest will be rejected. All other fields are same.
...
| Code Block | ||
|---|---|---|
| ||
<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.
...
| Code Block | ||
|---|---|---|
| ||
<button id="saveButton" tabindex="8" data-ex-bind="method" data-ex-method="MarkCounted"> Save </button> |
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.
To build Chart of Accounts page, we need to see the response in traffic debug how tree-view data is returned from service. You will see tree-view data is organized as follows:
| Code Block | ||
|---|---|---|
| ||
<div class="row" data-ex-bind="activity" data-ex-activityname="ERP.GLAccount">
</div> |
You can easily see which data variable “lvChartOfAccounts” you need to bind in your html page to get this all data. So, now you need to make request as follows:
You can debug in browser to see data returned from server when you click on “Chart of Accounts” menu.
Now, you have to build tree-view in JS once data is returned from service. For that, I have added “TreeViewAdapter.js” and referenced in html page as follows:
As we requested data from service using data-ex-bind="data", with back-end view as “DataPublicationView” and model as “DataPublication”, so we have to find which event triggers when data is returned. So I have found that event triggered when data published is “onDataPublished”.
For that event, I have written event handler. And I also found which variable of “DataPublication” model will return all data and that is “$rawXml”.
As you can see from response that all data is encapsulated in Rows tag, so first we need to find “Rows” tag.
Now, we need to loop on Rows children to parse each row and differentiate parent and child items and organize in such a form that each node can have “Attributes” and “Items”. Attributes can have “id”, “value” etc. Items can have further nodes consisting of Attributes and Items. I have also included “ItemsLength” which tells items count. In case of leaf node, “itemsLength” would be zero.
Rows can be parsed as follows:
Further children rows can be parsed using following recursive function.
Once data is formed in tree structure, then we need to display data using html template. For that I have defined two templates: one for parent item and other for child item/leaf node consisting of “li” items with action and label.
To render data, “renderParentItems” function is called on data.
In renderParentItems function, we loop on items and see if itemsLength is greater than zero then use parent template, and also called renderChildItems; otherwise use child template to render node.
Now, if you build and run application, you can see treeview.
Now, the challenge is if you need to find selected item, and get id and type of selected item so that request can be made to genie service to get data for specific node.
For that I have written following code which unselect already selected item, and select current clicked item.
Then I have written click event which triggered when leaf node is selected, then you can get id and type of selected item to pass model function and get data of selected node.
Now, we need to add “Name” field in html page so we can see data returned from service. Also we need to add “Save” button so that changes can be saved using “Save” method.
You can see data changed in Name field was saved and can be viewed in WPF application.
