Change the language direction of the app

Hi David,

I am trying to run a * selector on a condition in app builder but had no luck any ways I tried it. Any help is hugely appreciated. So below works fine when I copy it to inline CSS: body { direction: rtl !important; } OR * { direction: rtl !important; } But I want this to run only when the a specific RTL language is selected so I defined a class and used addclass like below and had no luck in inline CSS .RightToLeft { direction: rtl !important; } in the code AddClass "body" "RightToLeft" I also tried below and still no luck

SetStyle "body" "direction" "rtl"
Appreciate any help

Hello Amin,

What about to use the "[App.TextDirection]" variable? Are you tried with that?

SetVar "[App.TextDirection]" "rtl" "String"

---

You are a life saver David! I had tried all I could think of
Works like magic :-) Thanks a million and wish you a Merry Christmas!

Hello Amin,

Thanks for yor kindly words, Amin, Merry Christmas for you too and Happy New Year creating apps with DecSoft App Builder! :-)

---

Hi David,
I have used "App.TextDirection" in my app and on switching to to RTL languages it takes care of all except three parts. Labels that are inside containers, Alert Boxes and message boxes. In these three every thing remains LRT even after changing App.TextDirection to RTL
Any help on how implement text direction on these is much appreciated

Hello Amin,

Certainly, support RTL languages is not my best... I can imagine that maybe we need to deal with our own CSS... or maybe download something like Bootstrap 4 RTL... (I am not sure if this is maintained by the official team).

Since the above apparently don't work (the download link is dead) I find this other project, who link to this RTL Bootstrap CSS file.

Now, navigate to the RTL Bootstrap CSS file, copy the CSS and save it in a file like "rtltheme.css". Copy this "rtltheme.css" file into the "C:\Users\[Your Windows user]\Documents\AppBuilder\Themes\" directory. Start an app, or open y our own one. Open the app's options, and set available the new theme, even use it by default.

And try it, Amin... I think that must be the direction... and work with possible caveats using more CSS... The referred last project also link to a JS version of Bootstrap... I am not sure if we need this... if so, maybe we can include it in the app's file manager, but maybe this cause some problems with the already included Bootstrap version... the CSS is different... we can use the above RTL CSS file as a theme without problems (if I am not wrong right now).

---

Hi David,
Thanks for your help as always! It worked as instructed but there is only one issue with it. It is a multilingual app and we need to be able to change the direction at run time. Is there any way I can load this CSS or theme at run time?
Thanks a lot for your great support :)

Hello Amin,

Yes; of course. We can use the SetAppTheme action. You can change the [App.TextDirection] global variable and the app's theme according to the language. Remember that we can include in the app as many themes as we wanted, in addition to set the default one to be used. Then, in runtime, we can set one of the includes themes when needed.

---

Hi David,
I had tried [App.TextDirection] before, works for most parts except Labels that are inside containers, Alert Boxes and message boxes. I tried applying themes at run time, it works but it messes up every thing, drop downs don't work any more, and many of the classes don't apply after switching theme, Applying theme at design time was alright though, no such issues. Any how, There are infact two classes that I need to modify at run time if doable and add "text-align: right !important;" to. These classes are ".alert" and ".model-content" for the alert and message boxes, problematic labels are two or three and I can add the class to them manually. Not sure if doable as I could not find a JS code doing that for me. Any idea or suggestion is greatly appreciated.

Hello Amin,

I am sorry for too many problems. Certainly change a theme at runtime is possible, but, we are talking here about an special theme... the RTL one... that, in fact, I don't know if it's updated or what... maybe we must see in this direction: trying to locate some Bootstrap RTL... that uses the latest version of Boostrap...

Thinking about... what if you identify that the user needs the RTL theme and then start the app from the scratch? We are here in the same problem than the "default view" that we have in the past? Maybe another configuration variable for the default theme can help?

---

Hi again David,

Found the problem, sound obvious but anyhow it was my mistake/lack of understanding of how themes work.
First I thought only adding the bootstrap css into AB files is enough! but then I noticed when there are more than one theme to switch between I need to include them in the design time first. So that is why when I was putting the RTL bootstrap on default it was working fine but then at run time it was not because I had not included it! Any how, now I included default and the bootstrap you suggested at design time and switch between them at run time and every thing work like magic!!

I thought I better leave some clarifications here for future reference in case it helps some else later, in App options there is a list titled "included" and I read it as all below are included, but infact only the highlighted ones are included! which you wont see the first time as you use only the default theme!

You are so great David, I don't think I have said that enough, THANK YOU :)

Hello Amin,

It's very good that you got it. One thing to do by myself is try to search for a possible "stable project" for Bootstrap RTL, search a bit around this topic, so, we can use the right CSS, maybe the one that you already use, and then include this theme in the App Builder's installation, so put it available to be used "out of the box".

---

As a mental note for me... I want to look if the default theme can be a good candidate to be another "app's configuration" variable, so we can set the default theme before the app start if needed, in the same way that we can set the default app's view. I want to look into this when possible!

---