Create and change web applications faster with AI

APP GENERATOR — CREATE WEB APPS 100x FASTER

Getting to the first version of your app ready to show your customers can take from a few weeks to more than a month. 

For reference: 2 weeks x 5 days x 8 hours x 60 mins = ~4.800 mins

App Generator uses AI to compress that to just 3 minutes. 

On ODC Portal, go to Apps > Create > With AI

Yes, mathematically speaking this is way faster than 100x — but we want to keep it simple.

Start from just an application name

Just typing the name of an app might be enough

Speaking of keeping it simple, there are times, in the beginning, when you still don’t know much about your customer problem. In those cases, the name of the web application they want (mobile apps are still not supported) might just be enough, as the application generated by AI can be both a way for you to roughly understand the business and also a way to foster discussions with stakeholders to get even more context and further refine the app. 

…or from a full requirements document

Upload a word or pdf requirements documents

At other times, you already have a full requirements document. In those cases you can just upload a PDF or a DOCX file. AI will do its best to extract the entities, roles, attributes, static records, and workflow steps to generate the app (images and tables in the document are currently ignored).

Entities — Refine the main objects of your app

AI will suggest the entities, but you can tweak them

Enterprise applications are usually data-driven, so getting the entities of your application right is important. That’s why you are able to tweak these before generating the application (a process that can take up to 3 minutes), removing, changing or adding to the suggested entities. 

External Entities — Connect to other apps or external systems

Use entities from other OutSystems apps, or for external systems like SAP or SalesForce in your new app

And you’ll also be able to connect with existing entities, either from other OutSystems applications or from ODC connections, like SAP or SalesForce. 

Roles — Define your app  users

You can add or remove roles

Enterprise applications always need security, that’s why the generated applications will come with a set of roles that you can also tweak before generating the app. 

After you click generate, here are the patterns you can expect:

Attributes —  With richer data types

AI will generate the standard ODC Studio data types, but sometimes it can be even smarter

While the application is generated, AI will detect which attributes each entity should have in order to create the best application possible. Besides the standard data types, already used in ODC Studio (texts, integers, dates…), and depending on your application needs, your app might also include multiline text, star ratings, progress bars, URLs, or people cards, to make better experiences.

Static Entities  —  And their respective records

AI will detect static entity and related records, which will show as Tags in the UI

One of the attribute data types mentioned above might be a reference to a static entity. In these cases, AI will detect which static entity records will make sense (e.g. Priority: High, Medium, Low), and will use the Tag OutSystems UI pattern to show these fields in a different color, depending on the values.

Table Screens — With sorting, search and filters

Table screens that show some of the attributes of the entity, with search and filters.

AI will detect which attributes can be used to summarize your data and will put them in a table screen. If there are columns that are references to static entities, these will be shown as tags, and these pages will also automatically have filters for them, either as dropdowns or button groups.

Gallery Screens — An alternative to table screens

Gallery screens are an alternative way to show lists of records.

Instead of a table screen, sometimes AI might suggest the screen to be shown as a gallery instead, especially when the attributes’ data can be self-explanatory and there might be no need for many labels. Just like the table screens, gallery screens have search and filters, but do not have sorting.

Edit Screens — Forms with some basic validations

Edit screens to allow users to create or change records

Users will be able to navigate to the edit screen, where they’ll see the appropriate input for each attribute data type, and have the basic data type validations provided by the input widgets (e.g. date pickers, dropdowns, number inputs) and mandatory validations when appropriate.

Authorizations — Who can see and change what?

Client and server validations will be created to check which users can read and edit which entity.

For each entity in your application, AI will decide who can read or edit the entity records. These rules can be both based on the roles or on the relationship the logged in user has with the record (e.g. forum posters can only edit their own posts). Buttons, links, menu items and tabs in show screens (mentioned below) can be hidden depending on these rules.

Show Screens — Much more than scaffolding

Show screens show attribute of the record of from associated records

Also going a step further than the traditional scaffolding, App Generator will create show screens, because users often just need to read something, or they might also not have permissions to edit. AI will decide which attributes to show, often bringing attributes from entities to which the current record has relationships with (e.g. the Customer Name or an Order screen). And, when they exist, workflows and related tables with references to this one will also be shown, as explained in the next two sections.

Show Screen Tabs — See all the associated records 

Associated tables (or galleries) will show inside tabs, so users can quickly understand and navigate the relationships between data

Under the main show screen card, an OutSystems UI tabs pattern will be added, showing a tab for each entity which has an attribute referencing the current record. The associated records will be shown on a table or a gallery, and will also have search and filters, when appropriate. You’ll also have a button to quickly add a new associated record, and the reference attribute will already be set on the edit screen you will navigate to.

Show Screen Workflows — See and change the state of a workflow

When workflows are detected only the appropriate stage transitions are possible

Often, when there is a “Stage” or “Status” attribute, AI might detect a workflow and will try to guess the correct transitions between states. It will put the appropriate buttons (e.g. “Submit”, “Approve”), a Wizard OutSystems UI pattern at the top to show the past and current states,. Another thing that AI tries to do is to select the appropriate color for the stage (e.g. “Approved” is green, “Rejected” is red, etc). Please note that ODC Workflows are not yet generated automatically when you generate an app, so you’ll need to create them yourself if needed.

Workflow conditions — Who can move the record to each stage?

Who can move workflows between stages is also suggested by AI

On entities that have associated workflows, only users with certain roles or with an association with the current record might be able to move between some stages (e.g. only Managers can Approve an Order). 

Menu — On the top or on the side

Depending on how many master entities your application will have, the menu can be on the top or on the side

If there are just a few entries to put in the menu, then App Generator will put the menu on top. If there are several menu entries, then the menu will be on the left.

Navigation Hierarchy — Some entities do not appear on the menu

Some entity screens can only be accessed from the parent entity show screen

AI will also detect what entries really need to appear on the menu. Entities that would naturally have a cascade delete relationship (e.g. OrderDetails → Order), or where this rule is explicitly specified in the requirements, will not appear on the menu: their screens will only be accessed from the parent entity screens. (But do note that all delete rules are set to “ignore” in the final generated app, to make loading of sample data easier). 

Dashboard — An executive view over your application data

Dashboards give an executive view of your application data, and can have charts and tables.

A dashboard gives that professional look that can make an app stand out and make stakeholders have an executive level overview of all the data. AI will decide which sections to put on the dashboard, the appropriate section title, and decide to use a table, gallery or a chart, and in this later case which chart type. 

Sample Data — Saving you from the most boring task of all

Good sample data is often overlooked, but it’s one of the most important things in demos and POCs. 

Getting good sample data is a tedious process, and a place where AI can really shine. But sample data is essential for users to understand and relate with the first versions of an app. Saving you from the effort of needing to think about something you know will be discarded in the future, App Generator will already create the files, the timer and the server actions to load this bootstrap data. And because it’s obvious that you do not want sample data in a production stage, this data is only loaded in development stages.

Import Data — When you have real data, to get to value faster 

Importing real data can make the first version of your applications look even more real

If you are logged in as an administrator and go to the profile dropdown on the corner and select “Manage app data”, you’ll reach a screen where you can download existing data or upload new one to replace it. Perfect when you already have customer data and want to do an even more amazing demo, or to get the first version of your app in production faster. Another tip: if you download the data xls files, clear all rows and upload again, this will delete all records without you needing to touch ODC Studio.

Sample Users — Making login a breeze, so you can test all scenarios

A sample user for each generated role, so you can test the application with each.

Creating a user for each role, just to be able to test your application, is another thing that is done for you. Tip: to show all features of the application, you might want to select the user with the Administrator role, which will see more screens. In non-development stages, there will be no “Log in as” buttons, as these don’t really make sense in production.

References to the User entity — Some entities are also users

Some entities (e.g. Employee, Doctor, Patient) can represent users that are able to login on the app

AI will also detect if there are some entities that represent users who are able to login on the app. In those instances, the Identifier of those entities will be a reference to the User entity. Some apps can even have more than one entity that references the User table (e.g. doctors and patients).

Theme Primary Color — Extract from your requirements or select a pretty one

You can specify a primary color

If you specify the theme's primary color (by name or hex value) in your requirements document, this color will be used in the generated app. You can also use the input to set the color, even if it's not mentioned in your document. Otherwise, App Generator will pick a color from a curated set, to make sure your applications will look great.

Theme Improvements — Applications that look great by default

Thinner fonts and a hero section make the app look better

The generated applications also have some small changes over the standard OutSystems UI theme, e.g. thinner labels, titles and icons, softer corners on buttons, a hero section that shows the theme color. All these add up to make applications that look great by default.

External Theme  — Integrating with your theme library

If you have a library with a theme named Theme_*, then that theme will be used

When you have a theme library that follows the Use Theme Library for app branding guidelines (e.g. where the Theme is public, its name starts with “Theme_” and the layout blocks are named Layout_Top_Menu and Layout_Side_Menu, with the correct placeholders) then the generated applications will use that theme and those layouts. When there is more than one library that meets these requirements, App Generator will use the library that has more existing references to it.

APP EDITOR— MAKE FULL-STACK CHANGES IN JUST A COUPLE OF CLICKS

Together with App Generator, we’re also launching the very first version of App Editor.

On ODC Portal, you can click Apps > Your App > Open in App Editor

App Editor is a high-productivity editor based on three simple ideas:

 1. Understanding an app is crucial — developers can spend more time trying to understand than changing something;

 2. AI can give full-stack, high-level suggestions — which would require several clicks and keystrokes;

 3. Every change is complete — it moves the application to a new valid state that makes business sense.

Here are some of the features that make this possible:

Sitemap — Understand an app with just a glance

Seeing the sitemap, the entities, and the roles, gives you a quick high-level view of any app

Being able to see the sitemap with the preview of the screens, the entities and roles, allows you to quickly understand what an application is about. 

See in which screens the entities, attributes, and roles are being used

When you click on an entity, attribute or role, you can see which screens are using it

When you click on elements on the panel on the right, you are able to see which screens are using it as they will be highlighted in the sitemap. A good example are roles: clicking on one of them, you can quickly understand which screens users with that role will be able to access.

Check the data used by each screen 

And when you click on a screen you can see which attributes it uses

Conversely, when you click on a screen, you’ll also be able to see what data it is using. This means that, as you navigate App Editor, you’ll start to understand the relationships between everything.

See static records right below the attributes that use them

Expand attributes that reference static entities to quickly see the static records

Instead of going back and forth between entities and static entities, in App Editor these are integrated, making it quicker to understand the app. If you think of it, on your current apps, most static entities are used for a single attribute anyway.

Preview with Real Data — So you can understand how the screen will look like

After an app is published, if you open a screen in App Editor, you’ll see real data in it

When you open screens in App Editor, you’ll get a preview that is much closer to what you get at runtime. This means less going back and forth between your browser and your editing environment.

Add an Entity — but also all its attributes, screens, and more, with just 2 clicks

At the top level, some suggestions might be new entities

When you click the plus icon, next to Data, some suggestions might be new entities (but also a single attribute or a static record, as explained below). AI will generate all the attributes, including static entities and static entity records, if they make sense, the screens, the menu items, and relationships to or from them. How many clicks and keystrokes would you need to accomplish this without App Editor? 

Add an External Entity — Generating show and list screens

Adding entities from other apps or external systems is also possible

You can also add entities from other OutSystems apps or from the connections already created in ODC. Not only will that entity be added, but attributes that reference it can also be created in the existing entities. These external entities will be used as read-only, creating just list and show screens. You can see what app or ODC connection they come from just by hovering the icon next to them.

Add an Attribute — To the entity, and automatically to the UI

Adding an attribute also adds it to the interface

In App Editor, when you add an attribute to an entity, the system will decide in which screens that attribute should be added. Also, the attribute can be a static entity reference, and in that case the static entity and its records are also automatically created for you.

Add a Static Record — Something that makes business sense

Add static entity records using suggestions

Speaking of static entities, you can add records to them and AI will give you suggestions that make sense, often saving you from having to type their name.

Change — Always be in control of what has been changed

See what was added or modified — the purples and green dots on the panel and the tags on the screens.

Because the high-level changes suggested in App Editor can have impact in several places of your app, you will be able to see where those changes are being applied with colored indicators, so there you are always in control.

Add Roles — And more users to your app

Add new roles to your app

AI can also suggest new roles that can be added to your app. When you add one of these, it will also try to correctly give the appropriate permissions.

Change Role Permissions — Who can read and write in each entity

Change which entities can be seen or modified by each role

But you might want to have more control, so you can change these role permissions in a central place. As of now, only checks with roles are supported, and rules that relate the current user to just some of the records need to be changed in ODC Studio.

Remove entities, attributes, records or roles — with auto-healing

Deleting something always leaves the app in a valid state

And, of course, you can also delete all these elements. And when you delete one of them, all other elements that referenced it will be automatically healed. AI doesn’t always get everything right, so sometimes you will have the need to safely delete items both from the entities and UI, and this is where App Editor does this all for you in a single click. And because renaming or reordering elements is still not supported, the need to delete might be common.

Publish — and preview your app

Publish the app directly from App Editor

And just like in ODC Studio, you can publish the app with a single click, so you can then preview it. This means that you can make, publish and test changes without ever leaving the browser.

DRILL DOWN TO STUDIO, OR GO BACK UP TO APP EDITOR, AT ANY TIME

But you’ll always need to make more granular customizations, and that’s why you can use ODC Studio for them. To make your life easier when this happens, App Generator and App Editor try to generate the best possible code.

No TrueChange Errors — Always in a valid state

Applications are always in a valid state

App Generator and App Editor applications are always in a valid state and never have TrueChange errors. Ever! You are always good to go.

No Quality Findings — for sound security, performance, maintainability and architecture

No ODC Code Quality findings

With quality in mind, the generated apps do not have any code quality findings, something that even more seasoned developers sometimes miss. 

Best Practices — following the recommended conventions

Apps try to follow the ODC best practices

The generated applications also try to follow the platform best practices, even the ones that are still not checked by TrueChange or by ODC Code quality (e.g. the naming conventions).

Edit apps in ODC Studio — for more granular control

Edit apps in ODC Studio, where you can do granular changes

All these so that when you need to jump into ODC Studio (and, because this is the very first version of App Editor, that might happen frequently), your life will be much easier. Code will be easy to read and change.

And change them again in App Editor — even after ODC Studio changes

You can use App Editor to do the big changes even if you already changed the app in ODC Studio 

But, even after you have done granular changes with Studio, you can move up again to App Editor at any time, e.g. when you want to add a new entity or a new attribute, to continue benefiting from higher productivity. For now, and in the near future, App Editor will work better for apps created by App Generator.

WHAT CAN YOU EXPECT MOVING FORWARD?

To be honest, that’s really up to you. 

These initial versions of App Generator and App Editor are just the very first start of a more ambitious journey. Our goal is for the generated applications to have more diversity, and for App Editor to become much more powerful, making sure that the combination brings 100x productivity to your app development journey.

We already know there is lots of room for improvement. 

But we need your feedback, both the good and the bad, so we can understand what we did well, what we could have done better, and to help us better prioritize what will come ahead.

So let us have your thoughts right now.

And let’s continue this amazing journey into the future of AI-assisted development, together with Mentor.