SAP UI5 Web Components Builder

SAP UI5

UI5 Web Components are framework-independent UI elements incorporating the SAP Fiori design.
Visit https://github.com/SAP/ui5-webcomponents for more details.

WCB Builder

WCB builder helps to generate SAP UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.

Need for the WCB Builder

There are multiple design system which has web component libraries support with the different set of components to build UI designs in their ecosystems.WCB Builder helps to provide features to generate UI designs for all of those web components supported UI design ecosystems.

WCB Builder helps to

  1. create responsive content,
  2. add / clone customize the components, build once and reuse it by saving the design,
  3. use from pre-saved forms, widgets, custom components,
  4. test with the preview mode, and
  5. adjust the properties.

Sample Layouts / Pages

Sample Order Form generated using WCB Builder

Sample Customer Form generated using WCB Builder

WCB Builder Application Flow

  1. Login / Signup
  2. Choose the framework
  3. Use Existing template / Edit saved design / Create New Design,
  4. Edit the content / properties of the elements / components
  5. Preview / Save / Download.

WCB Builder currently supported the List of web component frameworks / libraries

  1. Adobe Spectrum Web Components - Adobe Spectrum design language implementation built with Web Components.
  2. SAP UI5 Web Components - Set of reusable UI elements implementing SAP Fiori Design Guidelines.
  3. Carbon Web Components - Carbon Design System variant on top of Web Components.
  4. Ionic Web Components - Using Web Components in Ionic.
  5. Crayons Web Components - Collection of web components that adheres to the Freshworks Design System.
  6. More to come...