Train Component in Oracle JET

Hi friends, In this post I'll share how to implement Train Component in JET Application.
I have created default JET Application for creation of JET Application you can follow my previous post Create JET Application Now in the same application we can implement modules as a train.

Below are the steps -
S1- Open appController.js which is used to create global variable in the application.
S2- write the below code in the appController.js

self.stepArray =
        ko.observableArray(
                [{label:'Level 1', id:'dashboard'},
                 {label:'Level 2', id:'customers'},
                 {label:'Level 3', id:'incidents'},
                 {label:'Level 4', id:'about'},
                 {label:'Level 5', id:''},
                 {label:'Level 6', id:''},
                 {label:'Level 7', id:''}
               
             ]);

which means we are adding 7 Level in out app first 4 Levels are define and next 3 Level are null.

S3- Open index.html and remove Navigation List(oj-navigation-list) and copy below code-

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

the above html code implement oj-train-stretch class instead of oj-navigation-list.

S4- Open main.js and add 'ojs/ojtrain' in define block.

       Now all is done.save all work space and run the application.

in next moment browser will appear with your train component.

Cheers :)