Skip to content

minor mods and improvements to the ui5-webcomponents-react series #24270

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicoschoenteich merged 1 commit into from
Oct 26, 2026
Merged

minor mods and improvements to the ui5-webcomponents-react series #24270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ author_profile: https://github.com/Lukas742

## Prerequisites

- Complete the tutorial [Get Started with UI5 Web Components for React](ui5-webcomponents-react-introduction).
- Complete the tutorial [Get Started with UI5 Web Components for React](tutorials/ui5-webcomponents-react-introduction).

## You will learn
- How to import UI5 Web Components into your application
Expand Down
34 changes: 20 additions & 14 deletions tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,13 @@ UI5 Web Components for React also comes with a chart library. In this tutorial,
```

> **Note:**
When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents*` packages. You might have to also manually pin `@ui5/webcomponents-react-base` to that minor version. In that case, the install command would be `npm install @ui5/webcomponents-react-charts@<version> @ui5/webcomponents-react-base@<version>`.
> When facing issues with installing, please ensure you're using the same [minor version](https://semver.org/#summary) as the other `@ui5/webcomponents*` packages. You might have to also manually pin `@ui5/webcomponents-react-base` to that minor version. In that case, the install command would be `npm install @ui5/webcomponents-react-charts@<version> @ui5/webcomponents-react-base@<version>`.
>
> For example:
>
> ```shell
> npm install @ui5/webcomponents-react-charts@2.27 @ui5/webcomponents-react-base@2.27
> ```

2. Then, import `LineChart` and `BarChart` into `MyApp.tsx`.

Expand All @@ -45,7 +51,7 @@ UI5 Web Components for React also comes with a chart library. In this tutorial,

_Charts only offer limited accessibility support with only basic built-in features, so it’s essential to ensure your implementation meets the accessibility standards of your application!_

1. Start with the `LineChart`. You can add it underneath the `Text` component. Then pass the `dimensions` and `measures` prop with an empty array as value.
1. Start with the `LineChart`. You can add it underneath the `Text` component. Then pass the `dimensions` and `measures` props with empty arrays as values.

```TypeScript / TSX
<Text style={{ padding: "var(--sapContent_Space_S)" }}>
Expand All @@ -56,7 +62,7 @@ _Charts only offer limited accessibility support with only basic built-in featur

In the application you should now see a placeholder for the `LineChart` within the `Card` content. The reason for this is that the chart has not received any data and therefore the placeholder is displayed.

2. Add data to your component. For this sample `dataset` is static you can define it outside the component, right above your `MyApp` component.
2. Add data to your component. For this sample `dataset` is static, and you can define it outside the component, right above your `MyApp` component.

```TypeScript / TSX
const dataset = [
Expand Down Expand Up @@ -101,11 +107,11 @@ _Charts only offer limited accessibility support with only basic built-in featur
/>
```

Congratulation, you implemented your first Chart component.
Congratulations, you implemented your first Chart component.

![LineChart](01_linechart.png)

4. We now want to show same data just with a different representation. For that, you can use the same props as you did with the `LineChart` for a `BarChart` and add it to the `Card`.
4. We now want to show the same data, just with a different representation. For that, you can use the same props as you did with the `LineChart` for a `BarChart` and add it to the `Card`.

```TypeScript / TSX
<BarChart
Expand All @@ -115,7 +121,7 @@ _Charts only offer limited accessibility support with only basic built-in featur
/>
```

Two charts are rendered now with equal datasets but different representation.
Two charts are rendered now with equal datasets but different representations.

Your `MyApp.tsx` component should look like this:

Expand Down Expand Up @@ -194,14 +200,14 @@ export function MyApp() {

Two charts in one `Card` is a bit too much, don't you think? It would be nicer if the charts could be toggled by clicking on the header. Let's implement that!

1. First add a state. It should control, which chart is going to be rendered. Use the [State Hook logic](https://react.dev/reference/react/useState) to implement the state and set `"lineChart"` as default value. Don't forget to import `useState` from React, otherwise you will get an error.
1. First add a state. It should control which chart is going to be rendered. Use the [State Hook logic](https://react.dev/reference/react/useState) to implement the state and set `"lineChart"` as default value. Don't forget to import `useState` from React, otherwise you will get an error.
- Import the `useState` function in the header of the `MyApp.tsx` file.
```TypeScript / TSX
import { useState } from "react";
import { useState } from "react";
```
- Use the `useState` function right after you start to define the `MyApp` function (before the click handler).
```TypeScript / TSX
const [toggleCharts, setToggleCharts] = useState("lineChart");
const [toggleCharts, setToggleCharts] = useState("lineChart");
```

2. By clicking on the `CardHeader` the state should be set corresponding to the chart which should be displayed.
Expand Down Expand Up @@ -256,7 +262,7 @@ Two charts in one `Card` is a bit too much, don't you think? It would be nicer i
import { Card, CardHeader, Text, Icon } from "@ui5/webcomponents-react";
```

The icons themselved can be imported altogether (`import '@ui5/webcomponents-icons/dist/AllIcons.js';`), but to reduce bundle size and for better maintainability, it's recommended importing each icon on its own:
The icons themselves can be imported altogether (`import '@ui5/webcomponents-icons/dist/AllIcons.js';`), but to reduce bundle size and for better maintainability, it's recommended importing each icon on its own:

```TypeScript / TSX
import lineChartIcon from '@ui5/webcomponents-icons/dist/line-chart.js';
Expand Down Expand Up @@ -395,7 +401,7 @@ One of React's main advantages is its efficient rendering mechanism: a component
1. In order to demonstrate this behavior, add a new `state` (right after the definition of the chart state from the previous step).

```TypeScript / TSX
const [loading, setLoading] = useState(false);
const [loading, setLoading] = useState(false);
```

2. Then edit your `handleHeaderClick` function like this:
Expand Down Expand Up @@ -438,9 +444,9 @@ One of React's main advantages is its efficient rendering mechanism: a component
/>
```

This updates the component every time you switch between charts and simulates a data call.
This updates the component every time you switch between charts and simulates a data call with the 2000ms timeouts.

As you can see, only the component affected by the state is updated, and the rest stays the same: The `CardHeader` remains unchanged until the 2000ms timeout is over (and `setToggleCharts` is called), whereas the charts `loading` prop changes immediately (as `setLoading` is called immediately). If you're working with data, you most probably will need a loading indicator. All UI5 Web Components that are able to display data have a `loading` prop and therefore also a loading indicator.
As you can see, only the component affected by the state is updated, and the rest stays the same: The `CardHeader` remains unchanged until the timeout is over (and `setToggleCharts` is called), whereas the charts `loading` prop changes immediately (as `setLoading` is called immediately). If you're working with data, you most probably will need a loading indicator. All UI5 Web Components that are able to display data have a `loading` prop and therefore also a loading indicator.


### Add dynamic header and text
Expand Down Expand Up @@ -503,7 +509,7 @@ To make your `Card` look cleaner and to give the user the information that the h
3. Add accessibility attributes to the `Icon`

If the `header` alone does not sufficiently describe the currently visible `Icon`, you can define an `accessibleName`. Its value will be applied as the `aria-label` of the internal element, which screen readers will pick up.
In case the `header` already explains the content and the icon is purely decorative, you can set its `mode` to `"Decorative"`, so it will be ignored by screen readers.
> In case the `header` already explains the content and the icon is purely decorative, you can set its `mode` to `"Decorative"`, so it will be ignored by screen readers.

```TypeScript / TSX
<Icon
Expand Down
17 changes: 7 additions & 10 deletions tutorials/ui5-webcomponents-react-dashboard/ui5-webcomponents-react-dashboard.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@ The `ShellBar` is the central navigation element in your web application and sho
</ShellBar>
```

That is strange -- the `ShellBarItem` does not show an icon.
But - something's not right. Nothing is rendering now.

Every `Icon` that is used in a component has to be imported manually. All available icons can be found [here](https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html#/overview/SAP-icons).

Expand All @@ -137,7 +137,7 @@ The `ShellBar` is the central navigation element in your web application and sho
import activateIcon from "@ui5/webcomponents-icons/dist/activate.js";
```

Now your `ShellBarItem` shows up on the right side of the `ShellBar`.
Now everything is back and your `ShellBarItem` shows up on the right side of the `ShellBar`.

![ShellBar](02_shellbar.png)

Expand Down Expand Up @@ -453,7 +453,7 @@ For this, add two `Text` components above the `ProgressIndicator` of the first `
import tableViewIcon from "@ui5/webcomponents-icons/dist/table-view.js";
```

> At this point, the `AnalyticalTable` throws an error due to the missing required `data` prop. You will fix this in the next.
> At this point, the `AnalyticalTable` throws an error due to the missing required `data` prop, and rendering is not complete. You will fix this next.

2. Add data and columns to the table. The `columns` prop expects an array of objects that include at least the `accessor` to the data or a unique `id` property. The value of `Header` will be shown as column header.

Expand Down Expand Up @@ -504,7 +504,7 @@ For this, add two `Text` components above the `ProgressIndicator` of the first `
You can add many more properties to the `AnalyticalTable` component. For example, you can allow sorting, filtering and grouping via `sortable`, `filterable` and `groupable`, enable different selection modes with `selectionMode`, control how the table splits up available space between the columns with `scaleWidthMode` and much more.
Feel free to take a look at the [documentation](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-analyticaltable--docs) and explore the different examples before continuing.

The default visible rows count is at 15. This number is a bit to high for a dashboard table. Reduce the `visibleRows` count to 5 by setting the corresponding prop.
The default visible rows count (before scrolling starts) is at 15. This number is a bit too high for a dashboard table. Reduce the `visibleRows` count to 5 by setting the corresponding prop.

```TypeScript / TSX
<AnalyticalTable
Expand Down Expand Up @@ -566,7 +566,7 @@ At the moment, the dashboard doesn't really look like a dashboard. The component
<FlexBox
justifyContent={FlexBoxJustifyContent.Center}
wrap={FlexBoxWrap.Wrap}
style={{ padding: "var(--sapContent_Space_M)" }}
style={{ padding: "var(--sapContent_Space_M)" }}>
...
</FlexBox>
```
Expand All @@ -577,6 +577,8 @@ Your component should now look like this:

![Dashboard](05_dashboard.png)

The source should look like this:

```TypeScript / TSX
import tableViewIcon from "@ui5/webcomponents-icons/dist/table-view.js";
import listIcon from "@ui5/webcomponents-icons/dist/list.js";
Expand Down Expand Up @@ -839,8 +841,3 @@ export function MyApp() {
);
}
```




---
62 changes: 29 additions & 33 deletions tutorials/ui5-webcomponents-react-styling/ui5-webcomponents-react-styling.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module
};
```

2. Explicitly import `@ui5/webcomponents-react-base` package:
2. Explicitly install `@ui5/webcomponents-react-base` package:

`@ui5/webcomponents-react-base` is already installed by `@ui5/webcomponents-react`, but as we want to import the `ThemingParameters` in the following step, it's recommended adding the package to the dependencies as well.

Expand All @@ -99,35 +99,35 @@ In this step we will use [CSS Modules](https://github.com/css-modules/css-module
First, create a new file `MyCustomElement.module.css` in `src` with the following content:

```CSS
.container {
background-color: var(--sapBackgroundColor);
font-family: var(--sapFontFamily);
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.container {
background-color: var(--sapBackgroundColor);
font-family: var(--sapFontFamily);
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
```
Then import the CSS file in your `MyCustomElement.tsx` file and add the class to the `div` element.

```TypeScript / TSX
import { ThemingParameters } from '@ui5/webcomponents-react-base';
import classes from './MyCustomElement.module.css';
export const MyCustomElement = () => {
return (
<div className={classes.container}>
<span
style={{
color: ThemingParameters.sapNegativeColor,
fontSize: ThemingParameters.sapFontHeader1Size,
}}
>
My custom Text Element
</span>
</div>
);
};
import { ThemingParameters } from '@ui5/webcomponents-react-base';
import classes from './MyCustomElement.module.css';

export const MyCustomElement = () => {
return (
<div className={classes.container}>
<span
style={{
color: ThemingParameters.sapNegativeColor,
fontSize: ThemingParameters.sapFontHeader1Size,
}}
>
My custom Text Element
</span>
</div>
);
};
```

5. Import the custom component and add it to your `Home` component.
Expand Down Expand Up @@ -169,7 +169,7 @@ One example is applying a responsive content padding to the content of the dashb
```
3. Apply the classes on elements:

Add a `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class:
Add a `div` that is wrapping the outer `FlexBox` and apply the `sap-container-type-inline-size` class (remembering to close it too):

```tsx
<div className="sap-container-type-inline-size">
Expand All @@ -192,11 +192,7 @@ One example is applying a responsive content padding to the content of the dashb

### Conclusion

In this tutorial mission, you learned the basics of how to build a single page application using UI5 Web Components for React, with routing, styling, and general component behavior and modern React APIs.
In this series of tutorials, you learned the basics of how to build a single page application using UI5 Web Components for React, with routing, styling, and general component behavior and modern React APIs.
If you have questions about UI5 Web Components for React, or found something that isn't right, then please feel free to join the [OpenUI5 Slack community](https://ui5-slack-invite.cfapps.eu10.hana.ondemand.com/) and visit us in the [`#webcomponents-react`](https://openui5.slack.com/archives/CSQEJ2J04) channel, or come directly to our [GitHub page](https://github.com/UI5/webcomponents-react), where you can file [issues](https://github.com/UI5/webcomponents-react/issues/new/choose) or participate in [discussions](https://github.com/UI5/webcomponents-react/discussions).

If you enjoyed this tutorial, you can help us out a lot by starring our repo and become one of our wonderful [✨stargazers✨](https://github.com/UI5/webcomponents-react/stargazers)!



---
If you enjoyed this series, you can help us out a lot by starring our repo and become one of our wonderful [✨stargazers✨](https://github.com/UI5/webcomponents-react/stargazers)!
Loading