This SharePoint tutorial, we will discuss how to change the language using JavaScript in SharePoint or in Asp.Net applications.
As we know most of the time we are face challenges to configure the multi-language settings in our application. So here I am going to briefly explain about changing the language using JavaScript Code which you can use in SharePoint as well as in asp.net applications.
You can also download the complete Visual studio code solution.
Step 1: Before going to start, we have to add the below JavaScript references in our application.
You can also use the entire code inside a script editor or content editor web part in SharePoint Online or SharePoint On-premises versions also.
<script src="JavaScript/jquery.min.js"></script>
<script type="text/javascript" src="JavaScript/language.js"></script>
<script type="text/javascript" src="JavaScript/js.cookie.min.js"></script>Language.JS: This file I have mainly used to keep both language text. And I have used keys instead of text on the page. Below is the Example of a small page that I have created.
And below is the structure of my application, here I have used visual studio code.
Step 2: At the top of the page, I have added a button where you can switch the language in a button click.
Step 3: I have used CSS to change the position of text from left to right and right to left based on the language which you have selected. Add the below CSS in your application.
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/all.css" rel="stylesheet"crossorigin="anonymous" />
<link href="css/all.css" rel="stylesheet" />
<link title="english" rel="stylesheet" href="css/theme.css"/> Step 4: In this step, I have applied the CSS using JavaScript based on the language selected.
<script type="text/javascript">
function ChangeLanguage(language) {
Cookies.set('att-lng', language);
SetContentLanguage(language);
if (language == "en") {
$('#ln-seletor').text("عربى");
$("body").attr('dir', 'ltr');
$("body").attr('lang', 'en');
$("head link[title='english']").each(function (index, item) {
if ($(item).attr("href").indexOf('theme-ar.css') > 0) {
$(item).attr("href", "css/theme.css");
}
});
}
else {
$('#ln-seletor').text("English");
$("body").attr('dir', 'rtl');
$("body").attr('lang', 'ar');
$("head link[title='english']").each(function (index, item) {
if ($(item).attr("href").indexOf('theme.css') > 0) {
$(item).attr("href", "css/theme-ar.css");
}
});
}
}
function SetContentLanguage(language) {
$('.language').each(function (index, element) {
if ($(this).attr('key') == 'requested-justification') {
$(this).text((arrLang[language][$(this).attr('key')]).replace("()","("+ $(this).attr('data-attr')+")"))
}
else {
$(this).text(arrLang[language][$(this).attr('key')])
}
});
}
$(function () {
var lang = "en";
var language = Cookies.get('att-lng');
if (language != undefined && language != null && language != '')
lang = language;
ChangeLanguage(lang);
//onclick
$('#ln-seletor').on("click", function () {
if ($(this).text() == "English")
ChangeLanguage("en");
else
ChangeLanguage("ar");
});
});
</script>step 5: Below is the full source code where you can debug this application very easily.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SwitchLanguage.aspx.cs" Inherits="SwitchLanguage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Enjoy SharePoint - Language Switching IN ASP.NET /SharePoint</title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/all.css" rel="stylesheet" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="css/all.css" rel="stylesheet" />
<link title="english" rel="stylesheet" href="css/theme.css"/>
<style type="text/css">
.ScrollStyle {
max-height: 600px;
overflow-y: scroll;
}
</style>
</head>
<script src="JavaScript/jquery.min.js"></script>
<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>
<script type="text/javascript" src="JavaScript/theme.js"></script>
<script type="text/javascript" src="JavaScript/language.js"></script>
<script type="text/javascript" src="JavaScript/js.cookie.min.js"></script>
<script type="text/javascript">
function ChangeLanguage(language) {
Cookies.set('att-lng', language);
SetContentLanguage(language);
if (language == "en") {
$('#ln-seletor').text("عربى");
$("body").attr('dir', 'ltr');
$("body").attr('lang', 'en');
$("head link[title='english']").each(function (index, item) {
if ($(item).attr("href").indexOf('theme-ar.css') > 0) {
$(item).attr("href", "css/theme.css");
}
});
}
else {
$('#ln-seletor').text("English");
$("body").attr('dir', 'rtl');
$("body").attr('lang', 'ar');
$("head link[title='english']").each(function (index, item) {
if ($(item).attr("href").indexOf('theme.css') > 0) {
$(item).attr("href", "css/theme-ar.css");
}
});
}
}
function SetContentLanguage(language) {
$('.language').each(function (index, element) {
if ($(this).attr('key') == 'requested-justification') {
$(this).text((arrLang[language][$(this).attr('key')]).replace("()","("+ $(this).attr('data-attr')+")"))
}
else {
$(this).text(arrLang[language][$(this).attr('key')])
}
});
}
$(function () {
var lang = "en";
var language = Cookies.get('att-lng');
if (language != undefined && language != null && language != '')
lang = language;
ChangeLanguage(lang);
//onclick
$('#ln-seletor').on("click", function () {
if ($(this).text() == "English")
ChangeLanguage("en");
else
ChangeLanguage("ar");
});
});
</script>
<script type="text/javascript">
$(function () {
$("#flip-ch1").hide();
$("#confirm").click(function () {
if ($(this).is(":checked")) {
$("#flip-ch1").show();
} else {
$("#flip-ch1").hide();
}
});
});
</script>
<body>
<div class="container-fluid mt-4">
<div class="offset-sm-2 col-sm-8 float-left help-frm ">
<div class="col-sm-12 float-left txt-alg-c">
<img class="float-left alg-rt " width="150" src="images/enjoysharepoint_logo.jpg"/>
<button type="button" id="ln-seletor" class="lang-sel lang-btn float-right alg-lt">English</button>
</div>
<div class="col-sm-12 float-left"><h1 class="pl-3 pr-3 pt-2 pb-2 mb-5 txt-alg-c language" key="page-header"></h1>
</div>
</div>
<div class="offset-sm-2 col-sm-8 float-left help-frm">
<form runat="server">
<div class="ScrollStyle txt-alg-rt language" key="page-content" >
</div>
<hr />
<div class="container pb-3 float-left">
<div class="float-left alg-rt">
<input class="float-left alg-rt mt-3 " type="checkbox" id="confirm"/>
<span class="p-2 float-left alg-rt">I Agree with the Policy</span>
</div>
<button class="float-right btn btn-success alg-lt" id="flip-ch1" onclick="location.href='home.aspx'" type="button">Register a complaint</button>
</div>
</form>
</div> </div>
</body>
</html>
Step 6: Once you debug the application, you can see the default language is English.
Step 7 : Now click on button to switch the language.
Note: You can set the language for the button, checkbox, Radio button, and Div, etc.
Please follow the above steps to build this application in your system and download the attached source code from this link.
You may like following SharePoint tutorials:
- Change language settings SharePoint online
- SharePoint Online redirect to another page programmatically
- Check if the internet available in your computer using JavaScript
- Show Tooltip in SharePoint using JavaScript
- QR CODE Generator in SharePoint using JavaScript
- Add heading in the default newForm.aspx in SharePoint list using JavaScript and CSS
Here, we learned how to change language in SharePoint using JavaScript.
Rajkiran is currently working as a SharePoint Consultant in India . Rajkiran having 7+ years of experience in Microsoft Technologies such as SharePoint 2019/2016/2013/2010, MOSS 2007,WSS 3.0, Migration, Asp.Net, C#.Net, Sql Server, Ajax, jQuery etc.He is C#Corner MVP (2 Times).
