Sure!!!
Ok, let’s say → an Wix-Out-Of-The-Box-Element (<—predefined-stuff), do not work anymore → For example like here in this example. We do not know whyever the MSB got buggy, but yes sometimes such things happens.
However, now your task is to generate your own MSB → Multi-State-Box.
So —> let’s go…
Let’s imagine our MSB as a TAB-SWITCH-VERSION…(you have several tabs)
What you can see here?
What ? —> A MSB ? ----> Nooooooooooooo 
What you can see here are the following elements…
- 5x-Buttons (custom)
- 1x RichText-Input-Box
That’s all ??? —> Yepp!!! That’s all !!!
And how it should work now? → Well, without the right → CODE <— nothing will work.
What’s could be the idea to be able to solve our task?
- We will need some code for our BUTTONS…like…
$w('#btn1').onClick(()=>{//console.log("LAST: ", lastSelection);
curSelection = 0;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn1').label;
resetButtonColors();
$w('#btn1').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn2').onClick(()=>{//console.log("LAST: ", lastSelection);
curSelection = 1;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn2').label;
resetButtonColors();
$w('#btn2').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn3').onClick(()=>{//console.log("LAST: ", lastSelection);
curSelection = 2;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn3').label;
resetButtonColors();
$w('#btn3').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn4').onClick(()=>{//console.log("LAST: ", lastSelection);
curSelection = 3;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn4').label;
resetButtonColors();
$w('#btn4').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn5').onClick(()=>{//console.log("LAST: ", lastSelection);
curSelection = 4;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn5').label;
resetButtonColors();
$w('#btn5').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
So reading this code, we understand —> that there are several variables…
- curSelection → Could be the current selection of a button, right?
In this case the buttons represents the TAB-FUNCTION, right?
- And when we have a current selection, there could also be a previous-selection aswell. And if we take a closer look…VIOLA!!! —>
TEXT[lastSelection] <--- there it is, we found the second vriable.
- We also recognize all the buttons, but how ???
$w('#btn5') --> btn = BUTTON (box = Box(Container... and so on.
-
What the hell could be —> rtb <— rtbJobs???
Maybe —> Richtext-Box ??? → Of course it is a Richtext-Box, we can even see it on our images.
-
Ok next one —> $w(‘#txtTitleMSB’) <— What’s this??? Where to find it on the shown pics ? ? ? ?
-
What is —> resetButtonColors(); ???
This must be a further function!!! → Oh yes it is —>
function resetButtonColors() {
$w('#btn1').style.backgroundColor = colorOff;
$w('#btn2').style.backgroundColor = colorOff;
$w('#btn3').style.backgroundColor = colorOff;
$w('#btn4').style.backgroundColor = colorOff;
$w('#btn5').style.backgroundColor = colorOff;
}
What else do we need? ? ?
Of course everything starts here…
$w.onReady(()=>{ console.log("Page-Ready..."); });
So when you have done everything right…you will get something like…
let colorOn = "#E8921D";
let colorOff = "#F4CB93";
let TEXT = [];
let curSelection, lastSelection=0;
$w.onReady(()=>{console.log("Page-Ready...");
$w('#btn1').style.backgroundColor = colorOn;
$w('#btn1').onClick(()=>{curSelection = 0;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn1').label;
resetButtonColors();
$w('#btn1').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn2').onClick(()=>{curSelection = 1;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn2').label;
resetButtonColors();
$w('#btn2').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn3').onClick(()=>{curSelection = 2;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn3').label;
resetButtonColors();
$w('#btn3').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn4').onClick(()=>{curSelection = 3;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn4').label;
resetButtonColors();
$w('#btn4').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
$w('#btn5').onClick(()=>{curSelection = 4;
TEXT[lastSelection] = $w('#rtbJobs').value;
lastSelection=curSelection;
$w('#txtTitleMSB').text = $w('#btn5').label;
resetButtonColors();
$w('#btn5').style.backgroundColor = colorOn;
$w('#rtbJobs').value = TEXT[curSelection];
});
});//-----------------------
function resetButtonColors() {
$w('#btn1').style.backgroundColor = colorOff;
$w('#btn2').style.backgroundColor = colorOff;
$w('#btn3').style.backgroundColor = colorOff;
$w('#btn4').style.backgroundColor = colorOff;
$w('#btn5').style.backgroundColor = colorOff;
}
function consoleLogData(params) {
console.log("CURRENT: ", curSelection);
console.log(TEXT[0]);
console.log(TEXT[1]);
console.log(TEXT[2]);
console.log(TEXT[3]);
console.log(TEXT[4]);
}
That piece of code is tested and works, well → but still is not complete.
It is just a short example, to show you how to generate your own features and functions.
Try to recreate this example, all you need to know to get it done, you will find inside this post.
With some patience, interest and brain —> you will be able to get this working.
And if you put some more logical thoughts onto this little code-project, you maybe will be able to generate a great MSB-Workaround.
Now try to get this to work with your new KNOWLEDGE.
!!! Good luck and happy coding !!!
!!! May the CODING POWER be with you !!!
. And by the way, it has even more benefits.
