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

Shane18
Kilo Expert

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.

1 ACCEPTED SOLUTION

Shane18
Kilo Expert

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

6 REPLIES 6

Shane18
Kilo Expert

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.

Hi @Shane18 , can you elaborate more where to inject exactly both codes "Server and Client", as i have already injected the first Server code at the first line after "(function(){", and at the client controller code after "function ($scope, spUtil, $rootScope, $timeout, spAriaUtil, spGtd, $window) {" 

but it didn't work with me.