Tool Development Overview


The following controls provide an SAP Fiori extending framework for components that serve complex use cases in the area of tools and technologies. The purpose of these controls is to ensure that user interfaces in the tools area are consistent, and that applications and tools are implemented with a common design language based on SAP Fiori.

This library focuses on software and technology tools, which are programs that help developers, designers, and administrators to create, maintain, administrate, configure, repair, manage, update, or otherwise support apps throughout their lifecycle. Different tools typically address all phases of the software lifecycle, such as specification, design, validation, creation, configuration, and management of apps.

These software and technology tools may address and embrace needs during the entire lifecycle of software development. Consequently, they may integrate a range of functionalities, and their layout may be more complex than that provided by other floorplans and controls in the SAP Fiori space.

A tool typically implements at least the tool header. This extends the functionality of the recommended navigational pattern of tools – the side navigation menu – with a control that allows users to choose the displayed characteristic of side navigation. Tools that use side navigation must also implement the tool header. The specific layout of the main content area depends on the tooling use case. The contents of this library are described in detail in the respective articles of the controls included. You can use these controls in addition to all other SAP Fiori controls.

You should only use the controls if an app’s target group is somewhat or purely technical in nature, and if the app’s main use cases exceed a certain level of complexity and are in development, administration, or configuration.

For more information, check out the following articles:

Example screen using tool controls
Example screen using tool controls
Example screen using tool controls
Example screen using tool controls


Want to dive deeper? Follow the links below to find out more about related controls, the SAPUI5 implementation, and the visual design.

Elements and Controls