OutSystems UI · v2.15.0

About the component

Create modern experiences with fully customizable responsive Screen Templates and UI Patterns for Native Mobile and Reactive Web Apps.

One Framework	Fully Integrated	Responsive by Default	Limitless Possibilities
Create seamless experiences for Reactive Web and Native Mobile Applications.	Drag and drop UI Patterns and Screen Templates from OutSystems Service Studio.	Ready to use Layouts and UI Patterns that automatically adapt to the device size.	Extend the styles of over 70 UI Patterns and Screen Templates to make them yours.

Key features

• More than 70 UI patterns
• Easily customizable and extendable design system
• Responsive UI
• Right-to-left support
• Accessibility compliance with WCAG 2.1
• Actions to deal with different device types
• Built for Reactive Web and Mobile apps

Find out more in OutSystems UI website.

Where can you find the component?

The OutSystems UI component, like all components, can be found in OutSystems forge.

Where can you find documentation?

The documentation can be found in the OutSystems UI website and in OutSystems product documentation. Code documentation can be found here - This is a beta version of the code documentation.

Why use this component?

OutSystems UI allows you to create applications with great user experience and beautiful design at unbeatable speed. This is how all the pieces come together and how you can go from creating your first application to see it working in minutes!

About this repository

This repository contains the code that is used to control/style the OutSystems UI patterns. The code is written in TypeScript🖤 and SCSS.
You can fork it then branch it and PR your proposals!

What tools should you use?

We highly recommend the usage of the following tools:

• Visual Code
• With these extensions:
  • Document This
  • ESLint
  • Prettier - Code formatter

How to change this code?

1. Do a Repository Fork
2. Create a branch based in the branch master (lastest & greatest release)
3. Open your banch Code in Visual Code
4. Run the following command in Visual Code terminal: npm run setup (this will install all the dependencies that you need to compile the code)
5. Do your magic! :)
6. Document your code (with the extension "Document This", start typing /** and the extension will give you a good starting point
7. Compile and fix errors and warnings (in Visual Code terminal: npm run build)
8. Check if the code format is following our conventions (in Visual Code terminal: npm run lint)
   1. Some of the conventions can be fixed automatically by lint (in Visual Code terminal: npm run lintfix)
   2. Although the script above execute the prettier conventions, you may want to run it over all project files (in Visual Code terminal: npm run prettier)
9. Fix all errors & warnings! :)
10. Kept the branch updated with the master branch and also synchronized with the upstream master
11. Create a PR, describing what was the (mis)behavior, what you changed and please provide a sample

How to generate Documentation?

We use the TypeDoc to automatically generate documentation. TypeDoc converts comments in TypeScript source code into rendered HTML documentation, alongside UML diagrams for each class and Interface.

For the UML diagrams to be generated, some extra installations are required in your system:

• JAVA (latest version)
• Graphviz (latest version)

Finally, you just need to run the command (in Visual Code terminal): npm run docs!

NOTE: This is not working properly at windows yet since UML graphics are not being generated.

How to do a Pull Request?

After completing your changes, and testing, please proceed with submitting a Pull Request.

To be accepted, a Pull Request needs to:

1. Fulfill the following requirements

   • Needs to compile without errors
   • Needs to follow the code style rules (without warnings and errors)
   • Needs to be approved by 2 team members (owners of the repo)
   • The Pull Request template, should be filled up by the Pull Requestor:
     • Provide a short description
     • A link to a sample page showing the fixed behavior or the new feature
     • What was happening?
     • What was done?
     • Tests steps
     • Screenshots
     • Checklist

2. Follow best practices

   • The submitted code should be well documented (e.g. comments).
   • Avoid changes outside the scope of the issue in hands.
   • Avoid exposing sensible information of any kind (e.g. internal server link, process, etc).

Useful Links

• Download latest version in OutSystems forge
• Check the online documentation

📫  Have a question? Want to chat? Ran into a problem?

Write us in the component support page!