ProductSwitch

v1.0.0-rc.5

@ui5/webcomponents-fiori

<ui5-product-switch>

Basic sample

<ui5-product-switch>
	<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
	<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
	<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
	<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
</ui5-product-switch>

ProductSwitch within ShellBar

<ui5-shellbar
	id="shellbar"
	title-text="Corporate Portal"
	secondary-title="secondary title"
	logo="../../../assets/images/sap-logo-svg.svg"
	show-product-switch
	show-co-pilot>
</ui5-shellbar>
<ui5-popover id="productswitch-popover" placement-type="Bottom">
	<ui5-product-switch>
		<ui5-product-switch-item title-text="Home" subtitle-text="Central Home" icon="home"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Analytics Cloud" subtitle-text="Analytics Cloud" icon="business-objects-experience"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Catalog" subtitle-text="Ariba" icon="contacts"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Guided Buying" icon="credit-card"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Strategic Procurement" icon="cart-3"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Travel & Expense" subtitle-text="Concur" icon="flight"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Vendor Management" subtitle-text="Fieldglass" icon="shipping-status"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Human Capital Management" icon="customer"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Sales Cloud" subtitle-text="Sales Cloud" icon="sales-notification"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Commerce Cloud" subtitle-text="Commerce Cloud" icon="retail-store"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Marketing Cloud" subtitle-text="Marketing Cloud" icon="marketing-campaign"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Service Cloud" icon="family-care"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="Customer Data Cloud" icon="customer-briefing"></ui5-product-switch-item>
		<ui5-product-switch-item title-text="S/4HANA" icon="batch-payments"></ui5-product-switch-item>
	</ui5-product-switch>
</ui5-popover>

<script>
	var shellBar = document.getElementById("shellbar");
	var popover = document.getElementById("productswitch-popover");

	shellbar.addEventListener("product-switch-click", event => {
		if (popover.opened) {
			popover.close();
		} else {
			popover.showAt(event.detail.targetRef);
		}
	});
</script>

Overview

The ui5-product-switch is an SAP Fiori specific web component that is used in ui5-shellbar and allows the user to easily switch between products.

Keyboard Handling

The ui5-product-switch provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation:

[TAB] - Move focus to the next interactive element after the ui5-product-switch
[UP/DOWN] - Navigates up and down the items
[LEFT/RIGHT] - Navigates left and right the items

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/ProductSwitch.js";
import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js"; (for ui5-product-switch-item)

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot

Type

Description

default

HTMLElement [0..n]

Defines the items of the ui5-product-switch.

ProductSwitchItem

Overview

The ui5-product-switch-item web component represents the items displayed in the ui5-product-switch web component.

Note: ui5-product-switch-item is not supported when used outside of ui5-product-switch.

Keyboard Handling

The ui5-product-switch provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation:

[SPACE/ENTER/RETURN] - Trigger ui5-click event

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/ProductSwitchItem.js";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name

Type

Default Value

Description

icon

string

Defines the icon to be displayed as a graphical element within the component.

Example:

ui5-product-switch-item icon="palette"

See all the available icons in the Icon Explorer.

subtitleText
subtitle-text

string

Defines the subtitle of the component.

since v1.0.0-rc.15

target

string

Defines a target where the targetSrc content must be open.

Available options are:

_self
_top
_blank
_parent
_search

targetSrc
target-src

string

Defines the component target URI. Supports standard hyperlink behavior.

titleText
title-text

string

Defines the title of the component.

since v1.0.0-rc.15

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name

Description

click

Fired when the ui5-product-switch-item is activated either with a click/tap or by using the Enter or Space key.

Theme:

Morning Horizon (Light)

Evening Horizon (Dark)

Horizon High Contrast Black

Horizon High Contrast White

Quartz Light

Quartz Dark

Quartz High Contrast Black

Quartz High Contrast White

Content Density:

Cozy

Compact

Text Direction:

LTR

RTL

Apply

Cancel