Is it Possible to Hide the Top Knowledge Articles Section Based on User's Language Selection
Our organization is in the process of finalizing the addition of French to our portals - One of the questions posed was is it possible to hide the Top Knowledge Articles section based on the end-user's language selection since the knowledge base articles are not filtered based on language.
Any help or feedback you can provide would be much appreciated!
Best Answer
-
Brett_Moffett Cireson PACE Super IT Monkey ✭✭✭✭✭formObj.boundReady(function() makes sure that the code within the function does not run until the bound form is loaded.
Only problem is, some of the elements are not on the form but are loaded dynamically by the form.
Therefore, when you go to query it, the elements you are after are not there.
There is 2 ways to deal with this:- Put in a delay timer to could a few second before executing the code. (Yuk)
- Put in a loop until the element you are after exists.
<div>//***** If the TopFav Row element is not null ******** if(document.querySelector('[topfav-row]')!=null) { <span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> //****** TopFav exisits ******** </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> console.log("In FRA language code") </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> document.getElementsByClassName("topfav-row")[2].style.display="none"; </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> return; </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> }</span></div><div> //***** If the TopFav element IS null ******** <span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> else { </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> //***** Wait 500 milliseconds and rerun the test ****** </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> setTimeout(function() { </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> waitForElementToDisplay(); </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> }, 500); </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> } </span><span style="font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;"> The query on this may be a little out.</span></div>
Give it a try and post up your final code here when you are done.
I'd love to see it.6
Answers
- use a custom SO based off the out of the box SO that took this into account (expensive in terms of effort but flexible and allows for other customization as well)
- Use the custom.js to look at the selected localization and then hide elements that meet a particular criteria. (less expensive but less flexible and could be hard coded into the custom.js in the most expedited version)
- No customization... use SO permissions to create and create SOs for each language that only contain ROs in the targeted language, and then scope the SO to users that have that language in their user profile.
Just a few ideas off the top of my head based on things we've seen. Hope this helps.
I'm assuming the middle option might work - using custom.js - have you seen this done before?
Add this to the custom js
formObj.boundReady(function(){
var user = session.user;
if (user.LanguageCode == "FRA") {
//code to hide here
}
});
That will mean it will only run if the current user's language is French.
Is that more what you were looking for?
Geoff
$(window).load(function () { if (document.URL.indexOf("/View/94ecd540-714b-49dc-82d1-0b34bf11888f") === -1) { ...... }
document.getElementsByClassName("topfav-row")[2].style.display="none"
Hi Geoff, I'm helping Jonathan_Boles out with this and hit a snag. Maybe you can point out what I'm doing wrong. Below is the code I've added to the custom.js.
When I reload the page (with developer mode enabled) I see the following in the console:
In window.load ok
In FRA language code
Uncaught TypeError: formObj.boundReady is not a function
If I run the
document.getElementsByClassName("topfav-row")[2].style.display="none"
in the console after the page has loaded the section disappears, so there must be a bad assumption in here as to when all the elements have loaded.
==== CODE ====
// Changes to out-of-box Knowledge Articles (KBA)
// For lanugage FRA, hide Top Knowledge Articles line
$(window).load(function (formObj, viewModel) {
console.log("In window.load ok")
if (document.URL.indexOf("/View/94ecd540-714b-49dc-82d1-0b34bf11888f") != -1) {
//$(document).ready(function () {
formObj.boundReady(function(){
var user = session.user;
console.log("In document ready and on portal home page ok")
if ( user.LanguageCode == "FRA") {
console.log("In FRA language code")
document.getElementsByClassName("topfav-row")[2].style.display="none"
}
console.log("KBA should now be hidden")
})
}
});
Appreciate the help.
Only problem is, some of the elements are not on the form but are loaded dynamically by the form.
Therefore, when you go to query it, the elements you are after are not there.
There is 2 ways to deal with this:
- Put in a delay timer to could a few second before executing the code. (Yuk)
- Put in a loop until the element you are after exists.
Give it a try and post up your final code here when you are done.I'd love to see it.