Level 2

Solved

Preloading in Webapp with Custom schema

Forum|Forum|2 years ago
April 7, 2023
4 replies
1292 views

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 🙂

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by J2021

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>

_Manoj_Kumar_

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

akshaaga

Adobe Employee

Hi @j2021 ,

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

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

Community Manager

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

J

J2021AuthorAccepted solution

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>

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded