I'm working on an Oracle JET application with the navbar
template, and the application gets data from a REST API. On the main view interfaces.html
, we have an oj-table
displaying a summary of all interfaces based on data fetched from the REST API. On clicking a link on the interfaceId
column of the table, the application navigates to a new view interfaceDetails.html
which displays further details on the interafce.
Currently, I'm passing the data to the interfaceDetails.html
view via observable
s declared in appController.js
, which gets the specific interface data from the selected row in in interfaces.html
via a selection listener. However, I'd like to redesign the API in the interface.html
view to only provide summary data, and have another API called from interfaceDetails.html
's view model to fetch details of for the specific interface.
I'm using this selection listener to get the selected row in the table:
self.interfaceList= ko.observableArray();
//
//REST API calls, table data source setup, etc.
//
self.interfacesTblSelctionListener = function(event) {
var interfaceId = null;
event.detail.value.row.values().forEach(key => {
interfaceId = key;
});
if(interfaceId != undefined) {
$.each(self.interfaceList(), function(id, integration) {
if(integration.INTERFACE_ID == interfaceId) {
app.selectedIntegration(integration);
self.serviceList(integration.Services);
}
});
}
}
And I'm using this function to move between views:
self.openIntegrationDetailsView = function(event) {
setTimeout(function() {
self.router = oj.Router.rootInstance;
self.router.go('interfaceDetails');
});
}
Is there a way to pass on minimal data (e.g. the interface ID) to the interfaceDetails
view and have that fetch details on its own?
Any assistance would be greatly appreciated.
Thanks in advance, Debojit
P.S. Apologies if my query isn't clear enough; this is my first JET application. Please let me know if additional information is required and I'll update my post accordingly.
checkout this example of core-router where we are passing employee index as an argument to the detail page via router.go
and fetching the employee detail when we land into that page (ofcourse, in your app you would be doing s Rest call to get the data)
this.router.go({ path: 'employee-detail', params: { index: indices[0] } });