X

Geertjan's Blog

From ojNavigationList to ojButton

Geertjan Wielenga
Product Manager

The Oracle JET "navbar" template provides a navigation bar for switching between Oracle JET modules:

Let's remove that navigation bar and replace it with buttons:

By means of the above, you have more control over the navigation in your page, e.g., you can include validation rules, which will be handled in a future blog entry, etc. Plus, via this mechanism you have the basis of a wizard-like step-through sequence enabling the user to work through a number of different screens. To get the basics shown above, i.e., no navigation bar and buttons instead, do the following.

1. In "index.html", remove the DIV element that has its role set to "navigation". Now the navigation bar is gone.

2. In the view of all your Oracle JET modules, include your buttons, as follows:

<button class="oj-button-primary"
data-bind="click: next,
ojComponent: {
component: 'ojButton',
label: 'Next'
}">
</button>
<button class="oj-button-primary"
data-bind="click: prev,
ojComponent: {
component: 'ojButton',
label: 'Prev'
}">
</button>

3. In the viewModel of all your Oracle JET modules, reference the "appController.js" and use the router to switch to the page applicable to a specific button, e.g., here you see the content of "dashboard.js":

define(['ojs/ojcore', 'knockout', 'jquery', 'appController'],
function(oj, ko, $, app) {
function DashboardViewModel() {
var self = this;
self.next = function() {
app.router.go('incidents');
};
self.prev = function() {
app.router.go('about');
};
}
return new DashboardViewModel();
}
);

That's it, you now have nicely styled (thanks to the Oracle JET CSS classes) buttons for navigating through your Oracle JET modules.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.