Expand my Community achievements bar.

SOLVED

Preloading in Webapp with Custom schema

Avatar

Level 2

Hi,

 

I'm trying to preload a checkbox on my Webpps form.(i'm using the HTML page variant)  This is the method i'm using of trying to preload it.

 

 

 

<input id="checkbox1" type="checkbox"  <%=if(ctx.vars.commercial == '1'){%> checked="checked" <%}%>  /> <label for="checkbox1"></label>

 

 

 

 

But as soon as i save and publish the code changes to this:

 

 

 

<input id="checkbox1" type="checkbox" checked="checked" gt="" 1="" commercial="=" vars="" ctx="" if="" lt="" /> <label for="checkbox1"></label>

 

 

 

 

Am i doing something wrong? How should i preload the checkbox? 

 

I'm using the following javascript to prefill the ctx variables:

 

 

 

var query = xtk.queryDef.create(
        <queryDef schema="cus:CustomerOptins" operation="select">
          <select>
            <node expr="@Information"/>
            <node expr="@Commercial"/>
            <node expr="@Email"/>           
          </select>
          <where>
           <condition expr={"@Customer_key ='"+ctx.recipient.Cus_Key+"'"}/>
          </where>
        </queryDef>
      )
var queryResult = query.ExecuteQuery();

for each(var service in queryResult) {
  var information = service.@Information
  var commcercial = service.@Commercial
  var email = service.@Email
}

ctx.vars.commercial = commcercial 
ctx.vars.information = information
ctx.vars.email = email

 

 

 

 Hope somebody can help me  

1 Accepted Solution

Avatar

Correct answer by
Level 2

The proposed solution didn't work. I ended up using a js to save the values which is shown below. I added the DOMContentLoaded because the values needed to be rendered in the checkboxes after the HTML was fully rendered. 

 

 

<script type="text/javascript">// <![CDATA[
document.addEventListener("DOMContentLoaded", function(event) {
var commercial = document.controller.getValue('/ctx/vars/commercial')
var informative = document.controller.getValue('/ctx/vars/informative')

var checkbox1 = document.getElementById('checkbox1')
var checkbox2 = document.getElementById('checkbox2')


checkbox1.checked = (informative === '1')
checkbox2.checked = (commercial === '1')


});

document.getElementById('checkbox1').onclick = function() {
var checkbox11 = document.getElementById('checkbox1')
var isChecked11 = checkbox11.checked
document.controller.setValue('/ctx/vars/informative', isChecked11 ? '1' : '0');
};

document.getElementById('checkbox2').onclick = function() {
var checkbox22 = document.getElementById('checkbox2')
var isChecked22 = checkbox22.checked
document.controller.setValue('/ctx/vars/commercial', isChecked22 ? '1' : '0');
};


// ]]></script>

 

 

View solution in original post

4 Replies

Avatar

Community Advisor

Hello @J2021 

 

The Web App functionality is buggy. if you use the source code tab to make changes, like adding custom codes and conditional statements. After publishing the pages when you try to open the web app again. The first tab that load is the WYSIWYG editor which messes up the custom code syntax.  It tries to create HTML equivalent to JSSP syntax like <%.

 

My suggestion would be to always make a backup of your source code before publishing the code.


     Manoj
     Find me on LinkedIn

Avatar

Employee Advisor

Hi @J2021 ,

To preload the checkbox on your HTML form based on the value of ctx.vars.commercial, you can use the following syntax:

 

<input id="checkbox1" type="checkbox" <%= ctx.vars.commercial == '1' ? 'checked' : '' %> />

<label for="checkbox1"></label>

In this code, the ternary operator (?) is used to conditionally add the checked attribute to the checkbox element based on the value of ctx.vars.commercial. If ctx.vars.commercial is equal to '1', the checked attribute will be added to the input element, otherwise it will be left empty.

Note: Make sure that ctx.vars.commercial is a string with a value of either '0' or '1' to match the comparison in the code.

If it is a boolean value, you may need to modify the comparison accordingly.

Avatar

Administrator

Hi @J2021,

Were you able to resolve this query with the help of the given solutions or do you still need more help here? Do let us know. In case the given solutions were helpful, then kindly choose the one that helped you the most as the 'Correct Reply'.
Thanks!



Sukrity Wadhwa

Avatar

Correct answer by
Level 2

The proposed solution didn't work. I ended up using a js to save the values which is shown below. I added the DOMContentLoaded because the values needed to be rendered in the checkboxes after the HTML was fully rendered. 

 

 

<script type="text/javascript">// <![CDATA[
document.addEventListener("DOMContentLoaded", function(event) {
var commercial = document.controller.getValue('/ctx/vars/commercial')
var informative = document.controller.getValue('/ctx/vars/informative')

var checkbox1 = document.getElementById('checkbox1')
var checkbox2 = document.getElementById('checkbox2')


checkbox1.checked = (informative === '1')
checkbox2.checked = (commercial === '1')


});

document.getElementById('checkbox1').onclick = function() {
var checkbox11 = document.getElementById('checkbox1')
var isChecked11 = checkbox11.checked
document.controller.setValue('/ctx/vars/informative', isChecked11 ? '1' : '0');
};

document.getElementById('checkbox2').onclick = function() {
var checkbox22 = document.getElementById('checkbox2')
var isChecked22 = checkbox22.checked
document.controller.setValue('/ctx/vars/commercial', isChecked22 ? '1' : '0');
};


// ]]></script>