VL Web and language

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
kno_dk
Posts: 221
Joined: Tue Feb 23, 2016 12:00 am

VL Web and language

Post by kno_dk »

Hi.

I have created an Index web page and saved it as an index.html file on my http-server as descibed in the documentation: https://docs.lansa.com/15/en/lansa017/i ... t=language
and that works fine.

The application could be run in 9 different languages and I would like to have a welcome page where they could change the language and login to the application. I have seen and used this solution: viewtopic.php?f=3&t=2329&p=6576&hilit=c ... uage#p6576
but now when I have saved the generated html into a index file I am not able to change the URL language.

Does anybody have a working solution that they could share?

Regards
Klaus
Top
User avatar
Dino
Posts: 477
Joined: Fri Jul 19, 2019 7:49 am
Location: Robbinsville, NC
Contact:
Contact Dino

Re: VL Web and language

Post by Dino »

Did some changes...
first, the index page to be able to receive a language, because when you navigate from a LANSA Web page, you are navigating and sending parameters to the original index page, not the LANSA Web page, so the information is lost.
indexlangs.png
indexlangs.png (62.53 KiB) Viewed 21802 times
so for this, my index page (in /images/temp/testindex.html) is:
indexlangs3.png
indexlangs3.png (52.63 KiB) Viewed 21802 times

Code: Select all

<!DOCTYPE html>
<html lang="en" style="height:100%">
   <head>
      <meta charset="utf-8" />
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
   </head>

   <body style="height:100%; margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px">
      <script src="/lansa/lansa_15_0_0_3/lansa.js"></script>
      <script>
	  const queryString = window.location.search;
	  const urlParams = new URLSearchParams(queryString);
	  var lang = urlParams.get('lang')
	  if (lang == null) var lang = 'ENG';
		
	  console.log(lang);
         (function(LANSA){
            if(!LANSA){document.write("Failed to load lansa.js");return}
            LANSA.init({part:"rho",sys:"lansa",lang:lang});
            LANSA.showPage("TEST129");
         }(window["LANSA"]))
      </script>      <noscript>This page requires JavaScript.</noscript>
   </body>
</html>
notice the :

Code: Select all

	  const queryString = window.location.search;
	  const urlParams = new URLSearchParams(queryString);
	  var lang = urlParams.get('lang')
	  if (lang == null) var lang = 'ENG';
and the change here:

Code: Select all

            LANSA.init({part:"rho",sys:"lansa",lang:lang});
and my LANSA Web page for this test is:
indexlangs2.png
indexlangs2.png (55.54 KiB) Viewed 21802 times

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#EMPNO.EditField) Name(#EMPNO) Displayposition(1) Left(48) Parent(#COM_OWNER) Tabposition(1) Top(38)
Define_Com Class(#SURNAME.EditField) Name(#SURNAME) Displayposition(2) Left(51) Parent(#COM_OWNER) Tabposition(2) Top(144) Width(662)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#SaveButton) Caption(*MTXTSAVEBUTTON) Displayposition(3) Left(61) Parent(#COM_OWNER) Tabposition(3) Themedrawstyle('MediumSuccess') Top(266)

Define_Com Class(#PRIM_MD.Dropdown) Name(#DropDownLang) Caption('Change Language') Displayposition(4) Left(50) Parent(#COM_OWNER) Tabposition(4) Top(346)

Evtroutine Handling(#Com_owner.Initialize)
#DropDownLang.Items.add Caption('English') Value('ENG')
#DropDownLang.Items.add Caption('Japanese') Value('JPN')
#DropDownLang.Items.add Caption('Spanish') Value('ESP')
Endroutine

Evtroutine Handling(#DropDownLang.Changed)

#std_codel := *blanks
For Each(#Parameter) In(#sys_web.URLParameters)
Continue If(#Parameter.Name.UpperCase <> LANG)
#std_codel := #Parameter.Value
Leave
Endfor

If (#std_codel <> *blanks)
#sys_web.Navigate( ((#SYS_WEB.URL).Replace( ("lang=" + #std_codel.Trim) ("lang=" + #DropDownLang) )) Current )
Else
If (#sys_web.urlparameters.ItemCount = 0)
#std_strng := #SYS_WEB.URL + "?lang=" + #DropDownLang
Else
#std_strng := #SYS_WEB.URL + "+lang=" + #DropDownLang
Endif
#sys_web.Navigate( #std_strng Current )
Endif

Endroutine
End_Com
working correctly now.... Other thing to say.... the IF_REF for the url parameters was creating some weird problem when null... using the FOR each was the solution.
Top
kno_dk
Posts: 221
Joined: Tue Feb 23, 2016 12:00 am

Re: VL Web and language

Post by kno_dk »

Hi Dino

Thanks for the code sample.

It works, but is it possible to do it in another way instead of showing it in the url?

If I have the url like shop1.fd.dk i would like it to be that way and not shop1.fd.dk?lang= "ENG"

is that possible ?

/klaus
Top
User avatar
Dino
Posts: 477
Joined: Fri Jul 19, 2019 7:49 am
Location: Robbinsville, NC
Contact:
Contact Dino

Re: VL Web and language

Post by Dino »

Off course is possible. We can store information in the localstorage to exchange information.
Lets do the changes and put this code in a diet.

This will be the code of the index page, which now gets the language from the localstorage or asume is ENG is nothing found:

Code: Select all

<!DOCTYPE html>
<html lang="en" style="height:100%">
   <head>
      <meta charset="utf-8" />
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
   </head>

   <body style="height:100%; margin-left:0px;margin-right:0px;margin-top:0px;margin-bottom:0px">
      <script src="/lansa/lansa_15_0_0_3/lansa.js"></script>
      <script>
	  var lang = localStorage.getItem("LANGUAGE");
	  if (lang == null) var lang = 'ENG'; 
         (function(LANSA){
            if(!LANSA){document.write("Failed to load lansa.js");return}
            LANSA.init({part:"rho",sys:"lansa",lang:{def:lang,code:{"ENG":"En-US","FRA":"fr_FR","JPN":"ja-JP","ESP":"es","LLL":"En-US"}}});
            LANSA.showPage("TEST129");
         }(window["LANSA"]))
      </script>      <noscript>This page requires JavaScript.</noscript>
   </body>
</html>
notice the :

Code: Select all

	  var lang = localStorage.getItem("LANGUAGE");
and I changed back the LANSA.init call as those were ISO codes not partition languages been sent (my javascript knowledge is "need to know basis", sorry about that):

Code: Select all

            LANSA.init({part:"rho",sys:"lansa",lang:{def:lang,code:{"ENG":"En-US","FRA":"fr_FR","JPN":"ja-JP","ESP":"es","LLL":"En-US"}}});
and the LANSA Web Page Test129, now put the value for the language selected in the localstorage :

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#EMPNO.EditField) Name(#EMPNO) Displayposition(1) Left(48) Parent(#COM_OWNER) Tabposition(1) Top(38)
Define_Com Class(#SURNAME.EditField) Name(#SURNAME) Displayposition(2) Left(51) Parent(#COM_OWNER) Tabposition(2) Top(144) Width(662)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#SaveButton) Caption(*MTXTSAVEBUTTON) Displayposition(3) Left(61) Parent(#COM_OWNER) Tabposition(3) Themedrawstyle('MediumSuccess') Top(266)

Define_Com Class(#PRIM_MD.Dropdown) Name(#DropDownLang) Caption('Change Language') Displayposition(4) Left(50) Parent(#COM_OWNER) Tabposition(4) Top(346)

Evtroutine Handling(#Com_owner.Initialize)
#DropDownLang.Items.add Caption('English') Value('ENG')
#DropDownLang.Items.add Caption('Japanese') Value('JPN')
#DropDownLang.Items.add Caption('Spanish') Value('ESP')
Endroutine

Evtroutine Handling(#DropDownLang.Changed)
#sys_web.LocalStorage.Clear
#sys_web.LocalStorage.add( "LANGUAGE" #DropDownLang )
#sys_web.Navigate( (#SYS_WEB.URL) )
Endroutine
End_Com
way better this way using localstorage.

But notice that this will only work if you are always using the index external page to call the LANSA Web Page. If you still want to use the LANSA Web Page by itself, you will need the previous code because the LANSA Web pages uses the parameters to change the language, and in that case for the DropDownLang.Changed routine, you could put an "if" depending on the #sys_web.url value, if it is the index, then use the new code, if not, the old evtroutine code.

Have a great weekend.
Top
kno_dk
Posts: 221
Joined: Tue Feb 23, 2016 12:00 am

Re: VL Web and language

Post by kno_dk »

Hi Dino.

Thanks - it worked.

/klaus
Top
kno_dk
Posts: 221
Joined: Tue Feb 23, 2016 12:00 am

Re: VL Web and language

Post by kno_dk »

Hi Dino.

Thanks - it worked.

/klaus
Top
kno_dk
Posts: 221
Joined: Tue Feb 23, 2016 12:00 am

Re: VL Web and language

Post by kno_dk »

Hi.



This have worked on Lansa V14.2. I have just upgraded to LANSA V15 and all EPC's (10,20,30) and now it does not work any more.

I have compiled my index vl-web page on V15 and imported on my test server. I get this error back from the server in the browser:
The page you are looking for doesn't exist
I have changed the path to Js etc. so it match the LANSA generated html file.

I know the VL-web is working because I have tried the url and added /dcxpgmlib/fdk/index.html?lang=dan and that is working correct.

Have anybody had the same issue?

This is My Index.html the Http is pointing at:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="/dcxpgmlib/lansa_15_0_3_0/material/material-components-web.min.js"></script>
<link href="/dcxpgmlib/lansa_15_0_3_0/material/material-components-web.min.css" rel="stylesheet" type="text/css">
<link href="/dcxpgmlib/lansa_15_0_3_0/style/roboto.css" rel="stylesheet" type="text/css">
<link href="/dcxpgmlib/lansa_15_0_3_0/style/material-icons.css" rel="stylesheet" type="text/css">
<link href="/dcxpgmlib/lansa_15_0_3_0/style/theme.css" rel="stylesheet" type="text/css">
</head>
<body>

<script src="/dcxpgmlib/lansa_15_0_3_0/lansa.js"></script>
<script>
var lang = localStorage.getItem("LANGUAGE");
if (lang == null) var lang = 'ENG';
localStorage.setItem("LANGUAGE", lang);
var webp = localStorage.getItem("WEBPAGE");
if (webp == null) var webp = "INDEX";
(function(LANSA){
if(!LANSA){document.write("Failed to load /dcxpgmlib/lansa_15_0_3_0/lansa.js");return}
LANSA.init({part:"fdk",sys:"dcxpgmlib",ver:"",lang:{def:lang,code:{"DAN":"DA","DUT":"nl","ENG":"en","FIN":"fi","NOR":"no","POL":"pl","SWE":"sv","DEU":"de","HUN":"hu"}},slz:0,md:1,splash:{limg:"spin",mtxt:{"DAN":"Loading...","DUT":"Loading...","ENG":"Loading...","FIN":"Loading...","NOR":"Loading...","POL":"Loading...","DEU":"Loading...","HUN":"Loading..."}}});
LANSA.showPage(webp);
}(window["LANSA"]))

</script>
<noscript>This page requires JavaScript.</noscript>
</body>
</html>
Top
User avatar
Dino
Posts: 477
Joined: Fri Jul 19, 2019 7:49 am
Location: Robbinsville, NC
Contact:
Contact Dino

Re: VL Web and language

Post by Dino »

Maybe a bit late, but reviewed this again in V15 today.

Recompiled this Web page:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>)

Define_Com Class(#EMPNO.EditField) Name(#EMPNO) DisplayPosition(1) Left(48) Parent(#COM_OWNER) TabPosition(1) Top(38)
Define_Com Class(#SURNAME.EditField) Name(#SURNAME) DisplayPosition(2) Left(51) Parent(#COM_OWNER) TabPosition(2) Top(144) Width(662)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#SaveButton) Caption(*MTXTSAVEBUTTON) DisplayPosition(3) Left(61) Parent(#COM_OWNER) TabPosition(3) ThemeDrawStyle('MediumSuccess') Top(266)

Define_Com Class(#PRIM_MD.Dropdown) Name(#DropDownLang) Caption('Change Language') DisplayPosition(4) Left(50) Parent(#COM_OWNER) TabPosition(4) Top(346)

Evtroutine Handling(#Com_owner.Initialize)
#DropDownLang.Items.Add Caption('English') Value('ENG')
#DropDownLang.Items.Add Caption('Japanese') Value('JPN')
#DropDownLang.Items.Add Caption('Spanish') Value('ESP')
Endroutine

Evtroutine Handling(#DropDownLang.Changed)
#sys_web.LocalStorage.Clear
#sys_web.LocalStorage.Add( "LANGUAGE" #DropDownLang )
#sys_web.Navigate( (#SYS_WEB.URL) )
Endroutine
End_Com
Then went looking for the web page result html here:
(LANSA Installation folder)\X_WIN95\X_LANSA\x_dem\web\vl

Edited the page (or you can copy it as the original example indicated) with these changes:

Inserted this two lines

Code: Select all

/* Begin Added this two lines */
var lang = localStorage.getItem("LANGUAGE");
if (lang == null) var lang = 'ENG'; 
/* End Added this two lines */
and changed the def:"ENG" to def:lang to use my variable:

Code: Select all

/* Begin Changed def:"ENG" to def:lang */
/*    LANSA.init({part:"%{lansa_partition}%",sys:"%{lansa_webalias}%",ver:"1671575307",lang:{def:"ENG",code:{"ESP":"es","JPN":"ja"}},slz:0,md:2,ol:0,splash:{limg:"spin",mtxt:{"ENG":"Loading...","ESP":"Loading...","JPN":"Loading...","POR":"Loading..."}}});%{lansa_webroutine_output}%  */
LANSA.init({part:"%{lansa_partition}%",sys:"%{lansa_webalias}%",ver:"1671575307",lang:{def:lang,code:{"ESP":"es","JPN":"ja"}},slz:0,md:2,ol:0,splash:{limg:"spin",mtxt:{"ENG":"Loading...","ESP":"Loading...","JPN":"Loading...","POR":"Loading..."}}});%{lansa_webroutine_output}%
/* End Changed def:"ENG" to def:lang */
full Code of changed web page here:

Code: Select all

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <meta name="mobile-web-app-capable" content="yes">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <script src="/%{lansa_webalias}%/%{lansa_runtime}%/material/material-components-web.min.js"></script>
      <link href="/%{lansa_webalias}%/%{lansa_runtime}%/material/material-components-web.min.css" rel="stylesheet" type="text/css">
      <link href="/%{lansa_webalias}%/%{lansa_runtime}%/style/roboto.css" rel="stylesheet" type="text/css">
      <link href="/%{lansa_webalias}%/%{lansa_runtime}%/style/material-icons.css" rel="stylesheet" type="text/css">
      <link href="/%{lansa_webalias}%/%{lansa_runtime}%/style/theme.css" rel="stylesheet" type="text/css">
   </head>
   <body>
      <script%{nonce_attr}%>
         (function(){ window["LANSA"] = {nonce: "%{nonce}%"}; })();
      </script>
      <script src="/%{lansa_webalias}%/%{lansa_runtime}%/lansa.js"></script>
      <script%{nonce_attr}%>
	  /* Begin Added this two lines */
	  var lang = localStorage.getItem("LANGUAGE");
	  if (lang == null) var lang = 'ENG'; 
	  /* End Added this two lines */
         (function(LANSA){
            if(!LANSA){document.write("Failed to load /%{lansa_webalias}%/%{lansa_runtime}%/lansa.js");return}
	  /* Begin Changed def:"ENG" to def:lang */
      /*    LANSA.init({part:"%{lansa_partition}%",sys:"%{lansa_webalias}%",ver:"1671575307",lang:{def:"ENG",code:{"ESP":"es","JPN":"ja"}},slz:0,md:2,ol:0,splash:{limg:"spin",mtxt:{"ENG":"Loading...","ESP":"Loading...","JPN":"Loading...","POR":"Loading..."}}});%{lansa_webroutine_output}%  */
            LANSA.init({part:"%{lansa_partition}%",sys:"%{lansa_webalias}%",ver:"1671575307",lang:{def:lang,code:{"ESP":"es","JPN":"ja"}},slz:0,md:2,ol:0,splash:{limg:"spin",mtxt:{"ENG":"Loading...","ESP":"Loading...","JPN":"Loading...","POR":"Loading..."}}});%{lansa_webroutine_output}%
	  /* End Changed def:"ENG" to def:lang */
            LANSA.showPage("TEST1295","test1295");
         }(window["LANSA"]))
      </script>
      <noscript>This page requires JavaScript.</noscript>
   </body>
</html>
Top
Tim McEntee
Posts: 57
Joined: Thu May 26, 2016 8:46 am

Re: VL Web and language

Post by Tim McEntee »

Hi Klaus

Browsers have a default language that the user will have set and will expect to use. You do not need to add language=en on the url unless you are overriding the users' default language.

To get the browser language use
window.navigator.language
en-US
window.navigator.languages[0]
en-US
window.navigator.languages[1]
en

If the URL has a language parameter then use that else if window.navigator.languages[1] is one of the 9 accepted languages then use that else set to 'en'

Tim
Top
Post Reply

Return to “Questions & Answers”