Velo Code:
$w.onReady(function () {
const myMutliState = $w('#myStateBox');
// Next
$w("#btnStarted").onClick(() => {
loadNext(myMutliState);
});
$w("#btnEmail").onClick(() => {
loadNext(myMutliState);
});
// Back
$w("#btnEmailBack").onClick(() => {
loadBack(myMutliState);
});
$w("#btnSaveBack").onClick(() => {
loadBack(myMutliState);
});
});
//LoadNext
function loadNext(MultiState) {
const states = MultiState.states;
let current = MultiState.currentState;
const indexCurrent = states.findIndex(state =>
state.id == current.id
);
let indexNext = indexCurrent + 1;
let next = indexNext < states.length ? states[indexNext].id : '';
goToState(MultiState, next);
}
//loadBack
function loadBack(MultiState) {
const states = MultiState.states;
let current = MultiState.currentState;
const indexCurrent = states.findIndex(state =>
state.id == current.id
);
let indexBack = indexCurrent - 1;
let back = indexBack >= 0 ? states[indexBack].id : '';
goToState(MultiState, back);
}
// goToState
function goToState(multi, id) {
if (id != '') {
multi.changeState(id);
}
}