🕷️ Crawler Inspector

URL Lookup

Direct Parameter Lookup

Raw Queries and Responses

1. Shard Calculation

Query:

Response:

Calculated Shard: 144 (from laksa069)

2. Crawled Status Check

Query:

curl -X POST \
  'http://laksa144.int.ahrefs:8124/' \
  -H 'Content-Type: text/plain' \
  -H 'X-ClickHouse-Database: crawler3' \
  -H 'Authorization: Basic YXBpOg==' \
  -d 'SELECT getAhrefsURLFromUnparsed(src_unparsed) AS found_url, ifNull(toUnixTimestamp(download_stamp), 0) AS crawl_time, ifNull(toUnixTimestamp(props_url_first_seen), 0) AS first_indexed_time, download_http_code AS http_code, src_unparsed AS src_unparsed, src_root_hash AS src_root_hash, history_drop_reason AS history_drop_reason, meta_title AS meta_title, meta_descriptions AS meta_descriptions, attrs_boilerpipe_text AS attrs_boilerpipe_text, attrs_markdown AS attrs_markdown, attrs_readable_markdown AS attrs_readable_markdown, meta_canonical AS meta_canonical FROM crawler3.page_info_local FINAL PREWHERE (src_root_hash, src_unparsed) IN ((getAhrefsRootHashFromUnparsed(getAhrefsUnparsedNoserviceFromURL(\'https://www.outsystems.com/blog/posts/how-to-build-an-app/\')), getAhrefsUnparsedNoserviceFromURL(\'https://www.outsystems.com/blog/posts/how-to-build-an-app/\'))) FORMAT JSONEachRow'

Response:

{"found_url":"https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/","crawl_time":1774612071,"first_indexed_time":1635169891,"http_code":200,"src_unparsed":"com,outsystems!www,\/blog\/posts\/how-to-build-an-app\/ s443","src_root_hash":"13191447194497726944","history_drop_reason":null,"meta_title":"How to Build an App with Low-Code","meta_descriptions":["An idea for an app is only as good as your ability to bring it to life. In this blog post, we'll show you how to build an app using low-code."],"attrs_boilerpipe_text":"An idea for an app is only as good as your ability to bring it to life. The problem is software development is hard, it takes time (and patience!), and it’s not really over once you hit publish. In this ever-changing world, you need to continually evolve it to meet demands.\nThe good news is that now there are modern\nlow-code development approaches\n with embedded tools designed to accelerate app development and automate much of the application lifecycle. Before you start rolling your eyes, hear me out:\nlow-code platforms like OutSystems use visual development\n, yes, but as a way to wrap up the complexities that you typically face when creating an app or system. You're always in control.  You can customize HTML, CSS, and JavaScript on the front-end. And you can use .NET code in your applications. You are never limited in what you can achieve. Plus, you can integrate easily with other applications by consuming REST or SOAP APIs, or use one of thousands of pre-built connectors and components in our open-source Forge repository.\nIt’s (code) evolution, baby.\nIn this article, I’ll show you how you can build an app with a low-code platform: the OutSystems platform. For this demo, I’ll be creating an app that most companies need:\nan employee onboarding app\n.\nBefore we start, sign up for the\nOutSystems free edition\n (no credit card info needed), set up your personal environment, and follow this tutorial to see what creating an app in OutSystems really looks like.\nNow, without further ado, let’s get started.\nStep 1: Create a New Application\nThere are two routes you can take to create a new app in Service Studio, the OutSystems IDE. You can either\nstart from scratch or use one of dozens of sample applications\nas a foundation. For today’s example, I’ll build the app from scratch and walk you through all the steps to create the employee onboarding app.\nPart of setting up a new application is defining what type of app we want to build: is it web, tablet, or phone app? In this example, I’m going to build a\nreactive web app\n—which is basically an app with a responsive interface that runs in the browser and adapts the user experience to all kinds of devices and screen sizes.\nIf later I want to\ndeploy the same app for phone and tablet, I can do it without writing it from scratch again\n. That’s because with OutSystems we can easily share data, logic and UI elements, so we can always create one type of app first and then\nreuse that work to create another type\n. In the case of a mobile app, the same code can be published on both iOS and Android. So, once again, I don’t have to build it twice.\nThe final step in setting up a new application is filling out some basic information. Here we need to name the app, give it a description, choose the base color for CSS, and upload an icon. If you choose to upload an icon, the app will\nautomatically kick-off the CSS\nwith the right colors—and that’s what I’m going to do in this example.\nIf you’re not sure about all the details yet, don’t worry, we can change all of this later.\nStep 2: Build the App Shell\nOnce the new application is created, we can add and manage different modules like services, libraries, and extensions as needed.\nI’m going to create a reactive web app module with the same name as my application.\nAnd here’s what that looks like.\nThe reactive web app module creates an application shell that we can use to start building. Elements like\nprocesses, interface elements, logic elements, and data sources can be dragged and dropped\ninto the IDE to quickly\ncreate app functionality\n.\nThe toolbox is on the left, the canvas is in the middle, and the navigation is on the right.\nIn this example, the first thing I’ll do is create an employee data table that’s connected to an employee database. The table can have create, read, update, and delete operations that can be dragged into the flows as needed.\nFor the table, I’ll add employee attributes like first name, last name, phone, and email. As I create those names, OutSystems can infer the data type attribute based on the naming convention. I’ll also want to create a\nDepartment\ntable; once that’s created, I can add that foreign key to the employee table by dragging a shortcut over.\nStep 3: Build a Login Screen\nIn the Interface tab, we have access to a bunch of different controls and features. The first one I’m going to add is a login screen.\nThis will add a default login process featuring a login button that executes an action of going to the server to validate and authenticate the login process. This can be\nhooked up to login providers\nlike Okta or social logins like Google and Facebook.\nBy clicking the theme editor button, I can edit the colors, fonts, backgrounds, and structure of the login theme.\nStep 4: Modify the Theme with CSS\nIf I want to modify any element of the theme, I can do it in just a few clicks without any CSS knowledge. It’s a quick way to enhance a theme.\nBut, if I want to edit the CSS, I can also do it. The CSS editor shows the\nOutSystems UI\n, which is the global default.\nAll tabs to the left of it will inherit or override the information from the OutSystems UI, allowing us to get more specific as needed as we style the overall theme, the app, and the login.\nTo update the code, we can use the WYSIWYG editor or directly type it in.\nStep 5: Add Functionality\nNow, I click on the\nMainFlow\n, which will show me folders of screens.\nTo create a screen, we can just drag and drop them into the canvas.\nIn this case, this will automatically create a list screen and a detailed screen. This will give end-users access to search for employees, update forms, etc.\nAlthough the screens are automatically created, it doesn't mean we don’t have control over them. The platform\nautomatically creates the screens following best practices\nand to give us what we’ll most likely need, but\nwe can always design it in any way\n, shape or form possible, and affect every pixel in it.\nOn the list, you can see that it pulled data from the data table to automatically create headers that can be sorted. It also added pagination to reduce load times, along with a search function and an\nAdd Employee\nbutton to create a new record. If I want to add more fields, I can just drag and drop them from the tab.\nThroughout the screen we have placeholders for different types of elements.\nIf we toggle over to the Interface tab, we can see each element in the Widget Tree. Here we can dig into the details of each widget and edit them as needed. We can also hover the modules on the canvas to move things around and make edits.\nFor the UI, there are only three elements you have to understand to develop in OutSystems:\nVariables that you can add\nData fetches\nActions.\nEvery UI widget we add will be hooked up to a variable or data source, or will have an action running against it. We can add and edit those in the\nElements tab\n.\nStep 6: Working with Logic Trees\nLet’s take a look at the search function as an example of what a logic tree looks like.\nThe visual designer shows how the logic is executed; the toolkit on the left will change to provide us with additional options.\nWe can drag and drop these tools onto the canvas to create more complex logic functions. We can add pretty much any logic, from\n“if-statements”\nto more complex ones.\nStep 7: Check Your Work and Publish!\nOn the\nEmployee Details\nscreen, we’ll see a flow designer for a form to add a new employee. However,\nOutSystems detects issues that we’ll want to address before publishing\n, such as security issues and performance warnings like calling the service twice.\nOnce we’re ready to go, all we have to do is\nclick the green button\nat the top for\none-click publish\n. This will store a new version to the cloud, giving us the ability to revert to older versions as needed. We can also merge the code with other developers’ code to see the differences between versions.\nThe publish action compiles and updates the database scripts, updates the database model, and deploys the web application. Once it’s published, the green button will turn to a blue Open in Browser button that allows us to try the application out.\nReady to Give It a Try ?\nThis is just a simple, almost\n“Hello, World!”\napplication to show you how developing with OutSystems looks like. From here, the sky's the limit. OutSystems was designed to build\nmodern enterprise-grade applications and experiences\n, with a great amount of flexibility through accelerators or even custom code if necessary.\nIf you want to explore it further, you can\nsign-up for our free edition here\n.","attrs_markdown":"- [Log in](https:\/\/www.outsystems.com\/Login\/Login)\n- [Contact us](https:\/\/www.outsystems.com\/contact-sales\/)\n- [Support](https:\/\/success.outsystems.com\/support\/home\/)\n- ENEnglish\n  \n  - [English](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/)\n  - [Deutsch](https:\/\/www.outsystems.com\/de-de\/blog\/)\n\n[![logo](https:\/\/www.outsystems.com\/blog\/-\/media\/themes\/outsystems\/website\/site-theme\/imgs\/logo.svg?updated=20211217193441)](https:\/\/www.outsystems.com\/)\n\nMenu\n\n- [![User-Interface](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/platform-mobile-tab-icon.svg?updated=20240731083628) Platform](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#main-menu-entry-1)\n- [![use-cases-mobile-tab-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/use-cases-mobile-tab-icon.svg?updated=20240905083421) Use cases](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#main-menu-entry-2)\n- [![App-Gallery](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/solutions-mobile-tab-icon.svg?updated=20240731083739) Solutions](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#main-menu-entry-3)\n- [![Operations](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/for-developers-mobile-tab-icon.svg?updated=20240731083918) Developers](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#main-menu-entry-4)\n- [![Corporate-Building](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/about-outsystems-mobile-tab-icon.svg?updated=20240731084001) About us](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#main-menu-entry-5)\n\nPlatform overview\n\n- [\\#1 AI-Powered Low-Code Platform Explore the leading platform for full lifecycle AI software development](https:\/\/www.outsystems.com\/low-code-platform\/)\n- [Agent Workbench Build and deploy enterprise-ready AI agents](https:\/\/www.outsystems.com\/low-code-platform\/agentic-ai-workbench\/)\n- [Mentor Custom AI app generation from a natural-language prompt](https:\/\/www.outsystems.com\/low-code-platform\/mentor-ai-app-generation\/)\n- [Agentic workflows Automate and orchestrate human-agent handoffs](https:\/\/www.outsystems.com\/low-code-platform\/workflow-automation\/)\n\n- [Data fabric The virtual data layer to power all your AI apps and agents](https:\/\/www.outsystems.com\/low-code-platform\/data-fabric\/)\n- [Security and compliance Your enterprise policies and governance built into every app and agent](https:\/\/www.outsystems.com\/low-code-platform\/security\/)\n- [Enterprise integration Integrate with any system, app, and AI model](https:\/\/www.outsystems.com\/low-code-platform\/integration\/)\n- [Pricing Get started now with flexible plans](https:\/\/www.outsystems.com\/pricing-and-editions\/)\n\nDiscover more\n\n- [Explore what you can build](https:\/\/www.outsystems.com\/application\/)\n- [Customer stories](https:\/\/www.outsystems.com\/case-studies\/)\n- [Platform demos](https:\/\/www.outsystems.com\/demos\/)\n- [AI Software Development Guide](https:\/\/www.outsystems.com\/ai\/ai-software-development\/)\n\n[![outystems-mentor-dark-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/outystems-mentor-dark-icon.svg?updated=20250715131753) Orchestrate human and AI collaboration](https:\/\/www.outsystems.com\/ai\/)\n\n[![outystems-agent-workbench-dark-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/outystems-agent-workbench-dark-icon.svg?updated=20250715131752) What is low-code?](https:\/\/www.outsystems.com\/low-code\/)\n\nExternal apps\n\n- [Citizen portals](https:\/\/www.outsystems.com\/use-cases\/e-citizen-apps\/)\n- [Mobile banking portals](https:\/\/www.outsystems.com\/use-cases\/mobile-finance\/)\n- [Insurance portals](https:\/\/www.outsystems.com\/use-cases\/insurance-portals-apps\/)\n- [Virtual care portals](https:\/\/www.outsystems.com\/use-cases\/virtual-care\/)\n- [Customer account creation portals](https:\/\/www.outsystems.com\/use-cases\/digital-customer-onboarding\/)\n- [Customer self-service portals](https:\/\/www.outsystems.com\/use-cases\/customer-self-service-portals\/)\n- [More about external apps](https:\/\/www.outsystems.com\/use-cases\/external-applications\/)\n\nCore systems\n\n- [Digital lending systems](https:\/\/www.outsystems.com\/use-cases\/digital-lending\/)\n- [Claims management systems](https:\/\/www.outsystems.com\/use-cases\/claims-management\/)\n- [Field service systems](https:\/\/www.outsystems.com\/use-cases\/field-services\/)\n- [Supply chain systems](https:\/\/www.outsystems.com\/use-cases\/supply-chain\/)\n- [Salesforce Integration](https:\/\/www.outsystems.com\/use-cases\/salesforce\/)\n- [SAP](https:\/\/www.outsystems.com\/use-cases\/sap-extend\/)\n- [More about core systems](https:\/\/www.outsystems.com\/use-cases\/core-systems\/)\n\nInternal apps\n\n- [Employee onboarding](https:\/\/www.outsystems.com\/use-cases\/employee-onboarding\/)\n- [Employee self-service](https:\/\/www.outsystems.com\/use-cases\/employee-self-service\/)\n- [Office management](https:\/\/www.outsystems.com\/use-cases\/office-management-system\/)\n- [Internal case management](https:\/\/www.outsystems.com\/use-cases\/case-management\/)\n- [IT service management](https:\/\/www.outsystems.com\/use-cases\/servicenow\/)\n- [Performance management](https:\/\/www.outsystems.com\/use-cases\/performance-management-system\/)\n- [More about internal apps](https:\/\/www.outsystems.com\/use-cases\/internal-business-apps\/)\n\n[![application-monitoring-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/application-monitoring-icon.svg?updated=20240326185523) See more use cases](https:\/\/www.outsystems.com\/use-cases\/)\n\n[![customer-stories-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https:\/\/www.outsystems.com\/case-studies\/)\n\nSolutions for your industry\n\n- [Banking & Financial Services](https:\/\/www.outsystems.com\/industries\/financial-services\/)\n- [Insurance](https:\/\/www.outsystems.com\/industries\/insurance\/)\n- [Government](https:\/\/www.outsystems.com\/industries\/government\/)\n- [Manufacturing](https:\/\/www.outsystems.com\/industries\/manufacturing\/)\n- [See more industries here](https:\/\/www.outsystems.com\/industries\/)\n\n- [Healthcare](https:\/\/www.outsystems.com\/industries\/healthcare\/)\n- [Energy and Utilities](https:\/\/www.outsystems.com\/industries\/energy-and-utilities\/)\n- [Retail](https:\/\/www.outsystems.com\/industries\/retail-and-wholesale\/)\n- [Education](https:\/\/www.outsystems.com\/industries\/education\/)\n\nBusiness initiatives\n\n- [Agentic AI innovation](https:\/\/www.outsystems.com\/initiatives\/agentic-ai-solutions\/)\n- [AI-driven development](https:\/\/www.outsystems.com\/initiatives\/ai-driven-development\/)\n- [IT speed and agility](https:\/\/www.outsystems.com\/initiatives\/it-agility\/)\n- [Operational efficiency](https:\/\/www.outsystems.com\/initiatives\/automation-and-efficiency\/)\n- [Customer experience](https:\/\/www.outsystems.com\/initiatives\/digital-experiences\/)\n- [Legacy modernization](https:\/\/www.outsystems.com\/initiatives\/legacy-modernization\/)\n\n[![full-stack-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/full-stack-icon.svg?updated=20240326185532) Discover app examples](https:\/\/www.outsystems.com\/application\/)\n\n[![customer-stories-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https:\/\/www.outsystems.com\/case-studies\/)\n\nDiscover our universe\n\n- [For developers](https:\/\/www.outsystems.com\/developers\/)\n- [Community](https:\/\/www.outsystems.com\/community\/)\n- [Forums](https:\/\/www.outsystems.com\/forums\/)\n- [Forge marketplace](https:\/\/www.outsystems.com\/forge\/)\n- [User groups](https:\/\/www.outsystems.com\/events\/user-groups\/)\n- [Tech Talks](https:\/\/www.outsystems.com\/events\/tech-talks\/)\n\nLearn with us\n\n- [Training](https:\/\/learn.outsystems.com\/training)\n- [Documentation](https:\/\/success.outsystems.com\/documentation\/)\n- [Jump Start sessions](https:\/\/www.outsystems.com\/events\/jump-start\/)\n- [Certifications](https:\/\/www.outsystems.com\/certifications\/)\n\nAdvocacy programs\n\n- [MVP Program](https:\/\/www.outsystems.com\/community\/advocacy-programs\/mvps\/)\n- [Champions program](https:\/\/www.outsystems.com\/community\/advocacy-programs\/champions\/)\n\nExplore our resources\n\n- [Support](https:\/\/success.outsystems.com\/support\/home\/)\n- [Product updates](https:\/\/www.outsystems.com\/product-updates\/)\n- [Developer newsletter](https:\/\/www.outsystems.com\/community\/developer-newsletter\/)\n\n[![full-stack-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/full-stack-icon.svg?updated=20240326185532) Discover app examples](https:\/\/www.outsystems.com\/application\/)\n\n[![customer-stories-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https:\/\/www.outsystems.com\/case-studies\/)\n\nCompany\n\n- [The company We pioneered this stuff](https:\/\/www.outsystems.com\/company\/)\n- [Customer stories How people like you use OutSystems—and why](https:\/\/www.outsystems.com\/case-studies\/)\n- [Partners They've been there and done that](https:\/\/www.outsystems.com\/partners\/)\n- [Blog We're into this stuff](https:\/\/www.outsystems.com\/blog\/)\n- [Webinars Live and on-demand sessions](https:\/\/www.outsystems.com\/webinars\/)\n\n- [Events Come and say hi](https:\/\/www.outsystems.com\/events\/)\n- [Resources Get the low-down on low-code (and lots of other stuff too!)](https:\/\/www.outsystems.com\/resources\/)\n- [Services Smart folks are here to help](https:\/\/www.outsystems.com\/success-services\/)\n- [Careers Got talent? Join us\\!](https:\/\/www.outsystems.com\/careers\/)\n- [Discovery Hub A centralized list of content](https:\/\/www.outsystems.com\/resources\/discovery\/)\n\n[![customer-stories-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https:\/\/www.outsystems.com\/case-studies\/)\n\n[![user-interface-icon](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/icons\/menu\/user-interface-icon.svg?updated=20240326185546) Explore the platform](https:\/\/www.outsystems.com\/low-code-platform\/)\n\n- [Log in](https:\/\/www.outsystems.com\/Login\/Login)\n- [Start free](https:\/\/www.outsystems.com\/Platform\/Signup?uc=startfree)\n- [Contact Sales](https:\/\/www.outsystems.com\/contact-sales\/)\n- [Support](https:\/\/success.outsystems.com\/support\/home\/)\n\nOpen Search\n\nSearch in OutSystems\n\nCancel Search\n\nSubmit Search\n\nCancel Search\n\nENEnglish\n\n- [English](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/)\n- [Deutsch](https:\/\/www.outsystems.com\/de-de\/blog\/)\n\n[Schedule demo](https:\/\/www.outsystems.com\/schedule-demo\/)\n\n[Start Free](https:\/\/www.outsystems.com\/Platform\/Signup?uc=startfree)\n\n[My Platform](https:\/\/www.outsystems.com\/personaledition\/)\n\nOutSystems Blog Dev Zone\n\n[All Articles](https:\/\/www.outsystems.com\/blog\/) [Perspectives](https:\/\/www.outsystems.com\/blog\/category\/perspectives\/) [Dev Zone](https:\/\/www.outsystems.com\/blog\/category\/dev-zone\/) [Engineering](https:\/\/www.outsystems.com\/blog\/category\/engineering\/)\n\n[Dev Zone](https:\/\/www.outsystems.com\/blog\/category\/dev-zone\/)\n\n# How to Build an App with OutSystems\n[![jon-sullivan](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/author-photo\/jon-sullivan.jpeg?updated=20220111091601&mw=80&mh=80&hash=7D5C7305B542793E5D5174C6D35CE71C)](https:\/\/www.outsystems.com\/blog\/author\/jon-sullivan\/)\n\n[Jon Sullivan](https:\/\/www.outsystems.com\/blog\/author\/jon-sullivan\/) April 05, 2024 • 7 min read\n\n![building an app with outsystems hero](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/hero-bp-how-to-build-an-app-with-outsystems-v2.jpg?updated=20240411143445)\n\n###### This might interest you\n- [Evaluation Guide](https:\/\/www.outsystems.com\/evaluation-guide\/)\n- [OutSystems low-code platform free edition](https:\/\/www.outsystems.com\/low-code-platform\/free\/)\n- [OutSystems Training](https:\/\/learn.outsystems.com\/training)\n\n###### Subscribe to the blog\n1\/2\n\nBy providing my email address, I agree to receive alerts and news about the OutSystems blog and new blog posts. [What does this mean to you?](https:\/\/www.outsystems.com\/legal\/consent-policy\/)\n\nYour information will not be shared with any third parties and will be used in accordance with OutSystems [privacy policy](https:\/\/www.outsystems.com\/legal\/terms-of-use\/privacy-statement\/). You may manage your [subscriptions or opt out](https:\/\/go1.outsystems.com\/outsystems-preference-center.html) at any time.\n\nGet the latest low-code content right in your inbox.\n\nSubscription Sucessful\n\nAn idea for an app is only as good as your ability to bring it to life. The problem is software development is hard, it takes time (and patience!), and it’s not really over once you hit publish. In this ever-changing world, you need to continually evolve it to meet demands.\n\n- Suggested for you\n- Table of contents\n\nSuggested for you\n\n[![call-out](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/call-out.jpg?updated=20230717103030)Give OutSystems a try - for free! Sign up for free edition](https:\/\/www.outsystems.com\/low-code-platform\/free\/)\n\nTable of contents\n\n#### Table of contents:\n- [Step 1: Create a New Application](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-1)\n- [Step 2: Build the App Shell](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-2)\n- [Step 3: Build a Login Screen](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-3)\n- [Step 4: Modify the Theme with CSS](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-4)\n- [Step 5: Add Functionality](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-5)\n- [Step 6: Working with Logic Trees](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-6)\n- [Step 7: Check Your Work and Publish\\!](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#step-7)\n- [Ready to Give It a Try ?](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/#give-it-a-try)\n\nThe good news is that now there are modern [low-code development approaches](https:\/\/www.outsystems.com\/low-code\/) with embedded tools designed to accelerate app development and automate much of the application lifecycle. Before you start rolling your eyes, hear me out: [low-code platforms like OutSystems use visual development](https:\/\/www.outsystems.com\/application-development\/visual-programming-importance-and-advantages\/), yes, but as a way to wrap up the complexities that you typically face when creating an app or system. You're always in control. You can customize HTML, CSS, and JavaScript on the front-end. And you can use .NET code in your applications. You are never limited in what you can achieve. Plus, you can integrate easily with other applications by consuming REST or SOAP APIs, or use one of thousands of pre-built connectors and components in our open-source Forge repository.\n\n[It’s (code) evolution, baby.](https:\/\/www.youtube.com\/watch?v=aDaOgu2CQtI)\n\nIn this article, I’ll show you how you can build an app with a low-code platform: the OutSystems platform. For this demo, I’ll be creating an app that most companies need: **an employee onboarding app**.\n\nBefore we start, sign up for the [OutSystems free edition](https:\/\/www.outsystems.com\/low-code-platform\/free\/) (no credit card info needed), set up your personal environment, and follow this tutorial to see what creating an app in OutSystems really looks like.\n\nNow, without further ado, let’s get started.\n\n## Step 1: Create a New Application\nThere are two routes you can take to create a new app in Service Studio, the OutSystems IDE. You can either **start from scratch or use one of dozens of sample applications** as a foundation. For today’s example, I’ll build the app from scratch and walk you through all the steps to create the employee onboarding app.\n\n![developing outsystems app from scratch](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-01.jpg?updated=20221103120130)\n\nPart of setting up a new application is defining what type of app we want to build: is it web, tablet, or phone app? In this example, I’m going to build a [reactive web app](https:\/\/www.outsystems.com\/blog\/posts\/reactive-web-applications\/)—which is basically an app with a responsive interface that runs in the browser and adapts the user experience to all kinds of devices and screen sizes.\n\n![types of apps](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-2.jpg?updated=20221103120224)\n\nIf later I want to **deploy the same app for phone and tablet, I can do it without writing it from scratch again**. That’s because with OutSystems we can easily share data, logic and UI elements, so we can always create one type of app first and then **reuse that work to create another type**. In the case of a mobile app, the same code can be published on both iOS and Android. So, once again, I don’t have to build it twice.\n\nThe final step in setting up a new application is filling out some basic information. Here we need to name the app, give it a description, choose the base color for CSS, and upload an icon. If you choose to upload an icon, the app will **automatically kick-off the CSS** with the right colors—and that’s what I’m going to do in this example.\n\nIf you’re not sure about all the details yet, don’t worry, we can change all of this later.\n\n![app info](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-3.jpg?updated=20221103120230)\n\n## Step 2: Build the App Shell\nOnce the new application is created, we can add and manage different modules like services, libraries, and extensions as needed.\n\nI’m going to create a reactive web app module with the same name as my application.\n\n![developing employee onboarding app](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-4.jpg?updated=20221103120236)\n\nAnd here’s what that looks like.\n\n![reactive web app module](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-5.jpg?updated=20221103151609)\n\nThe reactive web app module creates an application shell that we can use to start building. Elements like **processes, interface elements, logic elements, and data sources can be dragged and dropped** into the IDE to quickly **create app functionality**.\n\nThe toolbox is on the left, the canvas is in the middle, and the navigation is on the right.\n\n![ide elements](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-with-outsystems-figure-5-copy.jpg?updated=20221103144725)\n\nIn this example, the first thing I’ll do is create an employee data table that’s connected to an employee database. The table can have create, read, update, and delete operations that can be dragged into the flows as needed.\n\n![outsystems ide environment](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-6.jpg?updated=20221103120253)\n\nFor the table, I’ll add employee attributes like first name, last name, phone, and email. As I create those names, OutSystems can infer the data type attribute based on the naming convention. I’ll also want to create a *Department* table; once that’s created, I can add that foreign key to the employee table by dragging a shortcut over.\n\n## Step 3: Build a Login Screen\nIn the Interface tab, we have access to a bunch of different controls and features. The first one I’m going to add is a login screen.\n\n![app login screen](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-7.jpg?updated=20221103120258)\n\nThis will add a default login process featuring a login button that executes an action of going to the server to validate and authenticate the login process. This can be **hooked up to login providers** like Okta or social logins like Google and Facebook.\n\nBy clicking the theme editor button, I can edit the colors, fonts, backgrounds, and structure of the login theme.\n\n## Step 4: Modify the Theme with CSS\nIf I want to modify any element of the theme, I can do it in just a few clicks without any CSS knowledge. It’s a quick way to enhance a theme.\n\n![login screen css modification](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-8.jpg?updated=20221103120304)\n\nBut, if I want to edit the CSS, I can also do it. The CSS editor shows the [OutSystems UI](https:\/\/outsystemsui.outsystems.com\/OutsystemsUiWebsite\/), which is the global default.\n\n![outsystems ui](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-9.jpg?updated=20221103120310)\n\nAll tabs to the left of it will inherit or override the information from the OutSystems UI, allowing us to get more specific as needed as we style the overall theme, the app, and the login.\n\nTo update the code, we can use the WYSIWYG editor or directly type it in.\n\n## Step 5: Add Functionality\nNow, I click on the *MainFlow*, which will show me folders of screens.\n\nTo create a screen, we can just drag and drop them into the canvas.\n\nIn this case, this will automatically create a list screen and a detailed screen. This will give end-users access to search for employees, update forms, etc.\n\n![drag and drop](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-10.jpg?updated=20221103120137)\n\nAlthough the screens are automatically created, it doesn't mean we don’t have control over them. The platform **automatically creates the screens following best practices** and to give us what we’ll most likely need, but **we can always design it in any way**, shape or form possible, and affect every pixel in it.\n\n![employee list](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-11.jpg?updated=20221103120145)\n\nOn the list, you can see that it pulled data from the data table to automatically create headers that can be sorted. It also added pagination to reduce load times, along with a search function and an *Add Employee* button to create a new record. If I want to add more fields, I can just drag and drop them from the tab.\n\nThroughout the screen we have placeholders for different types of elements.\n\n![add employee to list](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-with-outsystems-figure-12-copy.jpg?updated=20221103152500)\n\nIf we toggle over to the Interface tab, we can see each element in the Widget Tree. Here we can dig into the details of each widget and edit them as needed. We can also hover the modules on the canvas to move things around and make edits.\n\n![employee list canvas](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-12.jpg?updated=20221103153023)\n\nFor the UI, there are only three elements you have to understand to develop in OutSystems:\n\n- Variables that you can add\n- Data fetches\n- Actions.\n\nEvery UI widget we add will be hooked up to a variable or data source, or will have an action running against it. We can add and edit those in the *Elements tab*.\n\n## Step 6: Working with Logic Trees\n![logic trees](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-13.jpg?updated=20221103153106)\n\nLet’s take a look at the search function as an example of what a logic tree looks like.\n\nThe visual designer shows how the logic is executed; the toolkit on the left will change to provide us with additional options.\n\nWe can drag and drop these tools onto the canvas to create more complex logic functions. We can add pretty much any logic, from *“if-statements”* to more complex ones.\n\n## Step 7: Check Your Work and Publish\\!\n![employee app deployment](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-14.jpg?updated=20221103153143)\n\nOn the *Employee Details* screen, we’ll see a flow designer for a form to add a new employee. However, **OutSystems detects issues that we’ll want to address before publishing**, such as security issues and performance warnings like calling the service twice.\n\nOnce we’re ready to go, all we have to do is **click the green button** at the top for **one-click publish**. This will store a new version to the cloud, giving us the ability to revert to older versions as needed. We can also merge the code with other developers’ code to see the differences between versions.\n\nThe publish action compiles and updates the database scripts, updates the database model, and deploys the web application. Once it’s published, the green button will turn to a blue Open in Browser button that allows us to try the application out.\n\n## Ready to Give It a Try ?\nThis is just a simple, almost *“Hello, World!”* application to show you how developing with OutSystems looks like. From here, the sky's the limit. OutSystems was designed to build **modern enterprise-grade applications and experiences**, with a great amount of flexibility through accelerators or even custom code if necessary.\n\nIf you want to explore it further, you can [sign-up for our free edition here](https:\/\/www.outsystems.com\/low-code-platform\/free\/).\n\n[![jon-sullivan](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/author-photo\/jon-sullivan.jpeg?updated=20220111091601&mw=80&mh=80&hash=7D5C7305B542793E5D5174C6D35CE71C)](https:\/\/www.outsystems.com\/blog\/author\/jon-sullivan\/)\n\n[Jon Sullivan](https:\/\/www.outsystems.com\/blog\/author\/jon-sullivan\/)\n\nJon Sullivan is a Solution Engineer at OutSystems, working with users globally to align technical needs to platform features. He has 10+ years of experience developing transportation, law enforcement, and healthcare software solutions. When not playing with his four kids, you can find him cheering for the Iowa Hawkeyes, golfing or working outside.\n\n[See All Posts From this author](https:\/\/www.outsystems.com\/blog\/author\/jon-sullivan\/)\n\n##### Tags\n- [1-click publish](https:\/\/www.outsystems.com\/blog\/tag\/?tag=1-click-publish)\n- [Application Development](https:\/\/www.outsystems.com\/blog\/tag\/?tag=app-development)\n- [best practices](https:\/\/www.outsystems.com\/blog\/tag\/?tag=best-practices)\n- [custom app](https:\/\/www.outsystems.com\/blog\/tag\/?tag=custom-app)\n- [developer experience](https:\/\/www.outsystems.com\/blog\/tag\/?tag=developer-experience)\n- [reactive web apps](https:\/\/www.outsystems.com\/blog\/tag\/?tag=reactive-web-apps)\n- [reactive web](https:\/\/www.outsystems.com\/blog\/tag\/?tag=reactive-web)\n- [responsive apps](https:\/\/www.outsystems.com\/blog\/tag\/?tag=responsive-apps)\n- [reusable code](https:\/\/www.outsystems.com\/blog\/tag\/?tag=reusable-code)\n- [Service studio](https:\/\/www.outsystems.com\/blog\/tag\/?tag=service-studio)\n- [Web Application](https:\/\/www.outsystems.com\/blog\/tag\/?tag=web-application)\n- [low code](https:\/\/www.outsystems.com\/blog\/tag\/?tag=low-code)\n- [low-code development](https:\/\/www.outsystems.com\/blog\/tag\/?tag=low-code-development)\n- [low-code platform](https:\/\/www.outsystems.com\/blog\/tag\/?tag=low-code-platform)\n- [how-to](https:\/\/www.outsystems.com\/blog\/tag\/?tag=how-to)\n\n### Related posts\n[Dev Zone](https:\/\/www.outsystems.com\/blog\/category\/dev-zone\/)\n\n##### [How to Build Amazing UX and UI with Low-Code](https:\/\/www.outsystems.com\/blog\/posts\/how-to-create-amazing-ux-ui-with-low-code\/)\n[![joao-paulo-carvalho](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/author-photo\/joao-paulo-carvalho.png?updated=20220413105116&mw=48&mh=48&hash=5A6D4AA3352B6FEE535D618E99A4D1EE)](https:\/\/www.outsystems.com\/blog\/author\/joao-paulo-carvalho\/)\n\n[João Paulo Carvalho](https:\/\/www.outsystems.com\/blog\/author\/joao-paulo-carvalho\/)\n\nApril 13, 2022 3 min read\n\n[Dev Zone](https:\/\/www.outsystems.com\/blog\/category\/dev-zone\/)\n\n##### [How to Consume and Expose APIs with Low-Code](https:\/\/www.outsystems.com\/blog\/posts\/low-code-api\/)\n[![fernando-moitinho](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/userphoto\/fernando-moitinho.jpeg?updated=20220111091614&mw=48&mh=48&hash=BBA8012634266BFA7F16A40D74E1FB61)](https:\/\/www.outsystems.com\/blog\/author\/fernando-moitinho\/)\n\n[Fernando Moitinho](https:\/\/www.outsystems.com\/blog\/author\/fernando-moitinho\/)\n\nMay 05, 2022 3 min read\n\n[Dev Zone](https:\/\/www.outsystems.com\/blog\/category\/dev-zone\/)\n\n##### [How to Do DevOps With Low-Code](https:\/\/www.outsystems.com\/blog\/posts\/how-to-do-devops-with-low-code\/)\n[![mike\\_josephson](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/userphoto\/mike_josephson.jpg?updated=20220111091623&mw=48&mh=48&hash=455B15860C632F1EBB05B14F4E0E9C0D)](https:\/\/www.outsystems.com\/blog\/author\/mikejosephson\/)\n\n[Mike Josephson](https:\/\/www.outsystems.com\/blog\/author\/mikejosephson\/)\n\nApril 22, 2022 3 min read\n\nSite Map\n\nMenu\n\n###### Low-code Platform\n- Low-code Platform\n  \n  Go back\n- [Platform Overview](https:\/\/www.outsystems.com\/low-code-platform\/)\n- [Pricing](https:\/\/www.outsystems.com\/pricing-and-editions\/)\n- [Evaluation Guide](https:\/\/www.outsystems.com\/evaluation-guide\/)\n- [Low-Code Basics](https:\/\/www.outsystems.com\/low-code\/)\n- [Application Templates](https:\/\/www.outsystems.com\/application-templates\/)\n- [Start Free](https:\/\/www.outsystems.com\/low-code-platform\/free\/)\n\n###### Why OutSystems\n- Why OutSystems\n  \n  Go back\n- [Customer Stories](https:\/\/www.outsystems.com\/case-studies\/)\n- [Analyst Reviews](https:\/\/www.outsystems.com\/analysts\/)\n- [Events](https:\/\/www.outsystems.com\/events\/)\n- [Services](https:\/\/www.outsystems.com\/success-services\/)\n- [Partners](https:\/\/www.outsystems.com\/partners\/)\n- [FAQs](https:\/\/www.outsystems.com\/company\/faqs\/)\n- [Careers & Culture](https:\/\/www.outsystems.com\/careers\/)\n- [Mendix vs. OutSystems](https:\/\/www.outsystems.com\/mendix-vs-outsystems\/)\n\n###### Solutions By Business Initiative\n- Solutions By Business Initiative\n  \n  Go back\n- [IT speed and agility](https:\/\/www.outsystems.com\/initiatives\/it-agility\/)\n- [Agentic AI innovation](https:\/\/www.outsystems.com\/initiatives\/agentic-ai-solutions\/)\n- [Legacy modernization](https:\/\/www.outsystems.com\/initiatives\/legacy-modernization\/)\n- [Customer experience](https:\/\/www.outsystems.com\/initiatives\/digital-experiences\/)\n- [Operational efficiency](https:\/\/www.outsystems.com\/initiatives\/automation-and-efficiency\/)\n- [Agile culture & Dev at scale](https:\/\/www.outsystems.com\/initiatives\/agile-development-at-scale\/)\n\n###### Solutions By Industry\n- Solutions By Industry\n  \n  Go back\n- [Banking & Financial Services](https:\/\/www.outsystems.com\/industries\/financial-services\/)\n- [Insurance](https:\/\/www.outsystems.com\/industries\/insurance\/)\n- [Government](https:\/\/www.outsystems.com\/industries\/government\/)\n- [Manufacturing](https:\/\/www.outsystems.com\/industries\/manufacturing\/)\n- [Healthcare](https:\/\/www.outsystems.com\/industries\/healthcare\/)\n- [Energy and Utilities](https:\/\/www.outsystems.com\/industries\/energy-and-utilities\/)\n- [Retail](https:\/\/www.outsystems.com\/industries\/retail-and-wholesale\/)\n- [Education](https:\/\/www.outsystems.com\/industries\/education\/)\n- [See all Industries](https:\/\/www.outsystems.com\/industries\/)\n\n###### Partners\n- Partners\n  \n  Go back\n- [Overview](https:\/\/www.outsystems.com\/partners\/)\n- [Find a Partner](https:\/\/www.outsystems.com\/partners\/list\/)\n- [Become a Partner](https:\/\/www.outsystems.com\/partners\/become-a-partner\/)\n- [Technology Alliance](https:\/\/www.outsystems.com\/partners\/technology-alliance\/)\n- [Training Partners](https:\/\/www.outsystems.com\/partners\/training-partners\/)\n- [Access Partner Center](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/)\n\n###### Developers\n- Developers\n  \n  Go back\n- [Training](https:\/\/learn.outsystems.com\/training)\n- [Product Updates](https:\/\/www.outsystems.com\/product-updates\/)\n- [Jump Start Sessions](https:\/\/www.outsystems.com\/events\/jump-start\/)\n- [Certifications](https:\/\/www.outsystems.com\/certifications\/academy-certifications\/?page=0)\n- [Forge Marketplace](https:\/\/www.outsystems.com\/forge\/)\n- [User Groups](https:\/\/www.outsystems.com\/events\/user-groups\/)\n- [Tech Talks](https:\/\/www.outsystems.com\/events\/tech-talks\/)\n- [De\/Coded Podcast](https:\/\/www.outsystems.com\/events\/decoded-podcast\/)\n\n###### Community\n- Community\n  \n  Go back\n- [Community Home](https:\/\/www.outsystems.com\/community\/)\n- [Forums](https:\/\/www.outsystems.com\/forums\/)\n- [Ideas](https:\/\/www.outsystems.com\/ideas\/)\n- [OutSystems Research Program](https:\/\/www.outsystems.com\/our-community\/research-program\/)\n- [MVP Program](https:\/\/www.outsystems.com\/community\/advocacy-programs\/mvps\/)\n- [Community Jobs](https:\/\/www.outsystems.com\/community\/jobs\/)\n- [Champions Program](https:\/\/www.outsystems.com\/community\/advocacy-programs\/champions\/)\n\n###### Technical Support\n- Technical Support\n  \n  Go back\n- [Technical Documentation](https:\/\/success.outsystems.com\/documentation\/)\n- [Support Center](https:\/\/success.outsystems.com\/support\/home\/)\n- [Software Downloads](https:\/\/www.outsystems.com\/downloads\/)\n\n###### Resources\n- Resources\n  \n  Go back\n- [AI Software Development](https:\/\/www.outsystems.com\/ai\/ai-software-development\/)\n- [Digital Transformation](https:\/\/www.outsystems.com\/digital-transformation\/)\n- [Application Development](https:\/\/www.outsystems.com\/application-development\/)\n- [Events and Webinars](https:\/\/www.outsystems.com\/events\/)\n- [Blog](https:\/\/www.outsystems.com\/blog\/)\n- [Resources](https:\/\/www.outsystems.com\/resources\/)\n- [Discovery hub](https:\/\/www.outsystems.com\/resources\/discovery\/)\n\n###### Company\n- Company\n  \n  Go back\n- [About OutSystems](https:\/\/www.outsystems.com\/company\/)\n- [Contact Sales](https:\/\/www.outsystems.com\/contact-sales\/)\n- [Local Offices](https:\/\/www.outsystems.com\/company\/offices\/)\n- [Press Room](https:\/\/www.outsystems.com\/newsroom\/)\n- [Careers and Culture](https:\/\/www.outsystems.com\/careers\/)\n- [ESG Statement](https:\/\/www.outsystems.com\/company\/esg-statement\/)\n- [Supplier Code of Conduct](https:\/\/www.outsystems.com\/legal\/supplier-code-of-conduct\/)\n- [Sitemap](https:\/\/www.outsystems.com\/sitemap\/)\n\n###### Legal\n- Legal\n  \n  Go back\n- [Legal Overview](https:\/\/www.outsystems.com\/legal\/)\n- [Cookie Policy](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/)\n- [EU Co-Funded Projects](https:\/\/www.outsystems.com\/eu-co-funded-projects\/)\n- [Modern Slavery Act](https:\/\/www.outsystems.com\/-\/media\/Files\/legal\/outsystems-modern-slavery-act-transparency-statement-2025.pdf)\n- [Terms and Conditions](https:\/\/www.outsystems.com\/legal\/terms-of-use\/)\n- [GDPR at OutSystems](https:\/\/www.outsystems.com\/low-code-platform\/security\/gdpr\/)\n- [Master Subscription Agreement](https:\/\/www.outsystems.com\/legal\/outsystems-msa\/master-subscription-agreement\/)\n- [Repository Terms of Use](https:\/\/www.outsystems.com\/legal\/repository-terms-of-use\/)\n- [Privacy Statement](https:\/\/www.outsystems.com\/legal\/terms-of-use\/privacy-statement\/)\n- [Code of Business Conduct and Ethics](https:\/\/www.outsystems.com\/legal\/code-business-conduct-ethics\/)\n- [Notice and Takedown Policy](https:\/\/www.outsystems.com\/legal\/notice-takedown-policy\/)\n- [Corruption Risks Prevention Plan](https:\/\/www.outsystems.com\/legal\/risk-prevention-plan-corruption-offenses\/)\n\nOutSystems © - All Rights Reserved   \n 44 Farnsworth St  \n9th floor  \nBoston, MA 02210  \nTel: +1 617 837 6840\n\n[More office locations](https:\/\/www.outsystems.com\/company\/offices\/)\n\nEnglish\n\n- [English](https:\/\/www.outsystems.com\/blog\/posts\/how-to-build-an-app\/)\n- [Deutsch](https:\/\/www.outsystems.com\/de-de\/blog\/)\n###### Social","attrs_readable_markdown":"An idea for an app is only as good as your ability to bring it to life. The problem is software development is hard, it takes time (and patience!), and it’s not really over once you hit publish. In this ever-changing world, you need to continually evolve it to meet demands.\n\nThe good news is that now there are modern [low-code development approaches](https:\/\/www.outsystems.com\/low-code\/) with embedded tools designed to accelerate app development and automate much of the application lifecycle. Before you start rolling your eyes, hear me out: [low-code platforms like OutSystems use visual development](https:\/\/www.outsystems.com\/application-development\/visual-programming-importance-and-advantages\/), yes, but as a way to wrap up the complexities that you typically face when creating an app or system. You're always in control. You can customize HTML, CSS, and JavaScript on the front-end. And you can use .NET code in your applications. You are never limited in what you can achieve. Plus, you can integrate easily with other applications by consuming REST or SOAP APIs, or use one of thousands of pre-built connectors and components in our open-source Forge repository.\n\n[It’s (code) evolution, baby.](https:\/\/www.youtube.com\/watch?v=aDaOgu2CQtI)\n\nIn this article, I’ll show you how you can build an app with a low-code platform: the OutSystems platform. For this demo, I’ll be creating an app that most companies need: **an employee onboarding app**.\n\nBefore we start, sign up for the [OutSystems free edition](https:\/\/www.outsystems.com\/low-code-platform\/free\/) (no credit card info needed), set up your personal environment, and follow this tutorial to see what creating an app in OutSystems really looks like.\n\nNow, without further ado, let’s get started.\n\n## Step 1: Create a New Application\nThere are two routes you can take to create a new app in Service Studio, the OutSystems IDE. You can either **start from scratch or use one of dozens of sample applications** as a foundation. For today’s example, I’ll build the app from scratch and walk you through all the steps to create the employee onboarding app.\n\n![developing outsystems app from scratch](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-01.jpg?updated=20221103120130)\n\nPart of setting up a new application is defining what type of app we want to build: is it web, tablet, or phone app? In this example, I’m going to build a [reactive web app](https:\/\/www.outsystems.com\/blog\/posts\/reactive-web-applications\/)—which is basically an app with a responsive interface that runs in the browser and adapts the user experience to all kinds of devices and screen sizes.\n\n![types of apps](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-2.jpg?updated=20221103120224)\n\nIf later I want to **deploy the same app for phone and tablet, I can do it without writing it from scratch again**. That’s because with OutSystems we can easily share data, logic and UI elements, so we can always create one type of app first and then **reuse that work to create another type**. In the case of a mobile app, the same code can be published on both iOS and Android. So, once again, I don’t have to build it twice.\n\nThe final step in setting up a new application is filling out some basic information. Here we need to name the app, give it a description, choose the base color for CSS, and upload an icon. If you choose to upload an icon, the app will **automatically kick-off the CSS** with the right colors—and that’s what I’m going to do in this example.\n\nIf you’re not sure about all the details yet, don’t worry, we can change all of this later.\n\n![app info](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-3.jpg?updated=20221103120230)\n\n## Step 2: Build the App Shell\nOnce the new application is created, we can add and manage different modules like services, libraries, and extensions as needed.\n\nI’m going to create a reactive web app module with the same name as my application.\n\n![developing employee onboarding app](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-4.jpg?updated=20221103120236)\n\nAnd here’s what that looks like.\n\n![reactive web app module](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-5.jpg?updated=20221103151609)\n\nThe reactive web app module creates an application shell that we can use to start building. Elements like **processes, interface elements, logic elements, and data sources can be dragged and dropped** into the IDE to quickly **create app functionality**.\n\nThe toolbox is on the left, the canvas is in the middle, and the navigation is on the right.\n\n![ide elements](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-with-outsystems-figure-5-copy.jpg?updated=20221103144725)\n\nIn this example, the first thing I’ll do is create an employee data table that’s connected to an employee database. The table can have create, read, update, and delete operations that can be dragged into the flows as needed.\n\n![outsystems ide environment](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-6.jpg?updated=20221103120253)\n\nFor the table, I’ll add employee attributes like first name, last name, phone, and email. As I create those names, OutSystems can infer the data type attribute based on the naming convention. I’ll also want to create a *Department* table; once that’s created, I can add that foreign key to the employee table by dragging a shortcut over.\n\n## Step 3: Build a Login Screen\nIn the Interface tab, we have access to a bunch of different controls and features. The first one I’m going to add is a login screen.\n\n![app login screen](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-7.jpg?updated=20221103120258)\n\nThis will add a default login process featuring a login button that executes an action of going to the server to validate and authenticate the login process. This can be **hooked up to login providers** like Okta or social logins like Google and Facebook.\n\nBy clicking the theme editor button, I can edit the colors, fonts, backgrounds, and structure of the login theme.\n\n## Step 4: Modify the Theme with CSS\nIf I want to modify any element of the theme, I can do it in just a few clicks without any CSS knowledge. It’s a quick way to enhance a theme.\n\n![login screen css modification](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-8.jpg?updated=20221103120304)\n\nBut, if I want to edit the CSS, I can also do it. The CSS editor shows the [OutSystems UI](https:\/\/outsystemsui.outsystems.com\/OutsystemsUiWebsite\/), which is the global default.\n\n![outsystems ui](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-9.jpg?updated=20221103120310)\n\nAll tabs to the left of it will inherit or override the information from the OutSystems UI, allowing us to get more specific as needed as we style the overall theme, the app, and the login.\n\nTo update the code, we can use the WYSIWYG editor or directly type it in.\n\n## Step 5: Add Functionality\nNow, I click on the *MainFlow*, which will show me folders of screens.\n\nTo create a screen, we can just drag and drop them into the canvas.\n\nIn this case, this will automatically create a list screen and a detailed screen. This will give end-users access to search for employees, update forms, etc.\n\n![drag and drop](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-10.jpg?updated=20221103120137)\n\nAlthough the screens are automatically created, it doesn't mean we don’t have control over them. The platform **automatically creates the screens following best practices** and to give us what we’ll most likely need, but **we can always design it in any way**, shape or form possible, and affect every pixel in it.\n\n![employee list](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-11.jpg?updated=20221103120145)\n\nOn the list, you can see that it pulled data from the data table to automatically create headers that can be sorted. It also added pagination to reduce load times, along with a search function and an *Add Employee* button to create a new record. If I want to add more fields, I can just drag and drop them from the tab.\n\nThroughout the screen we have placeholders for different types of elements.\n\n![add employee to list](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-with-outsystems-figure-12-copy.jpg?updated=20221103152500)\n\nIf we toggle over to the Interface tab, we can see each element in the Widget Tree. Here we can dig into the details of each widget and edit them as needed. We can also hover the modules on the canvas to move things around and make edits.\n\n![employee list canvas](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-12.jpg?updated=20221103153023)\n\nFor the UI, there are only three elements you have to understand to develop in OutSystems:\n\n- Variables that you can add\n- Data fetches\n- Actions.\n\nEvery UI widget we add will be hooked up to a variable or data source, or will have an action running against it. We can add and edit those in the *Elements tab*.\n\n## Step 6: Working with Logic Trees\n![logic trees](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-13.jpg?updated=20221103153106)\n\nLet’s take a look at the search function as an example of what a logic tree looks like.\n\nThe visual designer shows how the logic is executed; the toolkit on the left will change to provide us with additional options.\n\nWe can drag and drop these tools onto the canvas to create more complex logic functions. We can add pretty much any logic, from *“if-statements”* to more complex ones.\n\n## Step 7: Check Your Work and Publish\\!\n![employee app deployment](https:\/\/www.outsystems.com\/blog\/-\/media\/images\/blog\/posts\/how-to-build-an-app\/v5\/bp-how-to-build-an-app-14.jpg?updated=20221103153143)\n\nOn the *Employee Details* screen, we’ll see a flow designer for a form to add a new employee. However, **OutSystems detects issues that we’ll want to address before publishing**, such as security issues and performance warnings like calling the service twice.\n\nOnce we’re ready to go, all we have to do is **click the green button** at the top for **one-click publish**. This will store a new version to the cloud, giving us the ability to revert to older versions as needed. We can also merge the code with other developers’ code to see the differences between versions.\n\nThe publish action compiles and updates the database scripts, updates the database model, and deploys the web application. Once it’s published, the green button will turn to a blue Open in Browser button that allows us to try the application out.\n\n## Ready to Give It a Try ?\nThis is just a simple, almost *“Hello, World!”* application to show you how developing with OutSystems looks like. From here, the sky's the limit. OutSystems was designed to build **modern enterprise-grade applications and experiences**, with a great amount of flexibility through accelerators or even custom code if necessary.\n\nIf you want to explore it further, you can [sign-up for our free edition here](https:\/\/www.outsystems.com\/low-code-platform\/free\/).","meta_canonical":null}

3. Robots.txt Check

Query:

Response:

4. Spam/Ban Check

Query:

Response:

5. Seen Status Check

ℹ️ Skipped - page is already crawled

📄

INDEXABLE

✅

CRAWLED

14 days ago

🤖

ROBOTS ALLOWED

Page Info Filters

Filter	Status	Condition	Details
HTTP status	PASS	`download_http_code = 200`	HTTP 200
Age cutoff	PASS	`download_stamp > now() - 6 MONTH`	0.5 months ago
History drop	PASS	`isNull(history_drop_reason)`	No drop reason
Spam/ban	PASS	`fh_dont_index != 1 AND ml_spam_score = 0`	ml_spam_score=0
Canonical	PASS	`meta_canonical IS NULL OR = '' OR = src_unparsed`	Not set

Page Details

Property	Value
URL	https://www.outsystems.com/blog/posts/how-to-build-an-app/
Last Crawled	2026-03-27 11:47:51 (14 days ago)
First Indexed	2021-10-25 13:51:31 (4 years ago)
HTTP Status Code	200
Meta Title	How to Build an App with Low-Code
Meta Description	An idea for an app is only as good as your ability to bring it to life. In this blog post, we'll show you how to build an app using low-code.
Meta Canonical	null
Boilerpipe Text	An idea for an app is only as good as your ability to bring it to life. The problem is software development is hard, it takes time (and patience!), and it’s not really over once you hit publish. In this ever-changing world, you need to continually evolve it to meet demands. The good news is that now there are modern low-code development approaches with embedded tools designed to accelerate app development and automate much of the application lifecycle. Before you start rolling your eyes, hear me out: low-code platforms like OutSystems use visual development , yes, but as a way to wrap up the complexities that you typically face when creating an app or system. You're always in control. You can customize HTML, CSS, and JavaScript on the front-end. And you can use .NET code in your applications. You are never limited in what you can achieve. Plus, you can integrate easily with other applications by consuming REST or SOAP APIs, or use one of thousands of pre-built connectors and components in our open-source Forge repository. It’s (code) evolution, baby. In this article, I’ll show you how you can build an app with a low-code platform: the OutSystems platform. For this demo, I’ll be creating an app that most companies need: an employee onboarding app . Before we start, sign up for the OutSystems free edition (no credit card info needed), set up your personal environment, and follow this tutorial to see what creating an app in OutSystems really looks like. Now, without further ado, let’s get started. Step 1: Create a New Application There are two routes you can take to create a new app in Service Studio, the OutSystems IDE. You can either start from scratch or use one of dozens of sample applications as a foundation. For today’s example, I’ll build the app from scratch and walk you through all the steps to create the employee onboarding app. Part of setting up a new application is defining what type of app we want to build: is it web, tablet, or phone app? In this example, I’m going to build a reactive web app —which is basically an app with a responsive interface that runs in the browser and adapts the user experience to all kinds of devices and screen sizes. If later I want to deploy the same app for phone and tablet, I can do it without writing it from scratch again . That’s because with OutSystems we can easily share data, logic and UI elements, so we can always create one type of app first and then reuse that work to create another type . In the case of a mobile app, the same code can be published on both iOS and Android. So, once again, I don’t have to build it twice. The final step in setting up a new application is filling out some basic information. Here we need to name the app, give it a description, choose the base color for CSS, and upload an icon. If you choose to upload an icon, the app will automatically kick-off the CSS with the right colors—and that’s what I’m going to do in this example. If you’re not sure about all the details yet, don’t worry, we can change all of this later. Step 2: Build the App Shell Once the new application is created, we can add and manage different modules like services, libraries, and extensions as needed. I’m going to create a reactive web app module with the same name as my application. And here’s what that looks like. The reactive web app module creates an application shell that we can use to start building. Elements like processes, interface elements, logic elements, and data sources can be dragged and dropped into the IDE to quickly create app functionality . The toolbox is on the left, the canvas is in the middle, and the navigation is on the right. In this example, the first thing I’ll do is create an employee data table that’s connected to an employee database. The table can have create, read, update, and delete operations that can be dragged into the flows as needed. For the table, I’ll add employee attributes like first name, last name, phone, and email. As I create those names, OutSystems can infer the data type attribute based on the naming convention. I’ll also want to create a Department table; once that’s created, I can add that foreign key to the employee table by dragging a shortcut over. Step 3: Build a Login Screen In the Interface tab, we have access to a bunch of different controls and features. The first one I’m going to add is a login screen. This will add a default login process featuring a login button that executes an action of going to the server to validate and authenticate the login process. This can be hooked up to login providers like Okta or social logins like Google and Facebook. By clicking the theme editor button, I can edit the colors, fonts, backgrounds, and structure of the login theme. Step 4: Modify the Theme with CSS If I want to modify any element of the theme, I can do it in just a few clicks without any CSS knowledge. It’s a quick way to enhance a theme. But, if I want to edit the CSS, I can also do it. The CSS editor shows the OutSystems UI , which is the global default. All tabs to the left of it will inherit or override the information from the OutSystems UI, allowing us to get more specific as needed as we style the overall theme, the app, and the login. To update the code, we can use the WYSIWYG editor or directly type it in. Step 5: Add Functionality Now, I click on the MainFlow , which will show me folders of screens. To create a screen, we can just drag and drop them into the canvas. In this case, this will automatically create a list screen and a detailed screen. This will give end-users access to search for employees, update forms, etc. Although the screens are automatically created, it doesn't mean we don’t have control over them. The platform automatically creates the screens following best practices and to give us what we’ll most likely need, but we can always design it in any way , shape or form possible, and affect every pixel in it. On the list, you can see that it pulled data from the data table to automatically create headers that can be sorted. It also added pagination to reduce load times, along with a search function and an Add Employee button to create a new record. If I want to add more fields, I can just drag and drop them from the tab. Throughout the screen we have placeholders for different types of elements. If we toggle over to the Interface tab, we can see each element in the Widget Tree. Here we can dig into the details of each widget and edit them as needed. We can also hover the modules on the canvas to move things around and make edits. For the UI, there are only three elements you have to understand to develop in OutSystems: Variables that you can add Data fetches Actions. Every UI widget we add will be hooked up to a variable or data source, or will have an action running against it. We can add and edit those in the Elements tab . Step 6: Working with Logic Trees Let’s take a look at the search function as an example of what a logic tree looks like. The visual designer shows how the logic is executed; the toolkit on the left will change to provide us with additional options. We can drag and drop these tools onto the canvas to create more complex logic functions. We can add pretty much any logic, from “if-statements” to more complex ones. Step 7: Check Your Work and Publish! On the Employee Details screen, we’ll see a flow designer for a form to add a new employee. However, OutSystems detects issues that we’ll want to address before publishing , such as security issues and performance warnings like calling the service twice. Once we’re ready to go, all we have to do is click the green button at the top for one-click publish . This will store a new version to the cloud, giving us the ability to revert to older versions as needed. We can also merge the code with other developers’ code to see the differences between versions. The publish action compiles and updates the database scripts, updates the database model, and deploys the web application. Once it’s published, the green button will turn to a blue Open in Browser button that allows us to try the application out. Ready to Give It a Try ? This is just a simple, almost “Hello, World!” application to show you how developing with OutSystems looks like. From here, the sky's the limit. OutSystems was designed to build modern enterprise-grade applications and experiences , with a great amount of flexibility through accelerators or even custom code if necessary. If you want to explore it further, you can sign-up for our free edition here .
Markdown	- [Log in](https://www.outsystems.com/Login/Login) - [Contact us](https://www.outsystems.com/contact-sales/) - [Support](https://success.outsystems.com/support/home/) - ENEnglish - [English](https://www.outsystems.com/blog/posts/how-to-build-an-app/) - [Deutsch](https://www.outsystems.com/de-de/blog/) [![logo](https://www.outsystems.com/blog/-/media/themes/outsystems/website/site-theme/imgs/logo.svg?updated=20211217193441)](https://www.outsystems.com/) Menu - [![User-Interface](https://www.outsystems.com/blog/-/media/images/icons/menu/platform-mobile-tab-icon.svg?updated=20240731083628) Platform](https://www.outsystems.com/blog/posts/how-to-build-an-app/#main-menu-entry-1) - [![use-cases-mobile-tab-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/use-cases-mobile-tab-icon.svg?updated=20240905083421) Use cases](https://www.outsystems.com/blog/posts/how-to-build-an-app/#main-menu-entry-2) - [![App-Gallery](https://www.outsystems.com/blog/-/media/images/icons/menu/solutions-mobile-tab-icon.svg?updated=20240731083739) Solutions](https://www.outsystems.com/blog/posts/how-to-build-an-app/#main-menu-entry-3) - [![Operations](https://www.outsystems.com/blog/-/media/images/icons/menu/for-developers-mobile-tab-icon.svg?updated=20240731083918) Developers](https://www.outsystems.com/blog/posts/how-to-build-an-app/#main-menu-entry-4) - [![Corporate-Building](https://www.outsystems.com/blog/-/media/images/icons/menu/about-outsystems-mobile-tab-icon.svg?updated=20240731084001) About us](https://www.outsystems.com/blog/posts/how-to-build-an-app/#main-menu-entry-5) Platform overview - [\#1 AI-Powered Low-Code Platform Explore the leading platform for full lifecycle AI software development](https://www.outsystems.com/low-code-platform/) - [Agent Workbench Build and deploy enterprise-ready AI agents](https://www.outsystems.com/low-code-platform/agentic-ai-workbench/) - [Mentor Custom AI app generation from a natural-language prompt](https://www.outsystems.com/low-code-platform/mentor-ai-app-generation/) - [Agentic workflows Automate and orchestrate human-agent handoffs](https://www.outsystems.com/low-code-platform/workflow-automation/) - [Data fabric The virtual data layer to power all your AI apps and agents](https://www.outsystems.com/low-code-platform/data-fabric/) - [Security and compliance Your enterprise policies and governance built into every app and agent](https://www.outsystems.com/low-code-platform/security/) - [Enterprise integration Integrate with any system, app, and AI model](https://www.outsystems.com/low-code-platform/integration/) - [Pricing Get started now with flexible plans](https://www.outsystems.com/pricing-and-editions/) Discover more - [Explore what you can build](https://www.outsystems.com/application/) - [Customer stories](https://www.outsystems.com/case-studies/) - [Platform demos](https://www.outsystems.com/demos/) - [AI Software Development Guide](https://www.outsystems.com/ai/ai-software-development/) [![outystems-mentor-dark-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/outystems-mentor-dark-icon.svg?updated=20250715131753) Orchestrate human and AI collaboration](https://www.outsystems.com/ai/) [![outystems-agent-workbench-dark-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/outystems-agent-workbench-dark-icon.svg?updated=20250715131752) What is low-code?](https://www.outsystems.com/low-code/) External apps - [Citizen portals](https://www.outsystems.com/use-cases/e-citizen-apps/) - [Mobile banking portals](https://www.outsystems.com/use-cases/mobile-finance/) - [Insurance portals](https://www.outsystems.com/use-cases/insurance-portals-apps/) - [Virtual care portals](https://www.outsystems.com/use-cases/virtual-care/) - [Customer account creation portals](https://www.outsystems.com/use-cases/digital-customer-onboarding/) - [Customer self-service portals](https://www.outsystems.com/use-cases/customer-self-service-portals/) - [More about external apps](https://www.outsystems.com/use-cases/external-applications/) Core systems - [Digital lending systems](https://www.outsystems.com/use-cases/digital-lending/) - [Claims management systems](https://www.outsystems.com/use-cases/claims-management/) - [Field service systems](https://www.outsystems.com/use-cases/field-services/) - [Supply chain systems](https://www.outsystems.com/use-cases/supply-chain/) - [Salesforce Integration](https://www.outsystems.com/use-cases/salesforce/) - [SAP](https://www.outsystems.com/use-cases/sap-extend/) - [More about core systems](https://www.outsystems.com/use-cases/core-systems/) Internal apps - [Employee onboarding](https://www.outsystems.com/use-cases/employee-onboarding/) - [Employee self-service](https://www.outsystems.com/use-cases/employee-self-service/) - [Office management](https://www.outsystems.com/use-cases/office-management-system/) - [Internal case management](https://www.outsystems.com/use-cases/case-management/) - [IT service management](https://www.outsystems.com/use-cases/servicenow/) - [Performance management](https://www.outsystems.com/use-cases/performance-management-system/) - [More about internal apps](https://www.outsystems.com/use-cases/internal-business-apps/) [![application-monitoring-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/application-monitoring-icon.svg?updated=20240326185523) See more use cases](https://www.outsystems.com/use-cases/) [![customer-stories-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https://www.outsystems.com/case-studies/) Solutions for your industry - [Banking & Financial Services](https://www.outsystems.com/industries/financial-services/) - [Insurance](https://www.outsystems.com/industries/insurance/) - [Government](https://www.outsystems.com/industries/government/) - [Manufacturing](https://www.outsystems.com/industries/manufacturing/) - [See more industries here](https://www.outsystems.com/industries/) - [Healthcare](https://www.outsystems.com/industries/healthcare/) - [Energy and Utilities](https://www.outsystems.com/industries/energy-and-utilities/) - [Retail](https://www.outsystems.com/industries/retail-and-wholesale/) - [Education](https://www.outsystems.com/industries/education/) Business initiatives - [Agentic AI innovation](https://www.outsystems.com/initiatives/agentic-ai-solutions/) - [AI-driven development](https://www.outsystems.com/initiatives/ai-driven-development/) - [IT speed and agility](https://www.outsystems.com/initiatives/it-agility/) - [Operational efficiency](https://www.outsystems.com/initiatives/automation-and-efficiency/) - [Customer experience](https://www.outsystems.com/initiatives/digital-experiences/) - [Legacy modernization](https://www.outsystems.com/initiatives/legacy-modernization/) [![full-stack-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/full-stack-icon.svg?updated=20240326185532) Discover app examples](https://www.outsystems.com/application/) [![customer-stories-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https://www.outsystems.com/case-studies/) Discover our universe - [For developers](https://www.outsystems.com/developers/) - [Community](https://www.outsystems.com/community/) - [Forums](https://www.outsystems.com/forums/) - [Forge marketplace](https://www.outsystems.com/forge/) - [User groups](https://www.outsystems.com/events/user-groups/) - [Tech Talks](https://www.outsystems.com/events/tech-talks/) Learn with us - [Training](https://learn.outsystems.com/training) - [Documentation](https://success.outsystems.com/documentation/) - [Jump Start sessions](https://www.outsystems.com/events/jump-start/) - [Certifications](https://www.outsystems.com/certifications/) Advocacy programs - [MVP Program](https://www.outsystems.com/community/advocacy-programs/mvps/) - [Champions program](https://www.outsystems.com/community/advocacy-programs/champions/) Explore our resources - [Support](https://success.outsystems.com/support/home/) - [Product updates](https://www.outsystems.com/product-updates/) - [Developer newsletter](https://www.outsystems.com/community/developer-newsletter/) [![full-stack-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/full-stack-icon.svg?updated=20240326185532) Discover app examples](https://www.outsystems.com/application/) [![customer-stories-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https://www.outsystems.com/case-studies/) Company - [The company We pioneered this stuff](https://www.outsystems.com/company/) - [Customer stories How people like you use OutSystems—and why](https://www.outsystems.com/case-studies/) - [Partners They've been there and done that](https://www.outsystems.com/partners/) - [Blog We're into this stuff](https://www.outsystems.com/blog/) - [Webinars Live and on-demand sessions](https://www.outsystems.com/webinars/) - [Events Come and say hi](https://www.outsystems.com/events/) - [Resources Get the low-down on low-code (and lots of other stuff too!)](https://www.outsystems.com/resources/) - [Services Smart folks are here to help](https://www.outsystems.com/success-services/) - [Careers Got talent? Join us\!](https://www.outsystems.com/careers/) - [Discovery Hub A centralized list of content](https://www.outsystems.com/resources/discovery/) [![customer-stories-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/customer-stories-icon.svg?updated=20240326185529) Read customer stories](https://www.outsystems.com/case-studies/) [![user-interface-icon](https://www.outsystems.com/blog/-/media/images/icons/menu/user-interface-icon.svg?updated=20240326185546) Explore the platform](https://www.outsystems.com/low-code-platform/) - [Log in](https://www.outsystems.com/Login/Login) - [Start free](https://www.outsystems.com/Platform/Signup?uc=startfree) - [Contact Sales](https://www.outsystems.com/contact-sales/) - [Support](https://success.outsystems.com/support/home/) Open Search Search in OutSystems Cancel Search Submit Search Cancel Search ENEnglish - [English](https://www.outsystems.com/blog/posts/how-to-build-an-app/) - [Deutsch](https://www.outsystems.com/de-de/blog/) [Schedule demo](https://www.outsystems.com/schedule-demo/) [Start Free](https://www.outsystems.com/Platform/Signup?uc=startfree) [My Platform](https://www.outsystems.com/personaledition/) OutSystems Blog Dev Zone [All Articles](https://www.outsystems.com/blog/) [Perspectives](https://www.outsystems.com/blog/category/perspectives/) [Dev Zone](https://www.outsystems.com/blog/category/dev-zone/) [Engineering](https://www.outsystems.com/blog/category/engineering/) [Dev Zone](https://www.outsystems.com/blog/category/dev-zone/) # How to Build an App with OutSystems [![jon-sullivan](https://www.outsystems.com/blog/-/media/images/blog/author-photo/jon-sullivan.jpeg?updated=20220111091601&mw=80&mh=80&hash=7D5C7305B542793E5D5174C6D35CE71C)](https://www.outsystems.com/blog/author/jon-sullivan/) [Jon Sullivan](https://www.outsystems.com/blog/author/jon-sullivan/) April 05, 2024 • 7 min read ![building an app with outsystems hero](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/hero-bp-how-to-build-an-app-with-outsystems-v2.jpg?updated=20240411143445) ###### This might interest you - [Evaluation Guide](https://www.outsystems.com/evaluation-guide/) - [OutSystems low-code platform free edition](https://www.outsystems.com/low-code-platform/free/) - [OutSystems Training](https://learn.outsystems.com/training) ###### Subscribe to the blog 1/2 By providing my email address, I agree to receive alerts and news about the OutSystems blog and new blog posts. [What does this mean to you?](https://www.outsystems.com/legal/consent-policy/) Your information will not be shared with any third parties and will be used in accordance with OutSystems [privacy policy](https://www.outsystems.com/legal/terms-of-use/privacy-statement/). You may manage your [subscriptions or opt out](https://go1.outsystems.com/outsystems-preference-center.html) at any time. Get the latest low-code content right in your inbox. Subscription Sucessful An idea for an app is only as good as your ability to bring it to life. The problem is software development is hard, it takes time (and patience!), and it’s not really over once you hit publish. In this ever-changing world, you need to continually evolve it to meet demands. - Suggested for you - Table of contents Suggested for you [![call-out](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/call-out.jpg?updated=20230717103030)Give OutSystems a try - for free! Sign up for free edition](https://www.outsystems.com/low-code-platform/free/) Table of contents #### Table of contents: - [Step 1: Create a New Application](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-1) - [Step 2: Build the App Shell](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-2) - [Step 3: Build a Login Screen](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-3) - [Step 4: Modify the Theme with CSS](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-4) - [Step 5: Add Functionality](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-5) - [Step 6: Working with Logic Trees](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-6) - [Step 7: Check Your Work and Publish\!](https://www.outsystems.com/blog/posts/how-to-build-an-app/#step-7) - [Ready to Give It a Try ?](https://www.outsystems.com/blog/posts/how-to-build-an-app/#give-it-a-try) The good news is that now there are modern [low-code development approaches](https://www.outsystems.com/low-code/) with embedded tools designed to accelerate app development and automate much of the application lifecycle. Before you start rolling your eyes, hear me out: [low-code platforms like OutSystems use visual development](https://www.outsystems.com/application-development/visual-programming-importance-and-advantages/), yes, but as a way to wrap up the complexities that you typically face when creating an app or system. You're always in control. You can customize HTML, CSS, and JavaScript on the front-end. And you can use .NET code in your applications. You are never limited in what you can achieve. Plus, you can integrate easily with other applications by consuming REST or SOAP APIs, or use one of thousands of pre-built connectors and components in our open-source Forge repository. [It’s (code) evolution, baby.](https://www.youtube.com/watch?v=aDaOgu2CQtI) In this article, I’ll show you how you can build an app with a low-code platform: the OutSystems platform. For this demo, I’ll be creating an app that most companies need: an employee onboarding app. Before we start, sign up for the [OutSystems free edition](https://www.outsystems.com/low-code-platform/free/) (no credit card info needed), set up your personal environment, and follow this tutorial to see what creating an app in OutSystems really looks like. Now, without further ado, let’s get started. ## Step 1: Create a New Application There are two routes you can take to create a new app in Service Studio, the OutSystems IDE. You can either start from scratch or use one of dozens of sample applications as a foundation. For today’s example, I’ll build the app from scratch and walk you through all the steps to create the employee onboarding app. ![developing outsystems app from scratch](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-01.jpg?updated=20221103120130) Part of setting up a new application is defining what type of app we want to build: is it web, tablet, or phone app? In this example, I’m going to build a [reactive web app](https://www.outsystems.com/blog/posts/reactive-web-applications/)—which is basically an app with a responsive interface that runs in the browser and adapts the user experience to all kinds of devices and screen sizes. ![types of apps](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-2.jpg?updated=20221103120224) If later I want to deploy the same app for phone and tablet, I can do it without writing it from scratch again. That’s because with OutSystems we can easily share data, logic and UI elements, so we can always create one type of app first and then reuse that work to create another type. In the case of a mobile app, the same code can be published on both iOS and Android. So, once again, I don’t have to build it twice. The final step in setting up a new application is filling out some basic information. Here we need to name the app, give it a description, choose the base color for CSS, and upload an icon. If you choose to upload an icon, the app will automatically kick-off the CSS with the right colors—and that’s what I’m going to do in this example. If you’re not sure about all the details yet, don’t worry, we can change all of this later. ![app info](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-3.jpg?updated=20221103120230) ## Step 2: Build the App Shell Once the new application is created, we can add and manage different modules like services, libraries, and extensions as needed. I’m going to create a reactive web app module with the same name as my application. ![developing employee onboarding app](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-4.jpg?updated=20221103120236) And here’s what that looks like. ![reactive web app module](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-5.jpg?updated=20221103151609) The reactive web app module creates an application shell that we can use to start building. Elements like processes, interface elements, logic elements, and data sources can be dragged and dropped into the IDE to quickly create app functionality. The toolbox is on the left, the canvas is in the middle, and the navigation is on the right. ![ide elements](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-with-outsystems-figure-5-copy.jpg?updated=20221103144725) In this example, the first thing I’ll do is create an employee data table that’s connected to an employee database. The table can have create, read, update, and delete operations that can be dragged into the flows as needed. ![outsystems ide environment](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-6.jpg?updated=20221103120253) For the table, I’ll add employee attributes like first name, last name, phone, and email. As I create those names, OutSystems can infer the data type attribute based on the naming convention. I’ll also want to create a Department table; once that’s created, I can add that foreign key to the employee table by dragging a shortcut over. ## Step 3: Build a Login Screen In the Interface tab, we have access to a bunch of different controls and features. The first one I’m going to add is a login screen. ![app login screen](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-7.jpg?updated=20221103120258) This will add a default login process featuring a login button that executes an action of going to the server to validate and authenticate the login process. This can be hooked up to login providers like Okta or social logins like Google and Facebook. By clicking the theme editor button, I can edit the colors, fonts, backgrounds, and structure of the login theme. ## Step 4: Modify the Theme with CSS If I want to modify any element of the theme, I can do it in just a few clicks without any CSS knowledge. It’s a quick way to enhance a theme. ![login screen css modification](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-8.jpg?updated=20221103120304) But, if I want to edit the CSS, I can also do it. The CSS editor shows the [OutSystems UI](https://outsystemsui.outsystems.com/OutsystemsUiWebsite/), which is the global default. ![outsystems ui](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-9.jpg?updated=20221103120310) All tabs to the left of it will inherit or override the information from the OutSystems UI, allowing us to get more specific as needed as we style the overall theme, the app, and the login. To update the code, we can use the WYSIWYG editor or directly type it in. ## Step 5: Add Functionality Now, I click on the MainFlow, which will show me folders of screens. To create a screen, we can just drag and drop them into the canvas. In this case, this will automatically create a list screen and a detailed screen. This will give end-users access to search for employees, update forms, etc. ![drag and drop](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-10.jpg?updated=20221103120137) Although the screens are automatically created, it doesn't mean we don’t have control over them. The platform automatically creates the screens following best practices and to give us what we’ll most likely need, but we can always design it in any way, shape or form possible, and affect every pixel in it. ![employee list](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-11.jpg?updated=20221103120145) On the list, you can see that it pulled data from the data table to automatically create headers that can be sorted. It also added pagination to reduce load times, along with a search function and an Add Employee button to create a new record. If I want to add more fields, I can just drag and drop them from the tab. Throughout the screen we have placeholders for different types of elements. ![add employee to list](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-with-outsystems-figure-12-copy.jpg?updated=20221103152500) If we toggle over to the Interface tab, we can see each element in the Widget Tree. Here we can dig into the details of each widget and edit them as needed. We can also hover the modules on the canvas to move things around and make edits. ![employee list canvas](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-12.jpg?updated=20221103153023) For the UI, there are only three elements you have to understand to develop in OutSystems: - Variables that you can add - Data fetches - Actions. Every UI widget we add will be hooked up to a variable or data source, or will have an action running against it. We can add and edit those in the Elements tab. ## Step 6: Working with Logic Trees ![logic trees](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-13.jpg?updated=20221103153106) Let’s take a look at the search function as an example of what a logic tree looks like. The visual designer shows how the logic is executed; the toolkit on the left will change to provide us with additional options. We can drag and drop these tools onto the canvas to create more complex logic functions. We can add pretty much any logic, from “if-statements” to more complex ones. ## Step 7: Check Your Work and Publish\! ![employee app deployment](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-14.jpg?updated=20221103153143) On the Employee Details screen, we’ll see a flow designer for a form to add a new employee. However, OutSystems detects issues that we’ll want to address before publishing, such as security issues and performance warnings like calling the service twice. Once we’re ready to go, all we have to do is click the green button at the top for one-click publish. This will store a new version to the cloud, giving us the ability to revert to older versions as needed. We can also merge the code with other developers’ code to see the differences between versions. The publish action compiles and updates the database scripts, updates the database model, and deploys the web application. Once it’s published, the green button will turn to a blue Open in Browser button that allows us to try the application out. ## Ready to Give It a Try ? This is just a simple, almost “Hello, World!” application to show you how developing with OutSystems looks like. From here, the sky's the limit. OutSystems was designed to build modern enterprise-grade applications and experiences, with a great amount of flexibility through accelerators or even custom code if necessary. If you want to explore it further, you can [sign-up for our free edition here](https://www.outsystems.com/low-code-platform/free/). [![jon-sullivan](https://www.outsystems.com/blog/-/media/images/blog/author-photo/jon-sullivan.jpeg?updated=20220111091601&mw=80&mh=80&hash=7D5C7305B542793E5D5174C6D35CE71C)](https://www.outsystems.com/blog/author/jon-sullivan/) [Jon Sullivan](https://www.outsystems.com/blog/author/jon-sullivan/) Jon Sullivan is a Solution Engineer at OutSystems, working with users globally to align technical needs to platform features. He has 10+ years of experience developing transportation, law enforcement, and healthcare software solutions. When not playing with his four kids, you can find him cheering for the Iowa Hawkeyes, golfing or working outside. [See All Posts From this author](https://www.outsystems.com/blog/author/jon-sullivan/) ##### Tags - [1-click publish](https://www.outsystems.com/blog/tag/?tag=1-click-publish) - [Application Development](https://www.outsystems.com/blog/tag/?tag=app-development) - [best practices](https://www.outsystems.com/blog/tag/?tag=best-practices) - [custom app](https://www.outsystems.com/blog/tag/?tag=custom-app) - [developer experience](https://www.outsystems.com/blog/tag/?tag=developer-experience) - [reactive web apps](https://www.outsystems.com/blog/tag/?tag=reactive-web-apps) - [reactive web](https://www.outsystems.com/blog/tag/?tag=reactive-web) - [responsive apps](https://www.outsystems.com/blog/tag/?tag=responsive-apps) - [reusable code](https://www.outsystems.com/blog/tag/?tag=reusable-code) - [Service studio](https://www.outsystems.com/blog/tag/?tag=service-studio) - [Web Application](https://www.outsystems.com/blog/tag/?tag=web-application) - [low code](https://www.outsystems.com/blog/tag/?tag=low-code) - [low-code development](https://www.outsystems.com/blog/tag/?tag=low-code-development) - [low-code platform](https://www.outsystems.com/blog/tag/?tag=low-code-platform) - [how-to](https://www.outsystems.com/blog/tag/?tag=how-to) ### Related posts [Dev Zone](https://www.outsystems.com/blog/category/dev-zone/) ##### [How to Build Amazing UX and UI with Low-Code](https://www.outsystems.com/blog/posts/how-to-create-amazing-ux-ui-with-low-code/) [![joao-paulo-carvalho](https://www.outsystems.com/blog/-/media/images/blog/author-photo/joao-paulo-carvalho.png?updated=20220413105116&mw=48&mh=48&hash=5A6D4AA3352B6FEE535D618E99A4D1EE)](https://www.outsystems.com/blog/author/joao-paulo-carvalho/) [João Paulo Carvalho](https://www.outsystems.com/blog/author/joao-paulo-carvalho/) April 13, 2022 3 min read [Dev Zone](https://www.outsystems.com/blog/category/dev-zone/) ##### [How to Consume and Expose APIs with Low-Code](https://www.outsystems.com/blog/posts/low-code-api/) [![fernando-moitinho](https://www.outsystems.com/blog/-/media/images/blog/userphoto/fernando-moitinho.jpeg?updated=20220111091614&mw=48&mh=48&hash=BBA8012634266BFA7F16A40D74E1FB61)](https://www.outsystems.com/blog/author/fernando-moitinho/) [Fernando Moitinho](https://www.outsystems.com/blog/author/fernando-moitinho/) May 05, 2022 3 min read [Dev Zone](https://www.outsystems.com/blog/category/dev-zone/) ##### [How to Do DevOps With Low-Code](https://www.outsystems.com/blog/posts/how-to-do-devops-with-low-code/) [![mike\_josephson](https://www.outsystems.com/blog/-/media/images/blog/userphoto/mike_josephson.jpg?updated=20220111091623&mw=48&mh=48&hash=455B15860C632F1EBB05B14F4E0E9C0D)](https://www.outsystems.com/blog/author/mikejosephson/) [Mike Josephson](https://www.outsystems.com/blog/author/mikejosephson/) April 22, 2022 3 min read Site Map Menu ###### Low-code Platform - Low-code Platform Go back - [Platform Overview](https://www.outsystems.com/low-code-platform/) - [Pricing](https://www.outsystems.com/pricing-and-editions/) - [Evaluation Guide](https://www.outsystems.com/evaluation-guide/) - [Low-Code Basics](https://www.outsystems.com/low-code/) - [Application Templates](https://www.outsystems.com/application-templates/) - [Start Free](https://www.outsystems.com/low-code-platform/free/) ###### Why OutSystems - Why OutSystems Go back - [Customer Stories](https://www.outsystems.com/case-studies/) - [Analyst Reviews](https://www.outsystems.com/analysts/) - [Events](https://www.outsystems.com/events/) - [Services](https://www.outsystems.com/success-services/) - [Partners](https://www.outsystems.com/partners/) - [FAQs](https://www.outsystems.com/company/faqs/) - [Careers & Culture](https://www.outsystems.com/careers/) - [Mendix vs. OutSystems](https://www.outsystems.com/mendix-vs-outsystems/) ###### Solutions By Business Initiative - Solutions By Business Initiative Go back - [IT speed and agility](https://www.outsystems.com/initiatives/it-agility/) - [Agentic AI innovation](https://www.outsystems.com/initiatives/agentic-ai-solutions/) - [Legacy modernization](https://www.outsystems.com/initiatives/legacy-modernization/) - [Customer experience](https://www.outsystems.com/initiatives/digital-experiences/) - [Operational efficiency](https://www.outsystems.com/initiatives/automation-and-efficiency/) - [Agile culture & Dev at scale](https://www.outsystems.com/initiatives/agile-development-at-scale/) ###### Solutions By Industry - Solutions By Industry Go back - [Banking & Financial Services](https://www.outsystems.com/industries/financial-services/) - [Insurance](https://www.outsystems.com/industries/insurance/) - [Government](https://www.outsystems.com/industries/government/) - [Manufacturing](https://www.outsystems.com/industries/manufacturing/) - [Healthcare](https://www.outsystems.com/industries/healthcare/) - [Energy and Utilities](https://www.outsystems.com/industries/energy-and-utilities/) - [Retail](https://www.outsystems.com/industries/retail-and-wholesale/) - [Education](https://www.outsystems.com/industries/education/) - [See all Industries](https://www.outsystems.com/industries/) ###### Partners - Partners Go back - [Overview](https://www.outsystems.com/partners/) - [Find a Partner](https://www.outsystems.com/partners/list/) - [Become a Partner](https://www.outsystems.com/partners/become-a-partner/) - [Technology Alliance](https://www.outsystems.com/partners/technology-alliance/) - [Training Partners](https://www.outsystems.com/partners/training-partners/) - [Access Partner Center](https://www.outsystems.com/blog/posts/how-to-build-an-app/) ###### Developers - Developers Go back - [Training](https://learn.outsystems.com/training) - [Product Updates](https://www.outsystems.com/product-updates/) - [Jump Start Sessions](https://www.outsystems.com/events/jump-start/) - [Certifications](https://www.outsystems.com/certifications/academy-certifications/?page=0) - [Forge Marketplace](https://www.outsystems.com/forge/) - [User Groups](https://www.outsystems.com/events/user-groups/) - [Tech Talks](https://www.outsystems.com/events/tech-talks/) - [De/Coded Podcast](https://www.outsystems.com/events/decoded-podcast/) ###### Community - Community Go back - [Community Home](https://www.outsystems.com/community/) - [Forums](https://www.outsystems.com/forums/) - [Ideas](https://www.outsystems.com/ideas/) - [OutSystems Research Program](https://www.outsystems.com/our-community/research-program/) - [MVP Program](https://www.outsystems.com/community/advocacy-programs/mvps/) - [Community Jobs](https://www.outsystems.com/community/jobs/) - [Champions Program](https://www.outsystems.com/community/advocacy-programs/champions/) ###### Technical Support - Technical Support Go back - [Technical Documentation](https://success.outsystems.com/documentation/) - [Support Center](https://success.outsystems.com/support/home/) - [Software Downloads](https://www.outsystems.com/downloads/) ###### Resources - Resources Go back - [AI Software Development](https://www.outsystems.com/ai/ai-software-development/) - [Digital Transformation](https://www.outsystems.com/digital-transformation/) - [Application Development](https://www.outsystems.com/application-development/) - [Events and Webinars](https://www.outsystems.com/events/) - [Blog](https://www.outsystems.com/blog/) - [Resources](https://www.outsystems.com/resources/) - [Discovery hub](https://www.outsystems.com/resources/discovery/) ###### Company - Company Go back - [About OutSystems](https://www.outsystems.com/company/) - [Contact Sales](https://www.outsystems.com/contact-sales/) - [Local Offices](https://www.outsystems.com/company/offices/) - [Press Room](https://www.outsystems.com/newsroom/) - [Careers and Culture](https://www.outsystems.com/careers/) - [ESG Statement](https://www.outsystems.com/company/esg-statement/) - [Supplier Code of Conduct](https://www.outsystems.com/legal/supplier-code-of-conduct/) - [Sitemap](https://www.outsystems.com/sitemap/) ###### Legal - Legal Go back - [Legal Overview](https://www.outsystems.com/legal/) - [Cookie Policy](https://www.outsystems.com/blog/posts/how-to-build-an-app/) - [EU Co-Funded Projects](https://www.outsystems.com/eu-co-funded-projects/) - [Modern Slavery Act](https://www.outsystems.com/-/media/Files/legal/outsystems-modern-slavery-act-transparency-statement-2025.pdf) - [Terms and Conditions](https://www.outsystems.com/legal/terms-of-use/) - [GDPR at OutSystems](https://www.outsystems.com/low-code-platform/security/gdpr/) - [Master Subscription Agreement](https://www.outsystems.com/legal/outsystems-msa/master-subscription-agreement/) - [Repository Terms of Use](https://www.outsystems.com/legal/repository-terms-of-use/) - [Privacy Statement](https://www.outsystems.com/legal/terms-of-use/privacy-statement/) - [Code of Business Conduct and Ethics](https://www.outsystems.com/legal/code-business-conduct-ethics/) - [Notice and Takedown Policy](https://www.outsystems.com/legal/notice-takedown-policy/) - [Corruption Risks Prevention Plan](https://www.outsystems.com/legal/risk-prevention-plan-corruption-offenses/) OutSystems © - All Rights Reserved 44 Farnsworth St 9th floor Boston, MA 02210 Tel: +1 617 837 6840 [More office locations](https://www.outsystems.com/company/offices/) English - [English](https://www.outsystems.com/blog/posts/how-to-build-an-app/) - [Deutsch](https://www.outsystems.com/de-de/blog/) ###### Social
Readable Markdown	An idea for an app is only as good as your ability to bring it to life. The problem is software development is hard, it takes time (and patience!), and it’s not really over once you hit publish. In this ever-changing world, you need to continually evolve it to meet demands. The good news is that now there are modern [low-code development approaches](https://www.outsystems.com/low-code/) with embedded tools designed to accelerate app development and automate much of the application lifecycle. Before you start rolling your eyes, hear me out: [low-code platforms like OutSystems use visual development](https://www.outsystems.com/application-development/visual-programming-importance-and-advantages/), yes, but as a way to wrap up the complexities that you typically face when creating an app or system. You're always in control. You can customize HTML, CSS, and JavaScript on the front-end. And you can use .NET code in your applications. You are never limited in what you can achieve. Plus, you can integrate easily with other applications by consuming REST or SOAP APIs, or use one of thousands of pre-built connectors and components in our open-source Forge repository. [It’s (code) evolution, baby.](https://www.youtube.com/watch?v=aDaOgu2CQtI) In this article, I’ll show you how you can build an app with a low-code platform: the OutSystems platform. For this demo, I’ll be creating an app that most companies need: an employee onboarding app. Before we start, sign up for the [OutSystems free edition](https://www.outsystems.com/low-code-platform/free/) (no credit card info needed), set up your personal environment, and follow this tutorial to see what creating an app in OutSystems really looks like. Now, without further ado, let’s get started. ## Step 1: Create a New Application There are two routes you can take to create a new app in Service Studio, the OutSystems IDE. You can either start from scratch or use one of dozens of sample applications as a foundation. For today’s example, I’ll build the app from scratch and walk you through all the steps to create the employee onboarding app. ![developing outsystems app from scratch](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-01.jpg?updated=20221103120130) Part of setting up a new application is defining what type of app we want to build: is it web, tablet, or phone app? In this example, I’m going to build a [reactive web app](https://www.outsystems.com/blog/posts/reactive-web-applications/)—which is basically an app with a responsive interface that runs in the browser and adapts the user experience to all kinds of devices and screen sizes. ![types of apps](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-2.jpg?updated=20221103120224) If later I want to deploy the same app for phone and tablet, I can do it without writing it from scratch again. That’s because with OutSystems we can easily share data, logic and UI elements, so we can always create one type of app first and then reuse that work to create another type. In the case of a mobile app, the same code can be published on both iOS and Android. So, once again, I don’t have to build it twice. The final step in setting up a new application is filling out some basic information. Here we need to name the app, give it a description, choose the base color for CSS, and upload an icon. If you choose to upload an icon, the app will automatically kick-off the CSS with the right colors—and that’s what I’m going to do in this example. If you’re not sure about all the details yet, don’t worry, we can change all of this later. ![app info](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-3.jpg?updated=20221103120230) ## Step 2: Build the App Shell Once the new application is created, we can add and manage different modules like services, libraries, and extensions as needed. I’m going to create a reactive web app module with the same name as my application. ![developing employee onboarding app](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-4.jpg?updated=20221103120236) And here’s what that looks like. ![reactive web app module](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-5.jpg?updated=20221103151609) The reactive web app module creates an application shell that we can use to start building. Elements like processes, interface elements, logic elements, and data sources can be dragged and dropped into the IDE to quickly create app functionality. The toolbox is on the left, the canvas is in the middle, and the navigation is on the right. ![ide elements](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-with-outsystems-figure-5-copy.jpg?updated=20221103144725) In this example, the first thing I’ll do is create an employee data table that’s connected to an employee database. The table can have create, read, update, and delete operations that can be dragged into the flows as needed. ![outsystems ide environment](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-6.jpg?updated=20221103120253) For the table, I’ll add employee attributes like first name, last name, phone, and email. As I create those names, OutSystems can infer the data type attribute based on the naming convention. I’ll also want to create a Department table; once that’s created, I can add that foreign key to the employee table by dragging a shortcut over. ## Step 3: Build a Login Screen In the Interface tab, we have access to a bunch of different controls and features. The first one I’m going to add is a login screen. ![app login screen](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-7.jpg?updated=20221103120258) This will add a default login process featuring a login button that executes an action of going to the server to validate and authenticate the login process. This can be hooked up to login providers like Okta or social logins like Google and Facebook. By clicking the theme editor button, I can edit the colors, fonts, backgrounds, and structure of the login theme. ## Step 4: Modify the Theme with CSS If I want to modify any element of the theme, I can do it in just a few clicks without any CSS knowledge. It’s a quick way to enhance a theme. ![login screen css modification](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-8.jpg?updated=20221103120304) But, if I want to edit the CSS, I can also do it. The CSS editor shows the [OutSystems UI](https://outsystemsui.outsystems.com/OutsystemsUiWebsite/), which is the global default. ![outsystems ui](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-9.jpg?updated=20221103120310) All tabs to the left of it will inherit or override the information from the OutSystems UI, allowing us to get more specific as needed as we style the overall theme, the app, and the login. To update the code, we can use the WYSIWYG editor or directly type it in. ## Step 5: Add Functionality Now, I click on the MainFlow, which will show me folders of screens. To create a screen, we can just drag and drop them into the canvas. In this case, this will automatically create a list screen and a detailed screen. This will give end-users access to search for employees, update forms, etc. ![drag and drop](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-10.jpg?updated=20221103120137) Although the screens are automatically created, it doesn't mean we don’t have control over them. The platform automatically creates the screens following best practices and to give us what we’ll most likely need, but we can always design it in any way, shape or form possible, and affect every pixel in it. ![employee list](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-11.jpg?updated=20221103120145) On the list, you can see that it pulled data from the data table to automatically create headers that can be sorted. It also added pagination to reduce load times, along with a search function and an Add Employee button to create a new record. If I want to add more fields, I can just drag and drop them from the tab. Throughout the screen we have placeholders for different types of elements. ![add employee to list](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-with-outsystems-figure-12-copy.jpg?updated=20221103152500) If we toggle over to the Interface tab, we can see each element in the Widget Tree. Here we can dig into the details of each widget and edit them as needed. We can also hover the modules on the canvas to move things around and make edits. ![employee list canvas](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-12.jpg?updated=20221103153023) For the UI, there are only three elements you have to understand to develop in OutSystems: - Variables that you can add - Data fetches - Actions. Every UI widget we add will be hooked up to a variable or data source, or will have an action running against it. We can add and edit those in the Elements tab. ## Step 6: Working with Logic Trees ![logic trees](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-13.jpg?updated=20221103153106) Let’s take a look at the search function as an example of what a logic tree looks like. The visual designer shows how the logic is executed; the toolkit on the left will change to provide us with additional options. We can drag and drop these tools onto the canvas to create more complex logic functions. We can add pretty much any logic, from “if-statements” to more complex ones. ## Step 7: Check Your Work and Publish\! ![employee app deployment](https://www.outsystems.com/blog/-/media/images/blog/posts/how-to-build-an-app/v5/bp-how-to-build-an-app-14.jpg?updated=20221103153143) On the Employee Details screen, we’ll see a flow designer for a form to add a new employee. However, OutSystems detects issues that we’ll want to address before publishing, such as security issues and performance warnings like calling the service twice. Once we’re ready to go, all we have to do is click the green button at the top for one-click publish. This will store a new version to the cloud, giving us the ability to revert to older versions as needed. We can also merge the code with other developers’ code to see the differences between versions. The publish action compiles and updates the database scripts, updates the database model, and deploys the web application. Once it’s published, the green button will turn to a blue Open in Browser button that allows us to try the application out. ## Ready to Give It a Try ? This is just a simple, almost “Hello, World!” application to show you how developing with OutSystems looks like. From here, the sky's the limit. OutSystems was designed to build modern enterprise-grade applications and experiences, with a great amount of flexibility through accelerators or even custom code if necessary. If you want to explore it further, you can [sign-up for our free edition here](https://www.outsystems.com/low-code-platform/free/).
Shard	144 (laksa)
Root Hash	13191447194497726944
Unparsed URL	com,outsystems!www,/blog/posts/how-to-build-an-app/ s443