Service Portal RTL (Right-to-Left) Custom Solution

Shane18 · ‎09-24-2020

Hi,

Out of the box, ServiceNow does not support RTL alignment on the Service Portal. I am trying to do a custom solution. I am beginning with doing direction: rtl; - However I am unsure how to make it conditional that the user has selected the RTL language.

I applied it to the Page Specific CSS and it change the alignment. I also modified the Theme CSS and it worked too. I'm just unsure how to make it conditional.

Any help would be appreciated.

Shane18 · ‎09-28-2020

Thanks to everyone who helped me figure out this issue. Special thanks to @Cuong Phan who helped put me on the right track.

The solution I ended up using was this:

I modified the Service Portal Header and included the following:

Server script

data.lang = gs.getSession().getLanguage(); //returns the current user's language

Client contoller

var lang = $scope.data.lang;

if (lang != 'en') {
	document.body.style.direction = 'rtl';
}

This modifies the CSS using DOM manipulation to change the direction to right-to-left.

You can put this in a widget too and place the widget on the pages individually, but I felt it was easier to place it in the header as that way, it'll be automatically applied to every page on that portal.

View solution in original post

Cuong Phan · ‎09-26-2020

Hi Shane,

I am thinking of a custom widget to any page you applied.

Step1. Build your CSS with className

Step2. Check condition in server script of the widget based on user language

var myUserObject = gs.getUser();



data.lang = myUserObject.getLanguage(); -- returns the current user's language

Step3. Get the user from client and load to add/remove CSS Class

c.lang = $scope.data.lang;

if (c.lang == 'en') {
//add class
} else {
//remove class
}

Mark ✅ Correct if this solves your issue and also mark ???? Helpful if you find my response worthy based on the impact.

Cuong Phan

DXC Consultant.

Regards,
Cuong Phan
ServiceNow Technical Lead

Shane18 · ‎09-26-2020

Hi Cuong, thanks for the help. I have created a widget and added it to the page, however, I am not sure how I can modify the CSS of the entire page.

I tried basic things like this:

body {
direction: rtl;
}

The issue is it didn't appear to modify the entire page. Any tips?

mr18 · ‎09-26-2020

Hi Shane,

Below link might help you

https://community.servicenow.com/community?id=community_question&sys_id=fcffb6eddb58dbc01dcaf3231f9619e2

Allen Andreas · ‎09-26-2020

Hi,

Checkout this link which says it's for mobile design, but the basic concept of right-to-left is there: https://www.smashingmagazine.com/2017/11/right-to-left-mobile-design/

Please mark reply as Helpful/Correct, if applicable. Thanks!

Please consider marking my reply as Helpful and/or Accept Solution, if applicable. Thanks!