OutSystems 10 is our biggest release ever. It revolutionizes the way mobile apps are generated so you can deliver truly engaging experiences.
New: iOS and Android apps that are fast to create and simple to maintain
A Revolution for Mobile
With OutSystems 10, you can visually develop mobile apps that delight users with their performance and animations and allow them to work anywhere, even when offline. And, they’re apps that can be installed from the app stores with the push of a button.
To achieve that, we had to reinvent the way OutSystems apps work.
Mobile apps need to be able to:
- Run logic on the device.
- Store data locally.
- Fetch data asynchronously.
- React to changes immediately.
But to deliver a great user and developer experience, we had to do more. We improved everything, from the building blocks used to create interfaces to the way you distribute these apps. So here are some of the new features and improvements.
OutSystems 10 lets you create gorgeous interfaces with interactions that just feel natural. Top that up with the magic of sensors, and you’ll deliver apps users will crave to touch.
Jumpstart your development using smartphone, tablet, or universal starter templates. These include a set of common patterns like the side menu, bottom bar or header.
Use dozens of UI patterns designed for the high demands of a mobile experience that seamlessly adapt to different form factors and are gorgeous to look at. Just drag and drop these patterns to compose world-class user experiences.
The Mobile Theme Customizer allows you to create an iOS and Android native mobile theme, for both phone and tablet, with a few clicks only. You can start from a list of 25 beautiful Color Palettes, change the Color Palette or upload a Logo to define the application’s look and feel. Giving your applications a sophisticated look and feel has never been easier.
The baseline widgets have been revisited and optimized for mobile: the Icon, which makes using iconography a snap; the List, with infinite scroll; the List Item, which allows users to swipe for more options; the Switch and Button Group, optimized for touch…
These and others have been created with developers and users in mind, so they are easy to develop and a delight to use.
Screen layouts and several patterns, like Carousel, Sidebar or Notifications, have been built to react to swipes as a user would expect. You also get a simple visual API to implement your own custom behaviors - touch and swipe gestures everywhere!
To make your apps feel more natural, several widgets have an animation property that makes screens smoothly expand and collapse as needed. Most mobile patterns, like the Flip Card, are also animated as they reveal more information. You can use the Animated pattern whenever you need more control. All these are rendered at 60 fps, to provide a game-like experience.
Keeping users in the flow of the app is one of the most important details of a great user experience. All destinations now have a transition property: slide or fade. A “Previous Screen” destination allows reversing the transition. Users will always know where they’re going and where they came from.
Using native capabilities is as easy as using a plugin. Need to interact with the camera? There’s a plugin! Need to send push notifications? Easy, a plugin. Choose the one that fits your needs from the several available in the Forge or quickly build your own.
Ready to deploy? Generate your mobile app with one click. OutSystems cloud servers will generate your app and give you a package ready to be submitted to Apple, Google or your own enterprise app store.
To generate an iOS app, you use Apple’s developer program certificate and profile. You provide them once and that’s it. One click and your app will be ready in just a few minutes. No need for Xcode or a Mac.
Generating an Android app is just as simple: use a keystore to generate an app that will be ready to publish to the Play Store. One extra feature: if you only want to test it on your device, you can generate a debug build even if you don’t have a Google Developer Program account.
When your app is configured for iOS or Android, OutSystems helps you manage the native app’s versioning. Version numbers are automatically suggested and mapped to those you’ll be using in the app stores.
The management console shows the status of all your mobile app generation processes. You can monitor their progress, and troubleshoot any problems that might appear.
As you stage your app to test and production, a new version of the mobile app is automatically generated when needed, such as when you integrate a new native sensor.
Most changes - for example, changing UI, logic, or even the data model - do not require a new mobile app version! Mobile apps will update themselves seamlessly and your users will enjoy the latest features or critical defect fixes as soon as you publish them. No need to submit a new version of the app to the app store.
When you start developing an app, you’ll want to test it on a real device. But you might not have an Apple account, or you might just want to share your next big idea with other members of your organization. To accelerate your development process, you can use OutSystems Now to quickly test and share your app.
We usually take connectivity for granted. But in reality, it is not always guaranteed: very often users will be on some remote location or inside a warehouse with no network. OutSystems 10 makes it easy to create apps that work offline no matter how complex they are.
You can store data on users’ devices when creating a mobile app. This data can be accessed anytime it’s needed, regardless of server connectivity.
Offline data is modeled with local storage entities, which are very similar to standard database entities. A set of entity actions allows you to access and modify data, and you can use aggregates to query it just like a relational model.
You have full control of how you want to synchronize data between database and local storage entities. Two new actions created for this specific purpose, CreateOrUpdateAll and DeleteAll, make it easy to efficiently update large batches of data stored in the device.
An out-of-the-box synchronization mechanism is provided, which allows you to centrally configure when it should occur. Choose the synchronization pattern that best suits your needs and the actions will be automatically generated to perform offline data synchronization between Database and Local Storage Entities. You can also implement your own synchronization patterns.
Security and Privacy
Whenever sensitive data is at stake, you should consider encrypting the device’s database. Use the Ciphered Local Storage Plugin for full data encryption, or evaluate more granular data ciphering alternatives to optimize performance.
OutSystems 10 offloads logic, data manipulation, and storage to mobile devices. Apps load and respond immediately and continue to work while disconnected from the network.
For instant changes to the interfaces, all UI elements update immediately when the data they are bound to changes. This not only makes everything faster for the end user, but also simplifies the way you develop your app.
All client-side logic and data is visually modeled. You can use the same logic constructs, data modeling, and visual aggregates across client and server actions. You have the full flexibility to create any kind of offline business logic.
For client actions on the device, calling server-side logic is just a drag-and-drop away. OutSystems generates and secures REST APIs behind the scenes to support communication between device and server, using only the minimum network bandwidth required for the actual data transfer.
Asynchronism in server communication keeps your apps always responsive. For example, while an app is executing a server-side action, it continues to run and respond to user input on the device.
OutSystems also has a virtualization mechanism built into UI widgets to only render list items currently displayed in the viewport, avoiding performance issues on large lists.
OutSystems warns you whenever you accidentally create some scalability anti-pattern. For example, when you call a server action inside a loop, do anything that might delay screen rendering, or sequentially call server actions, OutSystems suggests alternatives that will not degrade performance.
Flaky networks are still a reality; sometimes you keep looking into a stalled screen for seconds before realizing you’ve lost connection. When executing server actions, aggregates and data actions, you can configure a server request timeout property. When the timeout is reached, you decide how your app should behave in case of connection loss.
OutSystems 10 mobile apps are future-proof because they are built on a modern architecture based on industry standards.
New Runtime Architecture - Behind the Covers
Mobile apps use a new runtime architecture built on industry standards and best practices taken to the limit. This architecture brings performance, scalability, and offline capabilities to your Android and iOS apps.
Most code and resources are cached and pushed to the device, eliminating the communication overhead for the majority of user interactions.
The UI is rendered client-side. All screens, blocks, and widgets are generated as reusable React components. REST APIs, automatically generated from the actions defined in the IDE, handle communication.
Offline data is stored in SQLite to either enable full offline apps or simply improve performance. Finally, interoperability with device capabilities is achieved with open-source Cordova plugins. You can wrap them in OutSystems modules to use them through visual models.
In mobile apps, you’ll find screen data directly below the screen. Screen data is composed of aggregates, data actions, and variables. Aggregates provide easy access to entities’ data, while data actions can be used for more advanced cases, like fetching data from external services.
All these are executed asynchronously and in parallel. This will improve your app’s UX, since there is no need to wait for all data to arrive before starting to display the page.
You might need to execute some logic whenever a user starts or resumes your mobile app. For instance, to initialize native plugins or to check network availability. The OnApplicationReady and OnApplicationResume events give you the full flexibility to do this.
You can find screen lifecycle events under the screen and block properties. These are used, for instance, if you want to initialize screen data. Additionally, in aggregates and data actions, you’ll find hooks to add custom logic after fetching data.
Blocks are a great way to achieve modularity and reusability in and across your apps. OutSystems 10 allows you to declare events in blocks to signal changes to the parent Screen. This means, for example, that developers can execute logic when your custom date picker selects a new date. Events have strongly typed parameters to propagate relevant information to the screen so you can provide the context to handle that event.
Each exception handler has an ExceptionMessage property with the full context about what happened.
A new Global Exception Handler module property lets you control which flow to execute when no other handler catches the error. A good practice to control all errors that may happen in your app.
With the new OnException flow, you define logic that will be executed when an unhandled error occurs. In this flow, you’ll have all the same capabilities as any other action flow.
Reuse Logic and Data
If you have existing web applications or whenever you create a shared back-end for both your web and mobile apps, you’ll be able to reuse their entities and server actions. All your backend logic, data, and services can be leveraged across all channels.
The visual widgets and APIs we provide will never be able to cover 100% of device capabilities. But that shouldn’t stop your idea from seeing daylight or from using the latest feature provided by a given device or native SDK. Use languages like Java, Objective-C or Swift and wrap them in a reusable component to create your own native plugin and then use it across your apps. You can store your code in a Git repository or provide it in a zip file. It will be automatically included in the generated app.
Does your script depend on others? Add them all, and define their direct dependencies. OutSystems automatically ensures that each of them will be loaded in the right order.
The HTML widget gives you the full flexibility to create UI components with the exact markup you need while benefitting from a real, live preview in the visual modeling editor. Any developer can use this widget to quickly replicate examples found on the web and transform them into visual components they can share with their team or the whole community.
You can now target different devices and orientations without having to write complex responsive media queries. The CSS classes phone, tablet, portrait, and landscape will be automatically added for your convenience.
Widgets can be extended with any attribute or event. You can define your own client actions to handle native HTML events or specifying HTML attributes based on dynamic expressions.
JSON serialization and deserialization are now directly available as actions in the visual IDE. Create JSON structures by introspection and further customize the mapping of attributes with the built-in JSON structure editor.
These actions are available both in server and client-side action flows for endless data and UI integration scenarios.
Importing external database entities is now up to 4x faster, and runtime performance in higher latency situations has been improved. The column types mapping has been reviewed so it is consistent across different database engines. You can fine-tune the mappings and names, and when refreshing an entity, all changes are persisted.
OutSystems 10 also supports non-alphanumeric characters in column names for easy integration with a whole range of naming conventions or languages used in legacy applications. You can also have more than one auto-generated attribute, not limited to numeric types, so entities with GUIDs are welcome. Finally, it is also possible to ignore some of the imported table columns, so your models only keep what really matters to your apps.
Think you’re productive in your current version of OutSystems? Imagine being even more so. We’ve worked hard so you can work smart when creating mobile apps.
Faster 1-Click Publish
Publication time has been improved by up to 50%, detection of broken references was optimized, and server code is only compiled when needed. Publish away!
In OutSystems 10, you can define dynamic style classes for mobile widgets by using any expression to fill the “Style Classes” property. The style will automatically react when the expression value changes.
Samples in Placeholders
For better UI libraries, you can now add sample content inside mobile block placeholders. This content is instantiated every time a user drags that block to a screen. The new mobile patterns leverage this, which makes them a lot easier to use.
When you preview a mobile app in your browser, you’ll have a cursor that emulates touch events, so it’s easier to test interactions like swipes. It is also a lot more obvious when you should aim to have large, easy-to-touch targets for your users’ large thumbs!
Break into DevTools
You can take advantage of DevTools to debug client actions. To do that, just click F12 in Chrome while previewing your app, and then Ctrl+Click on the widgets to pause the debugger. Here’s an extra tip: press the “Pretty print” button so it’s easier to step through the code.
Sending feedback to the user is now easier. You simply drag the message element right from the actions toolbar. The text and type of message will appear in the flow, making it more readable.
Open Any Screen
To quickly validate your mobile screens, an option is available in the right-click menu that will open the selected screen in the browser.
With OutSystems 10, the security of your web and mobile applications was strengthened to comply with security best practices and tackle the OWASP Top 10 vulnerabilities.
HTTP Strict Transport Security (HSTS)
Web browsers and other user agents can now be instructed to prevent all communications over HTTP, channeling them instead over HTTPS in subsequent requests.
HTTPS settings for screens and integrations are now easier to manage, either at the system or application level. OutSystems ensures that all communication between your mobile apps and the server is done through HTTPS.
Content Security Policy
Content Security Policy (CSP) directives enable you to address another attack vector by blocking content and usage patterns you would rather avoid.
Login Brute-Force Protection
OutSystems 10 offers default login protection against Brute-Force attacks, safeguarding you from this common threat.
The Internal Network security configuration now supports standard IP formats, such as single addresses and subnetworks identified by ranges, masks and CIDR blocks. Furthermore, trusted proxy addresses can also be defined to detect the effective IP address of HTTP requests.
Authentication is probably the first security mechanism that your application’s end user will face. OutSystems manages all authenticated sessions for your apps, ensuring that all communications between the device and the server are done and executed only if there is a valid and authenticated session.
Improvements for Web and Mobile
Mobile apps and enhancements to productivity and security: what more could you ask for? Much more, we decided. And so we have taken the development experience you love to a whole new level.
You can now see the widgets’ labels together with larger icons, so they are easier to select. But that’s not all: any custom block with an icon will also appear there, which results in a more consistent developer experience. What if there are too many interface elements to choose from? They are grouped into sections defined by your block’s parent flow, and you can use search to quickly find the widget you’re looking for.
Integration Studio now gives you the option to clone an existing extension. This means you don't have to start from scratch every time you create new integrations or import new libraries.
New list operations have been introduced to make you even more productive. The operations, which are available both for client and server actions, are: ListAll, ListAny, ListFilter, ListIndexOf, and ListSort. Many patterns that required the use of ForEach loops can now be represented in a much more readable and compact form.
Right-click on a database entity and select View Data to immediately see the values stored in the database.
App Icons and Color
When creating a new application, Service Studio automatically generates an icon based on the name and color you selected. You can also use your own icon, and the main color will be automatically detected. All this information is then used to bootstrap the app’s theme, giving you a head start on building your UI.
Parentheses Matching and Comments
We’ve added two new goodies for when you’re editing complex Expressions. You can now add single (//) and multiline (/**/) comments in your expressions. We beefed up your expression editing experience by adding parentheses and brackets matching!
Now you can import Scalable Vector Graphics (SVG) images into your OutSystems app. SVG is a standard vector image format, which supports scaling while preserving the original shapes to obtain crisp, high-definition end-results.
OutSystems 10 allows type conversions in assign elements, on top of previously supported in-place conversions when calling actions or using web blocks. You can assign a record or a list to a record or a list of another type and then specify how to convert one to the other. This is a real time-saver in converting between multiple types and mapping data between multiple systems.
Instead of having to delete both the variable and value, now you can simply select Delete Assignment or press Ctrl+D.
Service Studio allows you to quickly inspect the structure of screen aggregates and variables of complex type.
In the screenshot, you can immediately see the entities used by the GetContacts aggregate and their attributes. In mobile apps, these elements can be dragged directly to the screen, making development even faster.
We've fixed a ton of bugs, but this annoying one deserves a mention. When dragging an element to a flow, sometimes it would mysteriously misalign the elements below. Busted!
Go to Entity
Ever wondered where an entity in an aggregate you stumbled on is being imported from? Did you ever need to change the attributes of that entity? Now you can just click on the eye icon to jump to it!
You can now add labels to switch links so the logic of the flow is even more understandable at a first glance.
Quick accelerator: You can now drag a user exception to a flow to raise it, saving a few steps that used to require dragging and selecting the target exception.
To help you spot mistyping bugs or simply keep your code clean, Service Studio now warns you whenever you have local variables or parameters that aren’t being used. Remember that time you created an output parameter and forgot to assign it? Not anymore. Just saved you a few debugging cycles!
Remove Unused Dependencies
One of the most voted for ideas in the OutSystems community: it is now possible to remove all unused dependency elements with a new option in the right-click menu. This can be performed for each individual dependency or at the module level, for all dependencies.
Refresh All Dependencies
It is now easier to manage dependencies. When you have multiple outdated dependencies to refresh, just click a single button to do it all at once. The new icons make everything clearer.
Microsoft .NET 4.6.1
Apps generated will now use Microsoft .NET version 4.6.1, so you can take advantage of the latest enhancements in the underlying framework.
We’re Just Getting Started
With a revolution for mobile and a massive number of features and improvements, OutSystems 10 is our biggest release ever. But this is only the beginning.
Because this is where you enter.
This is where you start to realize there are no limits: you are able to create anything for devices that can see, hear, speak, and think.
This is where innovation begins…