Preloading in Webapp with Custom schema

[J2021]

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  

[_Manoj_Kumar_]

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.

[akshaaga]

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.

[Sukrity_Wadhwa]

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!

[J2021 · Accepted solution]

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>