I need to build simple web application, with 2 panels split vertically with resizer.
On the left side there should be Tree control, very similar to file system hierarchy.
On the right side there should be a Table control.
Both Tree and Table should have data binding via OData service. Description of API for OData will be provided.
Tree and Table have master-detail relationship - when node in the tree is selected, it should update Table with OData request, passing filter with currently selected Tree node's id.
The Table is similar to list of files from selected folder in Windows Explorer.
For development, data source with OData interface will be provided (it is SQLite database with 2 tables, one for Tree, another for Table control, which is accessed via CData API Server).
On the Table control data binding should be 2 way (i.e. some fields should be editable).
Web server executable (Windows console application) will be also provided.
I need to build simple web application (note: not web site). It should have 3 areas: static header at the top, which gets content from file header.html, and 2 panels split vertically with resizer. Must be using OpenUI5 framework (open source version of SAPUI5).
On the left side panel there should be Tree control, very similar to file system hierarchy. Panel should have also a toolbar with icons to add new node at the root level, as well as edit and delete nodes under root level. Add/Edit should be done in popup window (in small scree device like smartphone – in other screen) when icon to add or edit is clicked. Before delete, confirmation is required in popup window. Nodes must be retrieved by calling OData API, using Get call with target URI /treeNodes (example: http://localhost:8888/api.rsc/treeNodes/?$filter=parentId eq 8 – this will return children nodes of the node with id 8.). When root level node is added/edited/deleted, OData source needs to be updated, i.e. that will be two way communication on OData.
Nodes have attribute displayName – to render as text of the node, and have some invisible in GUI attributes: type attribute, depending on which a node should have different icon (icon images will be provided), and serverId.
On the right side there should be a Table control. It gets data via OData Get request like http://localhost:8888/api.rsc/loggingNodes/?$filter=serverId eq 1.
Tree and Table have master-detail relationship - when a node in the tree is selected, it should get current node’s serverId attribute, and then update Table with OData request, passing filter with that serverId value.
Nodes of variable type can be drugged and dropped from Tree panel to Table panel – then it should trigger call of OData request to add new record.
Records also can be added by clicking on Add icon on Table panel’s navigation panel. When record in the Table panel is edited by the user, it should also update OData source. It should be possible also delete records from Table panel, using Delete icon in its toolbar.
For development, data source with OData interface will be provided (it is SQLite database with tables treeNodes for Tree panel, and loggingNodes for Table panel. That SQLite database should be accessed via demo version of CData API Server https://www.cdata.com/apiserver/. Instructions how to setup that server will be provided additionally. ).
Web server executable (Windows console application) will be also provided. It is simple web server application, which renders static files, and redirects OData requests to the CData API Server.
Web app should be responsive (so it can be rendered on PC, tablet and smartphone), and color theme should be defined in CSS (these will be taken care by OpenUI5 without any additional effort I assume).
You can look at example of master-detail web app at https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/master-detail/webapp/test/mockServer.html. This app will be different that it will have Tree panel on the left side, and have toolbars, and nodes in Tree panel and records in Table can be added/deleted/edited.
14 freelanceria on tarjonnut keskimäärin %project_bid_stats_avg_sub_26% %project_currencyDetails_sign_sub_27% tähän työhön
Hello, I have reviewed your description. I thin using vue.js I will implement that with two way binding. If you select me, I will make tree and table perfectly using your api. Regards.