outsystems-ui

OutSystems UI · v2.18.2

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.

We also 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.

Take a look at it, at OutSystemsUI Framework 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 Studio Code
• With these extensions:
  • Document This
  • ESLint
  • Prettier - Code formatter
• Node v12.0+

How to change this code?

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

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:

• 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

• 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 the latest version in OutSystems forge
• Check the online documentation
• NPM Package

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

Write us on the component support page!