How to add a vertical line separator and an object status text to the left side, right after the product switcher in shellbar?

[wei368]

Bug Description

In UI5, ToolbarSeparator is used as a vertical line separator, and ObjectStatus is utilized for displaying status text. In UI5 Web Components, is there an equivalent component or a recommended approach to achieve similar functionality within the ShellBar component?

Per shellbar document https://sap.github.io/ui5-webcomponents/v1/components/fiori/ShellBar/#slots. The location of each component is controlled by the slot. I could not see a slot to archive this

This UI can be achieved in UI5 but is not currently achievable in UI5 Web Components. can you give some advice? thanks

Affected Component

ShellBar component

Expected Behaviour

we should be able to add vertical line separator, or status text object after the product switcher

Isolated Example

https://sap.github.io/ui5-webcomponents/v1/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIDxtZXRhIGNoYXJzZXQ9XCJVVEYtOFwiPlxuICAgIDxtZXRhIG5hbWU9XCJ2aWV3cG9ydFwiIGNvbnRlbnQ9XCJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MS4wXCI-XG4gICAgPHRpdGxlPlNhbXBsZTwvdGl0bGU-XG4gICAgPGxpbmsgcmVsPVwic3R5bGVzaGVldFwiIGhyZWY9XCIuL21haW4uY3NzXCI-XG48L2hlYWQ-XG5cbjxib2R5IHN0eWxlPVwiYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2FwQmFja2dyb3VuZENvbG9yKTtoZWlnaHQ6IDQwMHB4O1wiPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuICAgIDx1aTUtc2hlbGxiYXIgaWQ9XCJzaGVsbGJhclwiIHByaW1hcnktdGl0bGU9XCJDb3Jwb3JhdGUgUG9ydGFsXCIgc2Vjb25kYXJ5LXRpdGxlPVwic2Vjb25kYXJ5IHRpdGxlXCJcbiAgICAgICAgbm90aWZpY2F0aW9ucy1jb3VudD1cIjk5K1wiIHNob3ctbm90aWZpY2F0aW9ucz1cIlwiIHNob3ctY28tcGlsb3Q9XCJcIj5cbiAgICAgICAgPHVpNS1hdmF0YXIgc2xvdD1cInByb2ZpbGVcIj5cbiAgICAgICAgICAgIDxpbWcgc3JjPVwiaHR0cHM6Ly9zYXAuZ2l0aHViLmlvL3VpNS13ZWJjb21wb25lbnRzL3YxL2ltYWdlcy9hdmF0YXJzL3dvbWFuX2F2YXRhcl81LnBuZ1wiIC8-XG4gICAgICAgIDwvdWk1LWF2YXRhcj5cbiAgICAgICAgPGltZyBzbG90PVwibG9nb1wiIHNyYz1cImh0dHBzOi8vc2FwLmdpdGh1Yi5pby91aTUtd2ViY29tcG9uZW50cy92MS9pbWFnZXMvc2FwLWxvZ28tc3ZnLnN2Z1wiIC8-XG4gICAgICAgIDx1aTUtYnV0dG9uIGljb249XCJuYXYtYmFja1wiIHNsb3Q9XCJzdGFydEJ1dHRvblwiPjwvdWk1LWJ1dHRvbj5cblxuICAgICAgICA8dWk1LWlucHV0IHNsb3Q9XCJzZWFyY2hGaWVsZFwiPjwvdWk1LWlucHV0PlxuICAgICAgICA8dWk1LWxpIHNsb3Q9XCJtZW51SXRlbXNcIj5BcHBsaWNhdGlvbiAxPC91aTUtbGk-XG4gICAgICAgIDx1aTUtbGkgc2xvdD1cIm1lbnVJdGVtc1wiPkFwcGxpY2F0aW9uIDI8L3VpNS1saT5cbiAgICAgICAgPHVpNS1saSBzbG90PVwibWVudUl0ZW1zXCI-QXBwbGljYXRpb24gMzwvdWk1LWxpPlxuICAgICAgICA8dWk1LWxpIHNsb3Q9XCJtZW51SXRlbXNcIj5BcHBsaWNhdGlvbiA0PC91aTUtbGk-XG4gICAgICAgIDx1aTUtbGkgc2xvdD1cIm1lbnVJdGVtc1wiPkFwcGxpY2F0aW9uIDU8L3VpNS1saT5cbiAgICA8L3VpNS1zaGVsbGJhcj5cbiAgICA8dWk1LXBvcG92ZXIgaWQ9XCJhY3Rpb24tcG9wb3ZlclwiIHBsYWNlbWVudC10eXBlPVwiQm90dG9tXCI-XG4gICAgICAgIDxkaXYgY2xhc3M9XCJhY3Rpb24tcG9wb3Zlci1oZWFkZXJcIj5cbiAgICAgICAgICAgIDx1aTUtdGl0bGUgc3R5bGU9XCJwYWRkaW5nOiAwLjI1cmVtIDFyZW0gMHJlbSAxcmVtXCI-QW4gS2ltdXJhPC91aTUtdGl0bGU-XG4gICAgICAgIDwvZGl2PlxuICAgICAgICA8ZGl2IGNsYXNzPVwiYWN0aW9uLXBvcG92ZXItY29udGVudFwiIHN0eWxlPVwibWFyZ2luLXRvcDogMXJlbTtcIj5cbiAgICAgICAgICAgIDx1aTUtbGlzdCBzZXBhcmF0b3JzPVwiTm9uZVwiPlxuICAgICAgICAgICAgICAgIDx1aTUtbGkgaWNvbj1cInN5cy1maW5kXCI-QXBwIEZpbmRlcjwvdWk1LWxpPlxuICAgICAgICAgICAgICAgIDx1aTUtbGkgaWNvbj1cInNldHRpbmdzXCI-U2V0dGluZ3M8L3VpNS1saT5cbiAgICAgICAgICAgICAgICA8dWk1LWxpIGljb249XCJlZGl0XCI-RWRpdCBIb21lIFBhZ2U8L3VpNS1saT5cbiAgICAgICAgICAgICAgICA8dWk1LWxpIGljb249XCJzeXMtaGVscFwiPkhlbHA8L3VpNS1saT5cbiAgICAgICAgICAgICAgICA8dWk1LWxpIGljb249XCJsb2dcIj5TaWduIG91dDwvdWk1LWxpPlxuICAgICAgICAgICAgPC91aTUtbGlzdD5cbiAgICAgICAgPC9kaXY-XG4gICAgPC91aTUtcG9wb3Zlcj5cbiAgICA8IS0tIHBsYXlncm91bmQtZm9sZCAtLT5cbiAgICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCJtYWluLmpzXCI-PC9zY3JpcHQ-XG48L2JvZHk-XG5cbjwvaHRtbD5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cbiJ9LCJtYWluLmpzIjp7Im5hbWUiOiJtYWluLmpzIiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0F2YXRhci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvQnV0dG9uLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9JbnB1dC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvU3RhbmRhcmRMaXN0SXRlbS5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvUG9wb3Zlci5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVGl0bGUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0xpc3QuanNcIjtcblxuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWZpb3JpL2Rpc3QvU2hlbGxCYXIuanNcIjtcblxuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvbmF2LWJhY2suanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L3N5cy1maW5kLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMtaWNvbnMvZGlzdC9zZXR0aW5ncy5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3QvZWRpdC5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzLWljb25zL2Rpc3Qvc3lzLWhlbHAuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2xvZy5qc1wiO1xuXG5jb25zdCBzaGVsbGJhciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwic2hlbGxiYXJcIik7XG5jb25zdCBhY3Rpb25Qb3BvdmVyID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoXCJhY3Rpb24tcG9wb3ZlclwiKTtcblxuc2hlbGxiYXIuYWRkRXZlbnRMaXN0ZW5lcihcInVpNS1wcm9maWxlLWNsaWNrXCIsIChldmVudCkgPT4ge1xuICAgIGFjdGlvblBvcG92ZXIuc2hvd0F0KGV2ZW50LmRldGFpbC50YXJnZXRSZWYpO1xufSk7XG4ifX0

Steps to Reproduce

...

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

1 or 2

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

• I’m not disclosing any internal or sensitive information.

[petyabegovska]

Hi @wei368,

This could be implemented with version 2.7.0 of UI5 Web Components Shell bar, see the latest sample: https://sap.github.io/ui5-webcomponents/nightly/components/fiori/ShellBar/#basic-sample, where the new component ui5-shellbar-spacer is used.

The functionality can not be implemented with v1 of Shell bar component: https://sap.github.io/ui5-webcomponents/v1/components/fiori/ShellBar/.

Best regards,
Petya