ProductSwitch

v1.0.0-rc.5
@ui5/webcomponents-fiori
<ui5-product-switch>

Basic sample

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

ProductSwitch within ShellBar

<ui5-shellbar
	id="shellbar"
	heading="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 heading="Home" subtitle="Central Home" icon="sap-icon://home"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Analytics Cloud" subtitle="Analytics Cloud" icon="sap-icon://business-objects-experience"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Catalog" subtitle="Ariba" icon="sap-icon://contacts"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Guided Buying" icon="sap-icon://credit-card"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Strategic Procurement" icon="sap-icon://cart-3"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Travel & Expense" subtitle="Concur" icon="sap-icon://flight"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Vendor Management" subtitle="Fieldglass" icon="sap-icon://shipping-status"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Human Capital Management" icon="sap-icon://customer"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Sales Cloud" subtitle="Sales Cloud" icon="sap-icon://sales-notification"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Commerce Cloud" subtitle="Commerce Cloud" icon="sap-icon://retail-store"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Marketing Cloud" subtitle="Marketing Cloud" icon="sap-icon://marketing-campaign"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Service Cloud" icon="sap-icon://family-care"></ui5-product-switch-item>
			<ui5-product-switch-item heading="Customer Data Cloud" icon="sap-icon://customer-briefing"></ui5-product-switch-item>
			<ui5-product-switch-item heading="S/4HANA" icon="sap-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", function(event) {
		if (popover.opened) {
			popover.close();
		} else {
			popover.openBy(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.

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.

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
heading
string
""
Defines the title of the ui5-product-switch-item.
icon
string
""
Defines the icon to be displayed as a graphical element within the ui5-product-switch-item.

Example:
ui5-product-switch-item icon="palette"
See all the available icons in the Icon Explorer.
subtitle
string
""
Defines the subtitle of the ui5-product-switch-item.
target
string
"_self"
Defines a target where the targetSrc content must be open.

Available options are:
  • _self
  • _top
  • _blank
  • _parent
  • _search
targetSrc
target-src
string
""
Defines the ui5-product-switch-item target URI. Supports standard hyperlink behavior.

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: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel