The more dynamic you want to make it → the more you will have to use complex coding —> the more complex coding you want to use → the more knowledge you will need about JS and it’s coding techniques.
Normaly i do not give learning lessons if it comes to complex-coding, but let’s do an exception.
How to generate complex coding (dynamic functions) in your case?
-
Well, first you will have to make clear, what exactly is/are your tasks ???
-
Which functions you will have to generate for ???
-
Where to place that complex generated codings???
-
So, for the first checkpoint you already have defined your tasks…
I have two tasks I need to achieve.
- listen to the checkboxes for a change (checked or not checked) and
- change whether an element is hidden or shown based on that change.
But let’s dive even deeper!!! Are these 2-tasks already enough?
What about → how to detect all checkboxes on your page automatically?
Let’s start with this task…
A good programmer is not just able to code, he is also able to turn normal spoken speechtext into code.
What about → how to detect all checkboxes on your page automatically?
What you can read here in this quote? And which thoughts do you already have → if it comes to coding? How you would code this short piece of text-quote?
Which information you can get out of this short quote?
This is what i would do, if i would start to generate a code, accordingly to this quote…
- function = detect_Checkboxes()
- used elements = $w(‘#page1’) + $w(‘#checkbox’)
- technique → looping trough (for loop or foreach-loop)
- task(s) →
a) getting all pages elements
b) searching for all CHECKBOXES or CHECKBOX-GROUPS
c) Collecting all CHECKBOX-ELEMENTS into an ARRAY
d) doing the same for checkbox-groups
e) paying attention onto the fact, that that elements could be placed on several different level.
So, now when we know what exactly is our task, let’s start to code it…
CODE : → find all page-elements…
function get_pageElements2(page) {console.log("Page: ", page);
let foundButtons=[], foundSubButtons=[], foundLevel3Buttons=[];
let mainChildElements=[], subChildElements=[], level3ChildElements=[];
find_MainElements(page);
function find_MainElements(page) {
mainChildElements = page.children ;
find_SubElements(mainChildElements);
}
function find_SubElements(mainChildElements) {
for (let i=0; i<mainChildElements.length; i++) {
const mainChild=mainChildElements[i]; //console.log("Main-Child-Element: ", mainChild);
const subChilds=mainChild.children; //console.log("Sub-Child-Elements: ",subChilds);
if(mainChild.children) {
subChildElements.push(subChilds);
}
if(i===mainChildElements.length-1) {
//console.log("Sub-Child-Elements", subChildElements);
find_level3Elements(subChildElements);
}
}
}
function find_level3Elements(subChildElements) {
for (let i=0; i<subChildElements.length; i++) {
const subChild=subChildElements[i]; //console.log("Sub-Child: ", subChild);
const level3Childs=subChild[0].children; //console.log("Level3-Childs: ", level3Childs);
if(subChild.children) {
if (subChild.children[0].length>0) {}
level3ChildElements.push(level3Childs[0]);
}
else {level3ChildElements.push(level3Childs);}
if(i===subChildElements.length-1) {//console.log("Level3-Child-Elements", level3ChildElements);
//find_level3Elements(mainChildElements);
}
}
}
}
…so running this code on a page…
it will find all elements on 3 different levels.
- Main-Level
- Sub-Level
- Sub-Sub-Level (Level-3)
Let’s see what we get, when running this code…
As we can see, our created function found all elements on the page (in a depth of 3-level). But what exactly does it mean, when we say in a depth of 3-levels?
Well, when placing the buttons directly onto our page → it will be → LEVEL-1.
Placing our buttons into a → BOX → which is on our page → our buttons will go to —> LEVEL-2.
Placing a → BUTTON ← into a → ColumnStrip ← will create automatically a → 3-level stacked BUTTON.
So, we are able now, to find all elements on different levels of our page.
What else do we need?
Of course !!! → We have to find only the elements we need, in our case → BUTTONS.
That means we will need to expand our code, giving it more intelligence…
…adding to it something like…
if(subChildElement.type==="$w.Button") {
foundButtons.push(subChildElement);
}
if(subChildElement.type==="$w.Box") {
foundGroups.push(subChildElement);
if(subChildElement.children) {
subChildElement.children.forEach(subSubChildren=> {
if(subSubChildren.type==="$w.Button") {
foundSubButtons.push(subSubChildren);
}
});
}
}
…and so on…
So when our function would be ready → it would be able to find only BUTTONS on all different LEVELS of our PAGE.
But wait, do we really have to code all that function?
Isn’t there a better and much easier way of doing the same, like described above?
What about…
$w('Button').onClick((event) =>{
console.log(event.target.id+"- has been clicked!!!");
});
…already tried it?
Try it out!!!
- Place several buttons on different LEVELS on your page.
- Add the above code.
- Click onto the buttons
- See results inside → CONSOLE !!!
- Start your brainstorming !!!
Maybe you would now say → But wait you are doing it for → BUTTONS <— and not for —> Checkboxes <—.
Let’s do it for CHECKBOXES…
$w('Checkbox').onChange((event) =>{
console.log(event.target.id+"- has been clicked!!!");
});
Let’s do it for CHECKBOX-GROUPS…
$w('CheckboxGroup').onChange((event) =>{
console.log(event.target.id+"- has been clicked!!!");
});
And also do not forget to change the trigger…
onClick()
onChange()
onDoubleClick
…and so on
Which elements else, do support this functionality?
Try it out and test it!!!
!!! Solution in 1-3 code-lines !!!
