Service Studio 5.0 Design Interface Problems

Service Studio 5.0 Design Interface Problems


Me and my colleagues have just converted all our applications to the new 5.0 version. We are using the Service Studio version

Most of our screens have tables instead of containers, since the applications are quite old and we didn't have time to put the screens beautiful and well made with Ajax or, like I said, in an all container screen. The main differences that we've just seen from 4.2 to this 5.0 version are:

1. We cannot reach the end of the screen as I show you in this picture:

Behind that selected container, there's a button that I will never reach. I have turned on the OutlineMode to help me see the different containers or tables that exist in the screen. If I turn it off gets better, but still I cannot reach that button. With 4.2, this works fine.

2. The Widget Select Bar at the bottom of Service Studio is different. When we select an outer cell, the inner cell disappers and we cannot select it anymore. We have to go to the cell with the mouse and click it to have it selected again. I really don't understand this "new vision".

3. We use hidden buttons to refresh the screen. The button's click event is called in a select widget's onchange event. Where did the button go??? I had to search by it's name after looking how it was called in the 4.2 version in order to find it. I found it hidden in the left superior corner of the screen. I tried to copy-paste to it's previous place and it simply goes back there!

Yes, I know that we have to transform all our screens and start to use containers and ajax, but transform more than 1000 screens is simple impossible!

Hope that someone can help me on these points.

can you share 1 page that has the problem in a simple oml?

I never encountered the problem before, so i'm curious :)

or is it already solved?
Hi Tiago,

From everything you describe, the only thing I can suggest is that you do report that to our support services. Those issues seem like problems with Service Studio itself when handling such screens (and yes, do attach the eSpace you're experiencing it on), and as such should be looked at by OutSystems itself.

In the meanwhile, if you really need to keep working with those screens, I suggest trying to get rid of the eSpace CSS during development (either delete it, or make it invalid somehow temporarily) and see if then the button appears where you expect it to, and if you can select what you're having trouble with.

Let us know if this somehow works around your problems...

Remember - you do have to place the CSS there again before publishing.


Paulo Tavares
Hi Paulo,

Thanks so much for the answer. You are absolutely right. The problem is somehow solved if the eSpace doesn't have a CSS associated. If we don't connect to the server also, Studio Studio works fine. So, the problem has been identified. I'll report this to the Outsystems support.

Later, I'll attach a small eSpace with this screen example so that you can have a better notion of what I'm saying. It's simple. It's an "old-fashion" screen and we still have lots and lots and those.

What about the points 2 and 3? Any suggestions?

Hi Tiago!

Sadly, I was secretly hoping that the CSS removal would solve them all... If they didn't, my only suggestion would be for point #3 that it has some style set in its extended properties? Maybe a "float" property?

That will have to go to our support department - probably it is not possible for you to attach your eSpace to the forums, because of Intellectual Property issues, I assume.

If not, try attaching it here and specifying the screen and the button where it happens - maybe someone can find a workaround.


Paulo Tavares
Hi again,

I've just built an eSpace test so that you can understand points 1 and 2. I was forced to do it, because I'm currently working with this huge TableRecords which has lots and lots of data, just like the structure that I created.

So, if you open the eSpace you will see two TableRecords which are exactly the same with the difference that the first is inside 3 containers (Page_Container, Body_Container and Body_Area). No problems at first sight. Try to delete the second TableRecords which has no containers. Ups! You can't see no more the attributes starting from 12 in the first TableRecords. This is problem nº1! These containers are those we currently use in all our application screens. So they have embebbed the all page content. It worked perfectly with version 4.2.

Problem nº2 is simpler to describe. Select the Body_Area container. Now, select Body_Container. Why did the Body_Area container and the TableRecords disappear from the bottom Select Bar of Service Studio? This was so great to turn back... Now, like I said before, if I want to select the TableRecords again for example, I have to go there with the mouse and click it. Simple, but so useful!

Problem nº3, just to answer to you Paulo, there is not "float" property defined. The hidden button was in its place with 4.2 and with 5.0 it just moved for some strange reason I cannot explain. The button has the Invisible style defined which is:

.Invisible {
 display: none;

Hello Tiago!

Just to let you know that your feedback is being taken into account by our development team. I'll just give you a quick background on your issues.

1. The horizontal scrollbar is indeed no help in your test oml. It was a bug and will be fixed.
2. The widget picker was re-made in 5.0, so this functionality which you are referring was probably lost in the process. We'll take your feedback into consideration.
3. The problem with the button could be caused if the style definition for .Invisible class is inside a @media rule. We are improving the support for @media rules inside Service Studio.
Hi Leonardo,

Thanks for your feedback.

For point 3., I don't know what you mean with @media rule. I don't know the concept by this name.

To clearify, we have an eSpace which contains the CSS for all applications. We use the command:

@import url("/.../web.css");

to import the class Invisible that I wrote above. We have, though, to redefine it empty in the current eSpace like this:



It's possible for you to provide a sample oml with the "invisible button" pattern you have described?
Here's the sample.

The problem occurs when the eSpace has the @import command in the its Style Sheet definition. I tried to build a simple eSpace without the @import, but the problem didn't occur.

We are using this StyleEspace oml which represents our shared CSS with all applications.

Thanks again.