X
  • August 20, 2017

From ojNavigationList to ojTrain

Geertjan Wielenga
Product Manager

Sometime ago I showed how to replace ojNavigationList in the 'navdrawer' template with ojButtons. Let's now do something different and replace ojNavigationList with ojTrain:

The router is integrated into it, so that everything works as before, except that now you have a step sequence.

  1. In 'main.js', add a reference in the 'require' block to 'ojs/ojtrain'.
  2. In 'appController.js', add the following, which is the array that ojTrain will use:
    self.stepArray = 
            ko.observableArray(
                    [{label:'Step 1', id:'dashboard'},
                     {label:'Step 2', id:'customers'},
                     {label:'Step 3', id:'incidents'},
                     {label:'Step 4', id:'people'}, 
                     {label:'Step 5', id:'about'}]);
  3. In 'index.html', find the DIV with role set to 'navigation' and replace its content with the following, i.e., remove the DIV that provides the 'ojNavigationList' and replace it with the following:
    <div id="train" 
           class="oj-train-stretch" 
           style="max-width:1500px;margin-left:auto;margin-right:auto;"
           data-bind="ojComponent:{
             component: 'ojTrain', 
             selectedStep: router.stateId, 
             steps: stepArray}">
      </div>

That's all!

Further reading:

http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=train&demo=basic

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

Recent Content

Oracle

Integrated Cloud Applications & Platform Services