Explore

The action select control allows you to offer actions within a selection dialog.

The breadcrumb is a navigation control that shows the navigation path for the currently displayed object. It is used in editors. All levels besides the currently viewed level are  links. By clicking a link, users navigate back to the corresponding object in the hierarchy. If there is not enough space to show the full breadcrumb, […]

The busy dialog informs the user about an ongoing operation and blocks the user from doing other activity.

The busy indicator informs the user about an ongoing operation. It can be displayed with or without text next to it. Do Avoid showing multiple busy indicators at the same time. Use the busy indicator when the ongoing operation is relevant to a specific control among other controls on the screen. Don’t Don’t display the busy indicator if the operation […]

Use the busy state when a process is running and data is refreshing

The Menu Button control is a button that opens a menu upon user’s click.

A segmented button shows a group of options. When the user clicks on one of the options, it stays in a pressed state.

Buttons allow users to trigger actions, either by clicking on it.

Toggle button is a button which indicates one of two states.

A checkbox lets the user set a binary value (such as “true/false”)

The code editor toolbar enables the user to trigger an action that impact the whole editor (e.g., undo) or change its view settings (e.g., preview resolution). It can also contain breadcrumbs. It appears always at the top  of the editor and does not scroll away. Do Use the toolbar to provide the user with key actions that impact the whole editor, such as view settings […]

The multi combo box control is used to enable users to select several options from a long list.

The combo box with a single selection is a control which allows users to select one option from a long list of options. The user can open the list by clicking on the arrow and can type to filter the list of options. The user can press the up and down keys to navigate between options and press the space […]

The context menu (also known as right-click menu) opens by right-clicking content. It lists all available actions and navigation points relevant to that content. Please contact us before adding any menu, sub-menu, or menu entry  to SAP Web IDE. Do Make sure that every action or navigation point available from the context menu is also available in main menu. Only include […]

The date picker lets users pick a date from a calendar or enter a date. The control also allows users to navigate directly from one month or year to another. When typing a date, the system validates the entry and provides the user with feedback. With the date picker, the user can see a day view, month view, or year […]

The date range selection is a single-field control that lets users pick a range of dates from a calendar or enter a date range. The calendar provides users a day view, month view, or year view, so users can navigate between months and years. Do Use this control if the user needs to enter a range of dates. By default […]

The diagram editor toolbar enables the user to trigger actions that impact the whole editor,, such as undo or change the view settings, such as the resolution. It can also contain breadcrumbs. It always appears at the top of the editor and does not scroll off the screen. Do Use the toolbar to provide the user with key actions that impact the whole editor, […]

The diagram toolbar enables the user to trigger an action, such as adding nodes, or change its view settings, for example, zoom in/out. The toolbar appears above the diagram and has a transparent background. Do Use the toolbar to provide the user with key actions that impact the whole diagram. Provide a title in the toolbar if there is no other title for […]

The dialog box control is a small window which pops up and forces the user to provide information. It pops up in the center of the screen, in a modal window on top of a black overlay to get the user’s attention.The user can’t perform actions outside the dialog box while it’s displayed. Do Avoid crowded dialog boxes. Use up to […]

An empty state is a situation in which a container, such as an editor, a table, or list, has no content to display.  There are a few reasons why this could happen. For example, there could be connection issues, or the user might be seeing the container for the first time and needs to do […]

Images are visual representations of objects or function. They are used not only for decoration. They can be used as preview for user’s selection. For example, preview of app when selecting app template. Please contact us before developing and adding animation in SAP Web IDE. Do When using an image as preview, enable users to enlarge the […]

A multi input field allows the user to enter multiple values, which are displayed as tokens. Do Use the multi input field if you want to allow the user to select several values from a data set. Don’t Don’t use this control if the user needs to type or select one entry only. In this case, consider using the standard input field or standard […]

The standard input field is a free text control which allows users to enter and edit text or numeric values in a single line. Do Use the input field control if the user needs to enter a short, single-line text or number, password, URL, phone number, or e-mail address. By default display a label, unless the input field is […]

A label is the name or title of a control or a group of related controls. It informs the user about which data is displayed or expected to be entered in the control by the user. Do Set the property required to indicate that a field is mandatory. This will automatically add an asterisk (*) to the field. Locate […]

The layout editor toolbar enables the user to trigger actions that impact the whole editor, such as undo or change the view settings, such as the preview resolution. It can also contain breadcrumbs. It always appears at the top of the editor and does not scroll off the screen. Do Use the toolbar to provide the user with key actions that impact the whole […]

A link (also known as a hyperlink) is a clickable text element. The link control is used for navigation.

The menu bar is the black horizontal strip at the top of all perspectives. It lists all available actions and navigation points in logical groups. Please contact us before adding any menu, sub-menu, or menu entry  to SAP Web IDE. Do Make sure that every action or navigation point available from a context menu is also available in the […]

The manifest editor toolbar enables the user to trigger an action that impact the whole editor (e.g., undo) or change its view settings (e.g., preview resolution). It can also contain breadcrumbs. It appears always at the top  of the editor and does not scroll away. Do Use the toolbar to provide the user with key actions that impact the whole editor, such as view […]

The message box is a small window that pops up to inform users about a general error or notification. It pops up in the center of the screen, in a modal window on top of a black overlay to get the user’s attention. The user can’t work as long as the message box is displayed. The visual design of […]

The notification area is where you can inform users about the success or failure of an operation without interrupting them or blocking them from performing actions. Do Inform users in the notification area when you don’t want the message to interrupt users or block them from working. The message appears in the top right corner, […]

The panel toolbar enables the user to trigger an action (such as move up) or change its view settings (such as filter). The toolbar appears in the panel header and has a transparent background. Do Use the toolbar to provide the user with key actions that impact the whole panel. Provide a title for the panel on the panel toolbar. Provide action buttons with icons […]

You can create a new perspective and make it available in the perspective menu. Do Use a single-word name for the perspective. Follow the perspective icon style when creating an icon. Add your perspective between the Development perspective and References perspective. Add a menu entry to view the perspective in the Tools menu, and use the perspective name as the menu entry name. […]

The perspective toolbar is the gray strip that appears in some perspectives below the black menu bar on the top. It aggregates icon buttons to trigger actions defined for that perspective that are always relevant for that perspective, for example: Save, Run, etc.. The icon buttons are always shown, regardless of the editor that the user is viewing. […]

The perspective menu is where users navigate between perspectives. It appears on the left side of the screen. Please contact us before adding a new perspective.

When adding a plugin into the problem view, you can provide a toolbar with action icons. Please contact us before adding content into this area.

The project explorer is where the user navigates between or open files, editors in the Development perspective. The project explorer contains a toolbar above the project tree with action icons for actions that impact the whole project explorer or change the view settings, such as showing hidden files or collapsing all projects. It always appears at the top of the project explorer and does not scroll off […]

The radio button provides users with a set of options and the user can select one option only. Each option is represented by a radio button. Radio buttons work in groups only. Do By default display a label, unless the combo box is next to another control that already has a label. When using a radio button group in a form, show […]

The rating indicator is a control which enable users to rate content or to indicate a rating using 5 clickable stars. Do Use the star symbol. Use small size: 1 rem (16 px) Use a maximum of seven symbols, although five symbols are preferred. Don’t Don’t use images as rating symbols. Don’t change default colors.

The right pane is where you can add plugins that support the user when using a specific perspective. For example, the Git pane and Debug plugin pane support the user when using the Development perspective. Users can open and close the right pane by clicking on its icon in the right pane menu. Please contact us before adding content to the right pane.

The right pane menu is where the user opens and closes right-pane content, such as trigger search, view History, etc. Each pane is represented in the menu by an icon. Please contact us before adding content in the right pane.

When adding a plugin into the right pane, you can provide a toolbar with action icons for actions that impact the whole pane or change the view settings. It always appears at the top of the editor and does not scroll off the screen. Please contact us before adding content in the right pane.

A search is a means of accessing information quickly. If an amount of data is too large for users to find something just by scanning through it, you should consider providing a search function. The search field is also the control of choice for filtering down a given amount of information. Do Use a search field if you want to enable users to […]

The select control (also known as a dropdown list) allows users to select an item from a predefined list. The select control composed of (1) select field, and (2) option list.

The select dialog enables users to select one or more items from a multi-column list. It also has a search control above the list for filtering. Examples of select dialog used in SAP Web IDE: Quick Access Open Resource Adding a new control from the Outline tab in the Layout editor. Do Use this control if users need to […]

The slider is a control that enables users to adjust values in a specified numerical range. Only a horizontal slider is available. Do Use the slider to change values with graphical support. By default display a label, unless the slider is next to another control that already has a label. Always use the slider with a progress bar. Don’t Don’t use […]

The switch control mimics a physical switch that allows users to turn things on or off. It can also be used to enable users to switch between two states. The options the user switches between are displayed inside the control.   or   Do Use the switch control if you need to emphasize On/Off characteristics within a dialog box or table […]

Tabs provide a way to display different facets of the same activity based on logical groups.
Use them to break down complex screens into simpler ones.

The table toolbar enables the user to trigger an action or change its view settings

A grid table contains a set of data that is structured in rows and columns. The first column in the table is a selection column. The user can select a row by clicking on a cell in that column. The next columns display data. Each cell in these columns can be one of the following controls: text (read-only), […]

The text control holds read-only text. Do Use a text control as a value for read-only fields in a form, table, etc. Don’t Don’t use a text control for labels in forms. Don’t use the text control for titles in a diagram toolbar, panel toolbar, table toolbar, or a tree toolbar.

The time picker control enables users to select a time. Do Set default value to avoid unnecessary scrolling. It often makes sense to set the default for the time to the full or half hour, setting the minutes to 00 or 30. Sometimes it makes more sense to use the current time. Don’t Don’t use this control if you […]

The title control is a text that contains additional semantic information for accessibility purposes. The title control can be used by assistive technologies such as screen readers. The title style (font, color, size) is defined automatically according to where it is used (in a toolbar, right pane, etc.) Do Use the title control when you need to provide […]

The token control is an item that represents a selected option in a multi combo box control or an added item in a multi input control. Tokens can be added, removed, selected, or deselected. When adding tokens to the multi combo box and multi input controls, new tokens are added in the order in which they are entered. […]

There are several places where you can provide a toolbar with action icons or action buttons. Areas Project explorer  – see guidelines for project explorer toolbar. Right pane – see guidelines for right pane toolbar. Perspective  – see guidelines for perspective main toolbar. Editors Code editor – see guidelines for code editor toolbar. Diagram editor – see guidelines for diagram editor toolbar. Layout […]

The tree control is used to display a hierarchical set of data which is grouped into nodes. It contains expand and collapse icons to enable users to show or hide the children of a node. Do Provide a search control if the tree has more than 10 nodes and leaves. Users tend to have more difficulties finding items in hierarchical […]

A tree table is a table with a hierarchical set of data grouped into nodes. The first column in the table is a selection column. The user can select a row by clicking on a cell in that column. The second column in the table is the tree column which provides the hierarchical structure. Users can expand and […]

The tree toolbar enables the user to trigger an action, such as adding nodes or change the view settings (e.g., filter). The toolbar appears above the tree and has a transparent background. Do Use the toolbar to provide the user with key actions that impact the whole tree. Provide a title for the tree on the tree toolbar. Provide action buttons with icons or text. Provide […]

Please contact us before developing and adding video in SAP Web IDE.

The wizard is a big window that pops up and forces the user to provide information in several steps. The wizard pops up in the center of the screen in a modal window on top of a black overlay to get the user’s attention. The user can’t perform actions outside the wizard as long as it’s displayed. Do Use a wizard if users need to perform a long task […]