DecSoft Support - Create new reactive element at runtime

Create new reactive element at runtime

Create apps and expand their capabilities by using the world's popular programming language: Javascript.

Take a look at our YouTube channel and subscribe to be notified about new videos!

Compile, convert your modern HTML apps and games into Microsoft Windows executable programs without dependencies.

DecSoft App Builder integrates an Open AI assistant in order to assist you while developing your apps.

Save time, resources and money creating apps for Android, iOS and more with the same base of code.

DecSoft NeoPlugins put your VisualNeo projects into another level with +1,000 new actions for your apps.

Save money by purchasing our NeoPlugins bundles. Five, Ten and even the complete NeoPlugins collection at an incredible price!

DecSoft HTML Compiler is easy to use: set your project's options and compile your apps and games in a nutshell.

Create modern HTML apps and games at another level making things impossible to do even by modern HTML apps and games.

Create multiplatform apps with DecSoft App Builder, including Android and iOS with the same base of code.

Design for small screen devices but deploy also (without changes) in larger devices like tablets.

DecSoft App Builder include a convenient Command Line Compiler, so you can compile your apps from the console.

DecSoft HTML Compiler include a convenient Command Line Compiler, so you can compile your apps from the console.

Take a look at some frequently asked questions about us and our products!

Apache Cordova's official plugins are supported out of the box and there are hundreds of plugins ready to use.

DecSoft NeoPlugins are available in both runtime and designtime flavours to keep your apps as small as possible.

Jhonson

Hi david, say I have below in function to be executed later. How to make the reactive {{app.store.message}} to work? currently not working.

var pa= document.createElement("p");
var inp= document.createElement("input");
pa.innerHTML="{{app.store.message}}";  
inp.setAttribute("v-model", "app.store.message");
document.body.appendChild(pa); 
document.body.appendChild(inp); 
app.setVar('message','messagehere');

//<p>{{app.store.message}}</p>
//<input v-model="app.store.message">

decsoft

Hello Jhonson,

Maybe there is a way, but, honestly I can't find it. Of course the code that you shows don't work as you expected. I think that we need a template to be prepared in order to properly work. I made some tests and here is what I can suggest. First of all, place the below Javascript code in the app's Mounted event:


app.setVar('myInputs', [
 {
   model: 0,
   id: "my-input-1",
   label: "My input 1",
   type: "text",
   classes: "form-control form-control-md",
   placeholder: "Input 1 placeholder"
 },
 {
   model: 1,
   id: "my-input-2",
   label: "My input 2",
   type: "number",
   classes: "form-control form-control-md",
   placeholder: "Input 2 placeholder"
 }
]);

app.setVar('myInputModels', []);

As you can see, we can define one or more "inputs", including their properties, types and even a possible "label" to be used for every input. Additionally, we define an app variable which will store the inputs models / values. Now, place the below HTML markup (VueJS template) inside an HTML control:


{{app.store.myInputModels}}



<div v-for="input in app.store.myInputs" class="form-group">
 <label v-bind:for="input.id" v-html="input.label"></label>
 <input v-bind:id="input.id" v-bind:type="input.type"
  v-bind:placeholder="input.placeholder" v-bind:class="input.classes"
   v-model="app.store.myInputModels[input.model]">
</div>

When you run the app you can see the two defined inputs along with all the properties and even the labels, properly referred for every input. You can even place the above template inside an HTML control, and, don't define the "myInputs" and "myInputsModels" variables in the app's Mounted event: you can also do in a button's Click event, for example, and, also works as expected: the point is that you can't see nothing in the HTML, except when the variables are properly defined.

On the other hand, you specifically ask how to create "reactive element at runtime", but, I honestly can't see the point for these elements to be "reactives". I mean, it's perfectly possible to create elements at runtime, handle their events, get their values, etc., etc., just like I already shows in this specific thread's post. If you ask me "what you will do", David, I will answer that, of course, depend on the app's needs, but, what I mean is that it's perfectly possible to create controls at runtime, not "reactives", but, perfectly usables and with all the expected characteristics and behaviour.

The only point that may you must take in consideration is the where to add the controls. In your above code, you add controls directly to the HTML document's body: this is not correct, to say like that, since you can / must use an HTML control, and, inside that control, place any control that you need at designtime or at runtime, depends on your needs. I do this in various apps, for example, to add inputs by user demand (supose an app's view which allows the user to add one or more input files to be uploaded) and it's perfectly possible.

Another thing to take in consideration can be the way in which you can add elements at runtime: since we have the jQuery library in our apps, ready to be used, I think there is no point to don't take the jQuery library advantages. So, suposing I want to add inputs at runtime when a user click a button, I will do in a way similar than the below one:


$('#html1').append('\
 <div class="form-group">\
  <input type="text" class="form-control form-control-md" placeholder="Type here">\
 </div>');

Please, don't hesitate to post here if you have any further questions around this thread's topic.

Purchase one or more licenses of our products if they are useful to you!

Everybody can read the DecSoft support forum for learning purposes, however only DecSoft customers can post new threads. Purchase one or more licenses of some DecSoft products in order to give this and other benefits.