Platform Basics
Service Studio Overview
This lesson is part of the Developing OutSystems Web Applications course.

Hello and welcome to Service Studio overview. So what is Service Studio?
Service Studio is the IDE that you use to develop in OutSystems.
This is the component of OutSystems that allows you to visually, design your data,
design your interfaces, build up your logic, write the processes and any other
asynchronous tasks that will run in the platform, and finally publish and debug
these applications in the server. While the platform side of OutSystems is
installed on your enterprise servers, you will need to install Service Studio in
the developer machines and once you launch Service Studio, you will need to
connect to the server that you mean to publish your applications to. So this is
how Service Studio looks like. Let's go through the several panels that you see
in the IDE. This is the elements tree area. This is where you'll go to select
which elements, in your module, you will want to edit and modify. Once you find
the element and double click on it, you will start editing it in the editor area.
There are several kinds of editors depending on the type of element that
you are editing, so if you're editing logic, you will see an action editor, if
you're editing a query you'll see an aggregate editor and so on.
But let's drill down on the most complex of the editors and the one you will likely
spend most of your time: the screen editor. The two most important sections
in the screen editor are: the toolbox, which is on the left-hand side and holds the
widgets; and the canvas, that is the biggest section in the screenshot where
you will build up your screen. Constructing your screen is mostly made
up of dragging and dropping widgets from the toolbox into the canvas. Across
the top, you have the views buttons that allow you to preview this screen, as seen
by several kinds of devices, you have the styles buttons that allow you to format
the text and the elements on your screen. Still at the top, there's the breadcrumb
that shows the path to the current element being edited, in this case the
screen, and across the bottom you have the bread crumb of the widget hierarchy. This
will help you navigate up and down across the HTML elements of your screen.
It's worth noting that when you're editing logic, you will still have a
toolbox, a canvas and the edited element breadcrumb but instead of dragging
widgets to a screen, you'll be dragging statements into your logic.
Now, if you notice, there is a small toggle button on the top right-hand
corner. This button when pressed will substitute the elements tree by the widget
tree. This will give you full structured access to all the widgets inside your
screen and will make up for a very convenient navigation tool. On the bottom
right-hand corner there's the properties area. Regardless of the kind of element
that you have selected in Service Studio, this is where you're going to go to set
its properties, anything from: what variable feeds a widget, to what argument
you're passing to a parameter, in a piece of code that you're calling. At the bottom
we have the TrueChange and debug area and we'll talk a little bit more about
this in a few slides. And at the very bottom you have the status bar where you
can see to which server you're connected, and which user you're using to connect to the
server. So, these are all the panels that you will see in the main area of the
Service Studio IDE. Let's look now at the workspace tabs
that sit at the very top of Service Studio.
The leftmost tab, takes you to the OutSystems Forge. As we mentioned before
this is the go-to place to get extra widgets, extra connectors and sample
applications to improve your development. Next up, is the ever present environment
tab, that is a window to the server that you're connected to. At root level, you'll
be able to see all the applications that the current user can access in the
current environment, install applications from the Forge and create a new
application. When you create a new application, or you edit an existing
application, this tab changes to the application details, where you'll be able
to see and edit
things like: the application icon, the description, the modules that make up
this application and also see what dependencies this application has with
other applications.
Finally, you may have one or more module tabs. When you select one of these tabs
you will be editing that particular module. Now between the workspace tabs
and the main editor area, there is the menu bar. While on the left-hand side of
the menu bar you see the habitual drop-down menus and accelerators, I want
to call to your attention, the right-hand side, where the layer buttons are.
Selecting a layer will take you to the domain of that particular layer, it will
change the elements tree to display the elements of that particular layer. So, in
the Data tab is where you will do all your data modeling. Likewise, any global
resources that your module has, will be created over here. The Logic tab is all
about code.
This is where you're going to create logic that can be called from anywhere
on your module, as well as set up Web services, both exposed and consumed.
Security roles and exceptions that your code may throw are also defined here.
On the Interface tab, you will see all the screens, images and themes that your
model has, so anything related with UI will be inside this layer.
Finally, the Processes tab holds everything that is asynchronous, in the
OutSystems platform, be it business processes or asynchronous tasks that we
call timers. On the right-hand side of the layers there's a very handy tool
which is the search tool, that will allow you to globally search inside your
module for everything from strings to names of elements. Now, you're doing your
development, you're creating your application bit by bit.
How do you actually publish this application to the OutSystems server?
First, you need to deal with any errors that your application might have. While
you're developing, Service Studio is consistently making syntax and semantics
validations of your module and you can see
at the bottom, the TrueChange panel, that highlights not only warnings but errors
that you need to address prior to publication. Once your module has no
errors, you will see that, that top button will turn into the 1-Click Publish
button. Pushing this button will initiate the publication. Service Studio will
connect to your server, send your module over and our compiler will generate optimized
code, pages and the changes to the database needed to run this new version
of your code. All of this will be deployed in the appropriate servers with
just one click in Service Studio. Let me just open a quick parentheses to talk to
you about comparing and merging. If ever more than one developer is working on
the same module, conflicts might occur, so someone might have published the current
module while you were developing and as you publish, you are notified that
someone did. In face of this, you need to decide if you want to just go ahead and
publish your current version or merge the changes that the other developer has
done and are available in the server, and for this you have the Compare and Merge
feature. In this screenshot you can see Compare and Merge in action. So on the
left-hand side you have everything that's in your current module, while on
the right-hand side you have everything that's on the published, on the
server side. Merge will use information from the common ancestor to suggest what
you should keep on both sides, but you can always override and pick and choose
whatever it is that you will want on the published version. It's worth noting that
while Compare and Merge is normally launched when the conflict is detected
at any time you can launch it on demand if you want to pull in code from modules
in the server or even on your local machine. Simply use the appropriate
button in the menu bar. Once any conflicts are dealt with, publication
starts and you can follow its progress in the TrueChange area at the bottom.
Upon publication success, the 1-Click button changes to the opening browser button.
If you press it
your browser will launch the current application and you'll be able to test
it immediately.
And that's the Service Studio IDE in a nutshell. See you in the next lesson.