Dynamically create variables

psweb · November 23, 2018, 10:55am

It would be amazing if instead of just being able to set variable values if you could also dynamically create variables and then dynamically set their values.
Please…

t11 · November 23, 2018, 10:57am

Sounds intresting can you give a short example?

psweb · November 23, 2018, 11:00am

Sometimes you might have a situation where you are adding an unknown amount of folders and each folder needs a set value in it’s own var to hold it’s open or closed status or its classes. If I could dynamically create the variable with the name of the ID and the value then it would not break my application when more folders are added

Teodor · November 23, 2018, 11:04am

Are you using some kind of a repeat region or? I don’t get your example.

t11 · November 23, 2018, 11:04am

In the server you mean?

t11 · November 23, 2018, 11:04am

Yes this is what I mean too. A repeat region won’t help you?

Hyperbytes · November 23, 2018, 11:37am

Could you not just use an array?

psweb · November 23, 2018, 11:40am

So here is my current situation, the community.wappler.api has one area you have to query to get all category names and ids, then another API query to get all topics / posts. I want to nest all topics under their relative categories. So like a database left join would do where the ID from API query 1 matches the ID in API query 2.

I then need to create a nested repeat, but I also want to control the category states. However I can not get it working correctly or as I would have wanted so I have had to add the category and then add its own repeat inside that.

Sorry It is very difficult to explain. Take a look at this, on a computer no mobile.
https://www.learnwappler.com/playing.php
The site is nowhere near complete right now by the way.

Open the File Management area, now arrow out the folders and see all the files inside, this all comes from the Wappler API, click a file and it displays in the design view area.

Each of those folders are manually brought in from the API like this, I am trying to find a far more efficient way than the hundreds of vars i have.

<dmx-value id="varMain1" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[0][0].id"></dmx-value>
<dmx-value id="varMain2" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[1][0].id"></dmx-value>
<dmx-value id="varMain3" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[2][0].id"></dmx-value>
<dmx-value id="varMain4" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[3][0].id"></dmx-value>
<dmx-value id="varMain5" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[4][0].id"></dmx-value>
<dmx-value id="varMain6" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[5][0].id"></dmx-value>
<dmx-value id="varMain7" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[6][0].id"></dmx-value>
<dmx-value id="varMain8" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[7][0].id"></dmx-value>
<dmx-value id="varMain9" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[8][0].id"></dmx-value>
<dmx-value id="varMain10" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[9][0].id"></dmx-value>
<dmx-value id="varMain11" dmx-bind:value="api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[10][0].id"></dmx-value>
<dmx-value id="varMain12" dmx-bind:value="2791"></dmx-value>

<dmx-api-datasource id="api1" is="dmx-fetch" url="https://community.wappler.io/site.json" dmx-on:success="api2.load({});api3.load({});api4.load({});api5.load({});api6.load({});api7.load({});api8.load({});api9.load({});api10.load({});api11.load({});api12.load({})"></dmx-api-datasource>
    
<dmx-api-datasource id="api2" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain1.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api3" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain2.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api4" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain3.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api5" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain4.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api6" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain5.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api7" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain6.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api8" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain7.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api9" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain8.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api10" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain9.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api11" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain10.value+'.json'" noload="noload"></dmx-api-datasource>
<dmx-api-datasource id="api12" is="dmx-fetch" dmx-bind:url="'https://community.wappler.io/c/docs/'+varMain11.value+'.json'" noload="noload"></dmx-api-datasource>

<dmx-value id="varShowHide" dmx-bind:value="0"></dmx-value>
<dmx-value id="varViews" dmx-bind:value="0"></dmx-value>
<dmx-value id="varCodeViewTextSize" dmx-bind:value="14"></dmx-value>
<dmx-value id="varDesignViewWidth" dmx-bind:value="5000"></dmx-value>
    
<dmx-value id="varShowHideFolder1" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder2" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder3" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder4" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder5" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder6" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder7" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder8" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder9" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder10" dmx-bind:value="0"></dmx-value>
<dmx-value id="varShowHideFolder11" dmx-bind:value="0"></dmx-value>

<div class="row text-white-50 py-2 wap-bg-grey-dark wap-border-right" dmx-style:height="browser1.viewport.height - 149+'px'" dmx-style:overflow-y="'scroll'">
  <div class="col fileManagerColumn">
    <p class="m-0"><i class="fas fa-caret-down fa-fw"></i><i class="far fa-folder-open fa-fw pr-4"></i>Wappler (/community.wappler.io/c/docs/)</p>
                  
    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder1.value == 1" dmx-class:fa-caret-right="varShowHideFolder1.value == 0" dmx-on:click="(varShowHideFolder1.value == 0) ? varShowHideFolder1.setValue(1) : varShowHideFolder1.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[0][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat2" dmx-bind:repeat="api2.data.topic_list.topics" dmx-show="varShowHideFolder1.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>
                  
    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder2.value == 1" dmx-class:fa-caret-right="varShowHideFolder2.value == 0" dmx-on:click="(varShowHideFolder2.value == 0) ? varShowHideFolder2.setValue(1) : varShowHideFolder2.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[1][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat3" dmx-bind:repeat="api3.data.topic_list.topics" dmx-show="varShowHideFolder2.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder3.value == 1" dmx-class:fa-caret-right="varShowHideFolder3.value == 0" dmx-on:click="(varShowHideFolder3.value == 0) ? varShowHideFolder3.setValue(1) : varShowHideFolder3.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[2][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat4" dmx-bind:repeat="api4.data.topic_list.topics" dmx-show="varShowHideFolder3.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder4.value == 1" dmx-class:fa-caret-right="varShowHideFolder4.value == 0" dmx-on:click="(varShowHideFolder4.value == 0) ? varShowHideFolder4.setValue(1) : varShowHideFolder4.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[3][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat5" dmx-bind:repeat="api5.data.topic_list.topics" dmx-show="varShowHideFolder4.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder5.value == 1" dmx-class:fa-caret-right="varShowHideFolder5.value == 0" dmx-on:click="(varShowHideFolder5.value == 0) ? varShowHideFolder5.setValue(1) : varShowHideFolder5.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[4][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat6" dmx-bind:repeat="api6.data.topic_list.topics" dmx-show="varShowHideFolder5.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder6.value == 1" dmx-class:fa-caret-right="varShowHideFolder6.value == 0" dmx-on:click="(varShowHideFolder6.value == 0) ? varShowHideFolder6.setValue(1) : varShowHideFolder6.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[5][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat7" dmx-bind:repeat="api7.data.topic_list.topics" dmx-show="varShowHideFolder6.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder7.value == 1" dmx-class:fa-caret-right="varShowHideFolder7.value == 0" dmx-on:click="(varShowHideFolder7.value == 0) ? varShowHideFolder7.setValue(1) : varShowHideFolder7.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[6][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat8" dmx-bind:repeat="api8.data.topic_list.topics" dmx-show="varShowHideFolder7.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder8.value == 1" dmx-class:fa-caret-right="varShowHideFolder8.value == 0" dmx-on:click="(varShowHideFolder8.value == 0) ? varShowHideFolder8.setValue(1) : varShowHideFolder8.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[7][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat9" dmx-bind:repeat="api9.data.topic_list.topics" dmx-show="varShowHideFolder8.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder9.value == 1" dmx-class:fa-caret-right="varShowHideFolder9.value == 0" dmx-on:click="(varShowHideFolder9.value == 0) ? varShowHideFolder9.setValue(1) : varShowHideFolder9.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[8][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat10" dmx-bind:repeat="api10.data.topic_list.topics" dmx-show="varShowHideFolder9.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder10.value == 1" dmx-class:fa-caret-right="varShowHideFolder10.value == 0" dmx-on:click="(varShowHideFolder10.value == 0) ? varShowHideFolder10.setValue(1) : varShowHideFolder10.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[9][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat11" dmx-bind:repeat="api11.data.topic_list.topics" dmx-show="varShowHideFolder10.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>

    <p class="m-0 ml-2"><i class="fas fa-caret-right fa-fw" dmx-class:fa-caret-down="varShowHideFolder11.value == 1" dmx-class:fa-caret-right="varShowHideFolder11.value == 0" dmx-on:click="(varShowHideFolder11.value == 0) ? varShowHideFolder11.setValue(1) : varShowHideFolder11.setValue(0)"></i><i class="far fa-folder-open fa-fw pr-4"></i>{{api1.data.categories.where(`parent_category_id`, 28, `==`).groupBy(`name`).values()[10][0].name}}</p>
    <ul class="fa-ul list-group text-white pl-4" is="dmx-repeat" id="repeat12" dmx-bind:repeat="api12.data.topic_list.topics" dmx-show="varShowHideFolder11.value == 1">
      <li class="text-white-50" dmx-on:click="varMain12.setValue(id)" dmx-class:bg-primary="varMain12.value == id"><i class="fa-li fas fa-file-code fa-fw"></i>{{title}}</li>
    </ul>
  </div>
</div>

Hyperbytes · November 23, 2018, 11:44am

I guess it is just another sound reason why we need server connect API functions

Teodor · November 23, 2018, 11:44am

I don’t understand why do you use so many variables for show/hide?
Why not using one show/hide with different value in it?

psweb · November 23, 2018, 11:48am

Because you could have folder 1, 7, 9, and 3 open and 2, 4, 5, 6, 8, 10, and 11 closed, so each needs to hold its own value to know which ones are open and which ones are closed.

The issue all began when i wanted to do a nested repeat region with all the folders and files inside each, but the API would not allow me to call that dat correctly in key and value pairs so I got stuck and it all went downhill slowly from there. haha

Teodor · November 23, 2018, 11:49am

To be honest, I don’t think i understand what are you doing exactly

Hyperbytes · November 23, 2018, 11:51am

It’s Paul Teodor, he wouldn’t be the same guy if he made things simple

psweb · November 23, 2018, 11:51am

If you try to connect to your community.wappler.io API and get this structure as per this video.

With Subcategory and Post/Topics then the entire problem i am finding will be solved.

psweb · November 23, 2018, 6:06pm

This thread is now a mute point because those damn Wappler guys are just too smart.

If you place a variable inside a repeat you would imagine under any normal coding circumstances that each variable would need its own unique id set.
Not with Wappler, somehow they managed to get around this normal coding practice and allow me to add a single variable inside a repeat, give it an ID of id=“whatever” value=“0”
And I can get and set the variable on each step of the repeat asking what the value of whatever.value and it is unique per repeat.

So the answer to my original request is, Wappler already has dynamic variables that just work like magic.

My code went from about 60 variables to only 3 and my app is now unbreakable and future proof.

Akayy · December 27, 2019, 6:23pm

Hi @psweb, just to confirm, the solution here is to do this, am I correct?

dmx-bind:id="var_id_{{$index}}"

Or are you saying we don't have to do this & every variable is unique within it's repeat's scope?

psweb · December 28, 2019, 11:00am

This post was a very specific use case scenario, however under normal circumstances if you require a repeat with a batch of unique IDs so you can reference them you need to add something like you $index to the id name to ensure it is unique.

In my use case, im still not quite certain how it actually works because i have 1 boolean variable that takes either 1 for folder is open or 0 for folder is closed, that variable has an ID of lets say, folderstate and there are numerous folders, when a user clicks a caret icon next to the folder, it opens the folder to reveal the contents, and changes its boolean value from 0 to 1, and stores that in the folderstate variable, I would imagine clicking a different folder would then change the variable again, and affect the previous folder but I assume there is a key or something hidden there to differentiate, as it just works.
Im sorry it is a very confusing thing to try and explain. Easiest way would be to look at my webpage from the URL posted above, and look at the source code as well as the Inspector while opening and closing folders from the files panel.

Akayy · January 20, 2020, 11:09pm

Thanks for explaning @psweb

Cosmo · March 8, 2023, 6:50am

Apologies to revisit this but I am having issues.
I am trying to create a read more/read less action on a truncated paragraph in a repeat. I am having issues setting value to a dynamic variable from the read more/less buttons
Can anyone point me in the right direction?

<dmx-value dmx-bind:id="var_{{$index}}" dmx-bind:value="0"></dmx-value>
<p class="card-text mb-xxl-3" dmx-show="var_{{$index}}.value==0">{{fb_review.trunc(300, true, '...')}} 
<br>
    <button id="btn3" class="btn btn-outline-info" dmx-on:click="var_{{$index}}.setValue(1)">read more</button>
</p>
<p class="card-text mb-xxl-3 mb-md-3 mb-3" dmx-hide="var_{{$index}}.value==0">{{fb_review}} 
    <button id="btn5" class="btn btn-outline-info" dmx-on:click="var_{{$index}}.setValue(0)">read less</button>
</p>

The page can be seen at https://www.forestyurtevents.com/index.php

Thanks in advance!

Teodor · March 8, 2023, 7:45am

Just use a static variable id like:

<dmx-value dmx-bind:value="0" id="var_1"></dmx-value>

and reference it using its static id in the code:

 <p class="card-text mb-xxl-3" dmx-show="var_1.value==0">{{fb_review.trunc(300, true, '...')}}
    <button id="btn3" class="btn btn-outline-info" dmx-on:click="var_1.setValue(1)">read more</button>
 </p>
 <p class="card-text mb-xxl-3 mb-md-3 mb-3" dmx-hide="var_1.value==0">{{fb_review}} <button id="btn5" class="btn btn-outline-info" dmx-on:click="var_1.setValue(0)">read less</button></p>