In this beginner session, we dive into OutSystems recommended best practices for developing a Forge component in O11. Explore the provided references and guidelines, witness the creation of a small component for currency formatting, and learn how to adhere to best practices. By the end of this session, you'll gain a clear understanding of building reliable and stable OutSystems Forge components.

1. Welcome!
Kochi OSUG
1
Journey to Forge Mastery: Part 1 -
Webinar on building a Forge component using
best practices
24th February 2024
Muhammed Ibrahim H M
Software Engineer @ Headfitted Solutions Pvt. Ltd.
Sunil Kumar
Solution Architect @ Headfitted Solutions Pvt. Ltd.

2. 2
Introduction

3. My name is Sunil
Kumar, nice to meet you
My passion lies in both technology and
exploring new destinations. With a journey
spanning back to the year 2000, I've immersed
myself in the IT industry. At present, my role
encompasses that of a solutions architect and
an Outsystems trainer at Headfitted.
3

4. My name is Muhammed
Ibrahim H M, nice to meet
you
- OutSystems Developer at Headfitted.
- 3 year experienced Software Engineer based in
Kerala. specializing in crafting secure and
maintainable enterprise-level applications using
OutSystems. Committed to delivering high-quality
solutions that align with industry best practices.
4

5. Forge Components
5
5
Section 1: What is a Component?
Muhammed Ibrahim H M
Software Engineer @ Headfitted Solutions Pvt. Ltd.

6. A component is
successful, when you are
clear in,
1) Deciding its purpose.
2) Designing an API and logic that support the main
scenarios.
3) Giving it the right names and icons.
4) Following a set of best practices that enhance the
experience of reuse and maintenance.
5) Making sure you cover non-functional requirements,
such as performance, security, and scalability.
6

7. Common Component
Categories
1) Integrations
2) Device capabilities
3) User Interface
4) Functional libraries & utilities
5) Development tools
7

8. 8
Section 2: Creating a Component
It is divided into three sections.
Planning
Building
Presenting
Muhammed Ibrahim H M
Software Engineer @ Headfitted Solutions Pvt.
Ltd.

9. 9
1. Planning
- Plan your component's purpose and features before building.
- Components are sets of blocks and actions, shared as modules or applications.
- For UI elements, begin with a module featuring a template for optimal structure.
- Design your component's structure based on its intended use—block for personal use,
module for broader distribution.
- Prioritize strategic planning and purposeful design for a focused and effective
development process.

10. 10
2.1 Building : Architecture
- Build UI elements, actions, and logic after defining your component's purpose.
- Align components with the Architecture Canvas methodology for effective design.
- Architecture Canvas categorizes modules based on non-functional requirements:
foundation, core, and end user modules.
- Further insights on Architecture Canvas and best practices will be provided in post-
event details and emails.
- OutSystems suggests using reactive web over traditional web for high performance
and enhanced development experience across platforms.

11. 11
2.2 Building : Inputs
- Focus on main use cases and provide default values for inputs.
- Start small with a simple component for broader community use.
- Avoid overengineering by keeping functionalities in separate actions.
- Follow OutSystems best practices for high-quality, versatile components.
- Clearly explain JSON options for extended configurations and consider a dedicated
page for advanced scenarios.

12. 12
2.3 Building : Styling
- Consider reusable CSS and JavaScript for UI-centric components.
- Use the Classes property for dynamic changes in expression widgets, favoring CSS classes
for static but conditional elements.
- Explore CSS selectors in relation to a specific instance of the component for enhanced
reusability.
- Avoid using the "!important" CSS tag during customization to simplify modifications to UI
and UX elements.
- Replace buttons, links, or triggers with placeholders and refrain from setting colors for
easier customization.

13. 13
2.4 Building: Performance, Security & Scalability
- Utilize lifecycle event handlers for optimal data control and behavior definition.
- Use If widgets with False conditions and CSS properties prefaced with -servicestudio- for
improved layout adaptation.
- Include sample content within placeholders to guide developers on expected component
behavior.
- Prioritize security by protecting sensitive data and enforcing HTTPS for secure data
transmission.
- Prevent performance bottlenecks with OutSystems' design-time validation.

14. 14
3: Presenting
- Components should be designed with a focus on main use cases, and clarity in names,
descriptions, and visual cues, such as icons.
- Names should be clear, indicating the component's purpose without file extensions or
excessive special characters.
- Descriptions play a crucial role in conveying the component's goal, with comprehensive
details.
Clearly explain the problem the component addresses, highlight notable features, and
include URLs for libraries, API versions, and references to external resources.

15. 15
Section 3: Maintaining a Component
- Prioritize code cleanliness and organization for better maintainability.
- Support developers using your component by following best practices and staying
updated with OutSystems versions.
- Detail changes and comment on code to aid community understanding.
- Enhance clarity by adding notes or comments to logic-related code.
- Embrace collaboration by inviting community members to join the component's
maintenance team when necessary.

16. Demo
Muhammed Ibrahim H M
Software Engineer @ Headfitted Solutions Pvt. Ltd.

17. 17
Upload Asset to Forge
Muhammed Ibrahim H M
Software Engineer @ Headfitted Solutions Pvt. Ltd.

18. • Remove all unused dependencies
• Download Application Packages (.oap)
• Login to OutSystems Forge and click
Upload Asset
https://www.outsystems.com/forge/
• Upload .oap files including demo
Step to Upload

19. • Enter Asset Details
1. Upload Icon
2. Asset Name
3. Preview URL
4. App Type
5. Screenshots
6. Short and Detailed Description
7. Version control and ownership detail
8. Categorization
9. Documentation
Step to Upload

20. • Verify trusted badge checklist
• Review asset dependencies
• Upload Options
Step to Upload

21. • What is a trusted badge ?
• what is its significance ?
Trusted Badge.

22. It’s Q&A time
Clarify all your queries regarding Forge.

23. 23
Thank you for joining us in the Kochi
OutSystems User Group!
Stay tuned for Part 2 of Journey to Forge
Mastery Series
It's a Wrap.