Platform Basics
Service Studio 101
This lesson is part of the Developing OutSystems Mobile Apps course.

Welcome to the Service Studio Overview section. In this section we'd like to
discuss a number of topics including describing what Service Studio is and
all of the different parts of the Service Studio layout. So Service Studio as we'll
see in a second is our development environment and it has a number of
different areas and tabs that give us different types of functionality, a lot
of information in the menus, and there are editor areas that give us a lot of
different types of things to work with as well. So a lot of information to cover
so let's go ahead and get started. So when we think about Service Studio and
the OutSystems server we know that Service Studio is our primary
development environment and we connect to the OutSystems server to go ahead and
push the description of our applications to that server. So it is a low-code
visual development environment that it works with the OutSystems server. So
Service Studio allows us to define different types of data structures it
allows us to define our user interfaces for Web and mobile apps and that
includes being able to style them and make them look really nice, different
types of business logic is is created and if we want we can go as far as
creating processes as well. But in general Service Studio lets us do
typical development things: we will be creating, editing, updating and then
publishing the types of resources that you would expect to be able to create
the apps that we need and debug the apps. So Service Studio is relatively easy to
work with,
it's also very easy to install. Once you download the Service Studio package, it's
basically a one-click install, and then once we've installed Service Studio and
we open it, when we open it it needs to connect to an OutSystems server. So we
would go ahead and choose an OutSystems server either on
premise or in the cloud, we'd give it a user ID and the password, and then we'd
be able to connect to that server, so Service Studio as an integrated
development environment is a client to the server that we're going to be
working with. Now once we connect to the server, the server will place us, the
Service Studio and clients environment will show us, the server environment and
the environment tab shows us the applications that are in the server, so
we are able to see different types of Web apps as we can see here, different
types of mobile apps, so the small icons tell us what those are, and then we can
go ahead and create new applications any time we need or we can install
existing applications either from a description or a file that we might have
or from the Forge which is our community area. Now once we select one of the
applications we will go to the application detail tab, and the
application detail tab shows us the information about the application itself
it also shows us the modules that are inside of that application. So our
applications are made up of one or more modules. We'll see the names of the
modules here. We'll also see any dependencies if there's something in
this module that requires other modules, so this one depends on others, it will
show us the list of dependencies that exist.
You can also see that there's a native platform tab. If we're building mobile
applications we can go to the native platform tab and generate the iOS or
Android packages to go ahead and be able to have a package to install directly on
our phone. So the applications detail tab gives us a lot of information. When
we finally open our application, the application opens in an application tab,
so both our environment tab and our application tab are sort of in the tab
area at the top,
and we can open multiple applications at the same time and just move between them
by moving in between the tabs. So when we're in the module workspace tab, we
have the typical Integrated Development Environment layout that you might expect.
Now there's one tab that we didn't discuss and that's the OutSystems tab
at the beginning and if you click on the OutSystems tab at the front then it
will actually take you to the Forge and the Forge has lots of different types of
applications or resources available,
some of them are mobile some of them are Web, but there are hundreds of things
that are available. You can download them, they are rated by the different people
that have downloaded them, and you can tell which types of components are
featured and/or supported, so these are all open source community-based
resources and they are free to download, so it's a nice place to go ahead and
look for information, but it has its own tab so that you can find and work with
it very easily and very quickly. Underneath that there is a menu bar that
has some tools, some menus, and what we call layers on the right-hand side so we'll
talk about those a lot more. On the right hand side there's a tree that allows us
to get to the different elements that are available inside of the development
environment, there's an editing area where we'll do all of our work, there are
some properties for the different resources that are available, and there's
sort of a debug area that gives us more information about the types of things
that are going on, and at the very bottom there's a status bar and that status
bar tells us who we're logged in as, what server we're currently connected to and
when our last changes were made. So a lot of information that is available on
a number of different areas inside of our Service Studio layout but not all that
different than other types of development environments that you may be
familiar with.
So if we look quickly at the menu bar to see some of the things that are
available from that perspective, if we start on the right hand side, you can see
that there's different types of layers, there's different types of pieces.
So there are menus to begin with, there are the toolbar icons that are available and
these let us either go back and forth or manage different resources that we might
need, there's a 1-Click Publish button in the middle, and then there are the
layer icons that show us if we're working in the processes, the user
interfaces, the logic or the data areas and to the far right there is a search
capability. So the menu bar gets us to most of the things that we're typically
going to need so if we start on the far right we will see that we can search and
if we type in something to search for, it will bring back different types of
things that match the search, whether they're in different areas, whether
they're in the data area, the logic area or the interface area, will bring back
all of them. And we can narrow our search: we can search just within the area we're
working, we can search within the module or our whole community including the
Forge and any of the other types of resources. If you double-click on any of
the results it will jump to those and open them, so you can see what you were
searching for.
So the search can be a very handy thing. From there we get to the layers, and if
we start at sort of the lowest layer, the Data layer, will show us the different
types of database entities or local storage entities that might be available
and other types of data structures or properties that are available on our
server. So the Data layer is is one layer that we would worry about. Up from the
data layer we want to be able to work with Logic and logic will include client
actions that run on the device, server actions that run on the server,
different types of integrations including SOAP and RESTful services or connections
to enterprise systems like SAP and other types of things. And the Logic also
keeps control of the security roles so that we know who can get to what,
and along with the logic there are exceptions in case there are problems
inside of the flow of the logic. The next tab that we get to is the Interface tab
and this is for the user interfaces. So the user interfaces are grouped into
Flows and those Flows have different screens available inside of them. Because
interfaces will need different types of images and graphics that's there, and
then in general our applications will need some sort of look-and-feel and we
refer to those as Themes, and then if we need any types of scripts, JavaScript or
other types of things to support the applications and the interfaces that
we're creating, those will be available in the script area. And last but not
least there is the Processes area and inside the Processes area there are
processes which are basically business processes any type of process really.
There are the capabilities for human and automated tasks and decisions and other
things and then there are also Timers where we can basically schedule an
action or a piece of logic to run and we can tell it when it needs to run, so
processes can be quite nice. And we also have in the middle the 1-Click Publish
button. When we're finished developing whatever we might need, we can go
ahead and click the 1-Click Publish button, down near the debug area we'll get
some feedback on whether that publish occurred successfully, and if it does,
then the button will turn from green and the Publishing button to what we call
the Open in Browser button. It will turn blue and then we can immediately test
our mobile or Web app.
If it's a mobile app it will be in an emulator inside of Chrome, otherwise we
can test it in any type of browser if it's just a Web application. Now if we move
across the menu to the left hand side, we get to the toolbar, and here we have the
arrows of the toolbar and these are fairly typical, you've probably seen them
these are our undo and redo buttons so they're available and they do sort of
what you would expect. We also have this up and down arrow and that is our
Compare and Merge. If we've been working on a particular version and we want to
see how it compares to some other version, we can go ahead and select the
two versions and see the differences, and it will highlight the differences in
blue and it would tell us when those things have been modified so we do have
a capability of versioning and when those versions are there we can compare
them as needed.
Now earlier we mentioned that our application may actually reuse resources
from other modules or other applications and we refer to those as dependencies, so
inside of our particular module we may have dependencies on something like the
mobile charts, and if those dependencies are available, here we're looking at the
different things that are available from the (System), then we could go ahead and
use any of those resources. You can see exactly which pieces of the System
entities and the System, in this case actions, are available and there's this
interesting new refresh all button that helps us kind of update our references
and dependencies a little bit quicker. We also have a module management tool that
will open up the Service Center.
And we can continue to use Service Center inside of Service Studio or we
can actually just open it in the browser but when Service Center opens inside of
Service Studio it will open to the module that you're currently working on and it
can show you the versions of the module that are available,
who was the last person to publish and update those, and if you needed to kind
of get a version of those you can easily download them. So that takes care of some of
the the tools in the tool bar. I think I forgot one.
So there are the back-and-forth buttons. These actually just move you back and
forth in between the editors that you're working on.
We have the Undo and Redo, we also have the back and forth in between the
editors, so those can be really nice if you just want to quickly move to an
editor and be able to do some things and then jump back, so very convenient
capabilities. Now those were the tools in the tool bar, and above the toolbar are the
menus. The menus have a lot of the exact same things that we've seen inside
of the other parts of the menu bar up until this point, but there are some
things that you can do from the menu that you can't do other places and one
of them is looking at all of the versions that are available while you're
in Service Studio. So we could get to this type of information from the
Service Center but here we can just open it immediately and see when things were
published and who was the last person to go ahead and work on those. We also can
switch environments. If we have Service Studio open, we're connected to one
particular environment and server. We may wish to connect to a different
environment to compare things or to look at. So we can have two Service Studios
open at the same time or we can take this particular Service Studio and
switch over to another environment. We just need the right user ID and
password to connect to those. And then one other thing that we do from the
module menu is to clone things and cloning basically duplicates and creates
a copy of those modules and their resources and a lot of times we use this
to do refactoring or to split up some of the code that is there. So those are some
of the basics we do have the debugger menu that shows us all of the debugging
controls and the debugging controls are available in the debug tab at the bottom
as well and you can do the typical debugging things once we start the
debugger. You can do the classic step over, step into, we could break on all of
the exceptions, stop the debugger, so a lot of good debugging capabilities and
we can get to those through the menu or the tab,
typically we work with the tab instead. We also have what you would expect as
far as the editing capabilities in the edit menu, the view capabilities in the
view menu, and then help shows us some basic help.
Probably the best thing to do here, the most useful things, are to ask the
community and be able to ask and search across OutSystems and if you have any
feedback for us you can submit that here as well. Inside of the view it does show the
shortcuts, so if you want to jump from one tab to the other instead of trying
to use the menu you can learn the shortcuts, and you can jump into the
Widget Tree or one of the layers or synchronize the tree to the layers, so a
lot of shortcuts that can be very useful. Now when we think about the Integrated
Development Environment, most of the time we're going to be doing work and that
means we'll be working in an editing area. So typically we come to the tree
area we'll select some sort of resource, in this case the home screen, and if we
double-click on it, it opens inside of the editing area and at the same time it
populates the properties area with all of the properties of that particular
So the editing area has a lot of different pieces to it as well. We refer
to this gray area in the center as the Canvas, to the left hand side we have the
Toolbox which has all of the widgets inside of it, and then we have the Preview area
and we can see do we want to preview this as a phone or as a tablet app, so we
could have a number of different previews. We could also see that for
these items, are there styles, any kind of Cascading Styles available or associated
with that particular resource. And if we're working on a particular resource
any special features will come up just to the right of the styles and just to
the left of the description or the bread crumbs of where we are.
So here we're working on the ToDo screen which is part of the Main Flow and
because this happens to be a list item inside of a mobile app we can swipe, and
because that swipe is available it shows up as a special feature that we can get to.
We also have a little icon that can show us the detailed structure of this
screen and we'll look at that in a second, but we can also see the detailed
structure down at the bottom. So the Widget Tree will show us that, but this
widget hierarchy can show us that as well, and here we can see that we're
looking at a list item inside of a list, inside of that list item there's a block,
and overall this is all inside of a mobile layout. So the editing area gives
us a lot of capabilities and things to be able to work very quickly. Here is the
Widget Tree that I mentioned earlier, so you can see that there's a similar
type of structure and if we follow it down we can get to the list and the list
item and be able to see the block, and here we have the list and the list item
in the block. So similar information in different areas just to try to make
things as quick and easy
as possible, and when you need more information and content you can get to
that through the Widget Tree.
Now one last things that we haven't mentioned is down near the debug area
there is this TrueChange capability and TrueChange is going to be OutSystems'
capability to tell us whether or not everything inside of our environment is
consistent. So if there are any things that we need to be warned about we'll get
yellow warnings and if we've created something that is actually an error, we'll
get a red X and we'll be able to see the error. So TrueChange will constantly be
evaluating the edits that we make and the changes that occur, and if anything
is inconsistent it will tell us about it and if we double-click on any of these
it will take us directly to the piece that we need to look at, to either think
about that warning or try to solve that error. So while we're working in the
editor areas, there are many different types of editors. We were just looking at
the screen editor but we may have flows inside of the screens to do actions, we
have stylesheet editors, we have entity editors and entity diagrams, we have
expressions and JavaScript editors, so there are many many different types of
editors and we were only sort of looking at one, but that editing area behaves in
a very similar way it just changes what types of edits we can make. So in this
session we tried to describe what Service Studio is, which is our
Integrated Development Environment that connects to an OutSystems server so that
we can go ahead and begin working and publishing our applications as we need
there are a lot of different capabilities and we showed that across
the menu area you can get to some of the different things that you will need to
be able to work with, and a lot of that stuff will get you to the point where
you'll be ready to edit something in the editing area. So hopefully this gives you
some of the terms and the overall layout of Service Studio so that as we
work with it more you'll be more familiar with the areas and the things
that we can do.