Toggle Button | Community
Skip to main content
Level 3
Apr 21, 2022 6:00 PM UTC
Solved

Toggle Button

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.
_Manoj_Kumar_
_Manoj_Kumar_Accepted solution
New Participant
Apr 22, 2022 1:19 AM UTC

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

1 reply

_Manoj_Kumar_
_Manoj_Kumar_Accepted solution
New Participant
Apr 22, 2022 1:19 AM UTC

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.

Translate
     Manoj     Find me on LinkedIn