The OutSystems Screen Templates Web works as an accelerator when developing web applications with OutSystems. It contains screen templates that you can use and change according to your own needs.
This component already comes installed by definition with the platform, so basically, the only thing you need to do to use it is to create a new screen.
Add a new screen
Browse the list of available screen templates and select the one you want
Replace sample data with real data
Make any required changes to the UI and logic
To add a new screen, either right-click on the pretended flow or drag the Screen node on the toolbox.
After that, a new window will pop up with all the templates available, and you can choose the option that best fits your scenario.
On the left side, you can browse through different categories. In the middle, you can see the gallery of available screen templates. On the right, you can have a better preview of the selected screen template.
Once the screen is selected, you can name it and press "Create Screen".
Some screens will be pre-populated with sample data in order to be ready to publish and preview in runtime without any changes required.
In order to use your own data, you can easily drag and drop your entities into the UI, and the data will be replaced automatically. Depending on the difference in data structures, there may be errors left to solve. View more information about replace data.
Now you can continue to make any remaining changes on both UI and logic of the screen.
You'll find plenty of different UI patterns on the left side of Service Studio, in the toolbox. If you need to have an overview of all patterns available, visit the OutSystems UI website.
More information about Screen Templates
How to create custom Screen Templates