DecSoft App Builder

App template

We can show "live" content in our app interface by using certain directives in our app template. Consider the app template like the HTML markup that you can set in the HTML property of the HTML control, for example. With the help of the app global reactive variables and the template directives we can show content in our app interface in a powerful "reactive" way.

Directives

v-if directive
v-show directive
v-for directive
v-html directive

App directives

v-if directive

The "v-if" directive allows us to render or not certain content in our app interface depending on the value of certain app global reactive variable. If the variable condition / variable in the "v-if" directive is "true" then the content will be rendered, and, if it's "false" and there is a "v-else" directive, then the content of the "v-else" directive will be rendered. Take a look at the below HTML markup, that you can use in the HTML property of the HTML control, for example.


<div v-if="app.store.showThisContainer" class="text-bg-success rounded p-2">
 If "showThisContainer" variable is true, then show this container
</div>
<div v-else class="text-bg-danger rounded p-2">
 If "showThisContainer" variable is false, then show this container
</div>

There is a TemplateIf sample app included with the installation of DecSoft App Builder. Take a look to see this directive in action!

v-show directive

The "v-show" directive allows us to show or not certain content in our app interface depending on the value of certain app global reactive variable. If the variable condition / variable in the "v-show" directive is "true" then the content will be shown, and, if it's "false", then the content will be rendered but hidden by a "display: none" CSS rule. Take a look at the below HTML markup, that you can use in the HTML property of the HTML control, for example.


<div v-show="app.store.showThisContainer" class="text-bg-success rounded p-2">
 If "showThisContainer" variable is true, then show this container
</div>

<div v-show="!app.store.showThisContainer" class="text-bg-danger rounded p-2">
 If "showThisContainer" variable is false, then show this container
</div>

There is a TemplateShow sample app included with the installation of DecSoft App Builder. Take a look to see this directive in action!

v-for directive

The "v-for" directive is quite powerful and allows us to render certain Array app global reactive variable in our app interface. The Array can be a simple Array (for example, with string items) but also a complex Array like an Array of Objets. Take a look at the below HTML markup, that you can use in the HTML property of the HTML control, for example.


<div v-show="app.store.sampleArray.length === 0" class="text-bg-danger rounded p-2">
 There is no items in "sampleArray"
</div>

<ul v-for="(item, index) in app.store.sampleArray" class="list-group">
 <li class="list-group-item">{{index}} - {{item}}</li>
</ul>

There is a TemplateFor sample app included with the installation of DecSoft App Builder. Take a look to see this directive in action! Note that other various sample apps use the "v-for" directive like the HTML sample app.

v-html directive

The "v-html" directive is useful when we want to show certain app global reactive variable which contains HTML markup in our app interface. If we use the regular moustache way to show this kind of variables (who contains HTML markup) then the HTML markup is shown "as is". On the contrary, with the "v-html" directive what we can see is the processed HTML markup in the app interface. Take a look at the below HTML markup, that you can use in the HTML property of the HTML control, for example.


<div class="text-bg-success rounded p-2" v-html="app.store.thisContainHtml">
</div>

<div class="text-bg-danger rounded p-2 mt-3">
  {{app.store.thisContainHtml}}
</div>

There is a TemplateHtml sample app included with the installation of DecSoft App Builder. Take a look to see this directive in action!