While working in the project last week, I had a question from development team - how to render multiple Oracle JET Slider components in foreach loop. I thought this could be useful tip for other developers too.
You can get JET sample app from GitHub - JETSliderSample.
Take a look into dashboard.js, I have defined array with two elements, containing variables (value property variable must be observable, otherwise it will not receive changed data) required to initialize JET slider. Each array element, defines slider to be rendered in HTML. There is JS function which prints array content, it can be useful to access changed slider values:
HTML implementation contains foreach loop pointing to array from JS module. Each loop element prints JET slider. JET slider properties must be mapped with variables from array elements, otherwise slider would not function (if you are using it inside foreach loop):
This is how UI looks like. Multiple slider components are displayed through foreach loop. User can adjust slider values and print new values in JS function (hitting Submit button):
You can get JET sample app from GitHub - JETSliderSample.
Take a look into dashboard.js, I have defined array with two elements, containing variables (value property variable must be observable, otherwise it will not receive changed data) required to initialize JET slider. Each array element, defines slider to be rendered in HTML. There is JS function which prints array content, it can be useful to access changed slider values:
HTML implementation contains foreach loop pointing to array from JS module. Each loop element prints JET slider. JET slider properties must be mapped with variables from array elements, otherwise slider would not function (if you are using it inside foreach loop):
This is how UI looks like. Multiple slider components are displayed through foreach loop. User can adjust slider values and print new values in JS function (hitting Submit button):
No comments:
Post a Comment