In this section we present a list of components that we use in SuccessFactors. Many of these are similar to SAP Fiori Design specifications. However, some of them go beyond that to cover SuccessFactors-specific use cases.

A component library should be part of any design system. It will reduce the risk of any variation between products or

ending up with different components in the same application. If you’re looking to improve design consistency and development productivity, component libraries offer the chance to standardize development, reduce code duplications, improve collaboration between teams, and drive scalability.

If it’s not yet clear how you’ll benefit from a component library, then here are some questions that could prompt your thinking:

• Do you see developers building the same components for each project but with slight variations?
• Are any developers confused about which UI or UX convention they should use in interfaces?
• Do you need to release updates and changes fast?
• Do you have a lot of customization?
• Are you looking for a combined design system and component library?

If the answer to any of these questions is yes, then consider to support and build up this component library here to reduce multiple development and customization.

With so much influence over your project deliverable and team motivation, it’s important to choose the right solution for your needs. We have decided to work on a Storybook integration for this library to provide embbeded information obout the listed controls.

We are planning the integration of Storybook files. Storybook is an open-source tool for developing UI components in 15 different frameworks, among others the most popular ones: React, Vue, and Angular. It’s a combined coded design system and component library that acts as a sandbox for effective components and page development, testing, and documentation. Your developers can take a more effective component-driven approach over a visual one.

The Storybook integration feature will be enabled soon for this library.

Resources

Here some more information, about the different components libraries at SuccessFactors:

• UI5 Web Controls
• UI5 Web Components & UI5 Web Components on React
• SF specific libraries - Common Web Components, Common React Components
• SF project specific components - Homepage, Dynamic Teams, OMP, etc.
• Control modification & Composite controls - In general, the development of custom controls is a balancing act between the perfect coverage of a design and a use case and the reuse of an existing control. Before requesting a custom control the designer should consider that the development of a custom control is always associated with higher costs (building the component, unit testing, enabling for accessibility, browser compatibility, etc.). There is a new process to be followed: How to request Custom Components