Questions tagged [ui5-webcomponents]

Questions about "UI5 Web Components" created by SAP. Use this tag also for "UI5 Web Components for React" but then together with the tag [reactjs]. Do NOT use this tag in addition to [sapui5] if your project or the question doesn't involve "UI5 Web Components".

UI5 Web Components

UI5 Web Components are lightweight web UI components, maintained by SAP, which comply with the Fiori design guidelines.

For more information, visit https://github.com/SAP/ui5-webcomponents.


* Not to be confused with which is a framework for developing business web applications.

28 questions
3
votes
0 answers

Using Web Component HTML tags with reflex

I try to use Web Components in Reflex. Code is as such: buttonUI5 :: DomBuilder t m => T.Text -> m (Event t ()) buttonUI5 t = do (e, _) <- element "ui5-button" def $ text t return $ domEvent Click e For ui5-button it worked as expected. Other…
2
votes
2 answers

Customize ui5 web component Side Navigation

I am trying to use and customize the side navigation component but I can not change it's background color, e.g. ui5-side-navigation { background-color: yellow; } does not have any effect on the component. So the questions are: Can I customize…
thanili
  • 777
  • 4
  • 26
  • 57
2
votes
1 answer

How to access @EventData in a @DomEvent in a Vaadin Component

I created a Vaadin Flow v22 Component wrapping the UI5 MultiComboBox Webcomponent: @Tag("ui5-multi-combobox") @NpmPackage(value = "@ui5/webcomponents", version =…
Gork B
  • 21
  • 2
2
votes
0 answers

Use Angular Virtual Scrolling with a ui5-table web component having a sticky header

When I use Angular Virtual Scrolling with a ui5-table web component having the sticky-column-header flag set to true the column headers move to the bottom when scrolling down (randomly jumping between). In my setup I use 100 entries and 3 columns…
FelixD
  • 75
  • 7
1
vote
1 answer

Can I use OpenUI5 and Svelte together?

My question is basically the title. So I've been trying to use them both but does it even make sense..? Through a google search ui5 web components and svelte can be used but it's not the same thing... Thank you
BlueHeart
  • 25
  • 6
1
vote
1 answer

Data binding in UI5

I have an data output from an api as below In the jsonModel samplemodel : [ { “Info” : { Id: “id1”, val: [. {id:”subid1”,name : “name1”}]} }, { “Info” : { Id: “id2”, val: [. {id:”subid2”,name : “name2”}]} } ] How do I display by binding…
AngularDev
  • 23
  • 4
1
vote
1 answer

React: Passing state back to the parent component

I am fairly new to the react. I've browsed many threads with similar questions, followed instructions but can't crack this one: I have an parent component which opens dialog window but I cannot handle closing. I am using the sap UI5 library but I…
1
vote
1 answer

LitElement: Call a Method from external web component

I'm very new to Lit and Web Components. I hope you can help me. I wrote the following Element: import {html, LitElement, PropertyValues} from 'lit'; import {customElement, property} from 'lit/decorators.js'; import…
c0r3
  • 21
  • 2
1
vote
1 answer

Using Svelte JS framework with a Web Component library, how can I accomplish two-binding with the custom elements via the bind:value directive?

Note: There is a GitHub issue open on the Svelte repo for this very question. https://github.com/sveltejs/svelte/issues/4838 While I understand that this may or may not someday become a feature of Svelte, what I am asking is how I can create a…
1
vote
1 answer

Open ComboBox Dropdown of a ui5-combobox web component programmatically

Is there a way to open the dropdown of a web component programmatically? What I found was a solution using a plain HTML combobox setting DroppedDown to true but this seems not to apply to the UI5 ComboBox web component. What I'm…
FelixD
  • 75
  • 7
1
vote
0 answers

UI5 Web Components and ObjectListItem

I am experimenting with UI5-webcomponents and Angular. I try making an application that has similar design with an existing OpenUI5 application that uses a list with ObjectListItem items. The only equivalent I found is ui5-li but it has very limited…
Jirmed
  • 373
  • 2
  • 13
1
vote
0 answers

Is there some easy way to keep ui5 webcomponent(for example ui5-input) in sync with model of angular component?

I was trying to use ngModel with a ui5-input field to automatically update my angular model when typing data into the input field but didn't get it to work. Is there an easy way to have an object at the angular side which changes when typing into…
FelixD
  • 75
  • 7
1
vote
0 answers

Including Third Party Web Components in a Stencil.js Components Library

I'm looking to include Stenciljs in a project and love stencil's way of bundling components and lazy loading only the components being used on the page. Can this be used with third party web components installed in the stencil project? For example,…
Kenji Crosland
  • 2,914
  • 6
  • 31
  • 40
1
vote
1 answer

How to manage layout and alignment in React JS?

I recently began coding in React. It is all good, except that i can not find the proper way to manage layouts and alignment in the UI. I am experienced in the UI5 framework where these things come out of the box, but here i can not find such…
fmi21
  • 485
  • 3
  • 15
1
vote
2 answers

How do I import ES6 Module within a create-react-app without causing tests to fail?

When I follow the instructions found here and add the import reference as they specify: import "@ui5/webcomponents/dist/Button"; the application works fine and is able to import the button. However, when I npm run test, I get an error: SyntaxError:…
1
2