Toggle Button | Community
Skip to main content
April 21, 2022
Solved

Toggle Button

  • April 21, 2022
  • 1 reply
  • 665 views

Hi all, 

 

I am currently trying to create a toggle button that will display "English" when I click on the English button or "French" when I click on the French button. How can I set up the English button so when it is clicked it shows the English page and when the French button is clicked it shows the French page? 

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 _Manoj_Kumar_

Hello @justinbr17 

Here is a sample code for you to start.

<script>
function setLang(lang){
const urlParams = new URL(window.location.href);
urlParams.searchParams.set('l', lang);
window.location.href = urlParams;
}
</script> 
<%
var englishLang={text1:"Hello",text2:"World"};
var frenchLang={text1:"Bonjour",text2:"Monde"};
var selectedLang=ctx.vars.lang;
if(selectedLang == 'fr'){ 
	 var userLang=frenchLang; 
}else{ 
	var userLang=englishLang; 
}
%>
 <button onClick="setLang('en')">English</button> 
<button onClick="setLang('fr')">French</button> 
 <%= userLang.text1 %> <%= userLang.text2 %>

You will have to add a parameter in WebApp properties with the name as l and then create a variable with name lang.

1 reply

_Manoj_Kumar_
Community Advisor
_Manoj_Kumar_Community AdvisorAccepted solution
Community Advisor
April 22, 2022

Hello @justinbr17 

Here is a sample code for you to start.

<script>
function setLang(lang){
const urlParams = new URL(window.location.href);
urlParams.searchParams.set('l', lang);
window.location.href = urlParams;
}
</script> 
<%
var englishLang={text1:"Hello",text2:"World"};
var frenchLang={text1:"Bonjour",text2:"Monde"};
var selectedLang=ctx.vars.lang;
if(selectedLang == 'fr'){ 
	 var userLang=frenchLang; 
}else{ 
	var userLang=englishLang; 
}
%>
 <button onClick="setLang('en')">English</button> 
<button onClick="setLang('fr')">French</button> 
 <%= userLang.text1 %> <%= userLang.text2 %>

You will have to add a parameter in WebApp properties with the name as l and then create a variable with name lang.

     Manoj     Find me on LinkedIn