From de5eec1c4e2aef17022ca2344b2300a0a13dd48e Mon Sep 17 00:00:00 2001 From: nicoschoenteich Date: Sat, 24 Oct 2026 18:09:27 +0200 Subject: [PATCH 1/2] first batch of tutorial fixed for dev garage --- .../ui5-webcomponents-react-card.md | 174 +++++++++--------- .../ui5-webcomponents-react-charts.md | 40 ++-- .../ui5-webcomponents-react-introduction.md | 26 +-- 3 files changed, 114 insertions(+), 126 deletions(-) diff --git a/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md b/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md index 2eea870a7..e55bf51bc 100644 --- a/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md +++ b/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md @@ -12,62 +12,62 @@ author_profile: https://github.com/Lukas742 Define your first component using UI5 Web Components for React. ## You will learn -- How to import components into your application +- How to import UI5 Web Components into your application - Learn about the usage of props - How to use event handling ## Intro -Integrate the first component into your App. You can find **all** available components in the [Storybook](https://ui5.github.io/webcomponents-react). +You will now integrate the first UI5 Web Component into your App. You can find **all** available UI5 Web Components for React in the [Storybook](https://sap.github.io/ui5-webcomponents-react). There you can try out the different components and also take a look at the coding and the available props. --- -### Add components to MyApp.tsx +### Add the Card component to MyApp.tsx First you need to import the components you want to use. -You can check out all available components in the [Storybook](https://ui5.github.io/webcomponents-react). Take your time to play around a little, change some `props` and take a look at the coding. +You can check out all available components in the [Storybook](https://sap.github.io/ui5-webcomponents-react). Take your time to play around a little, change some `props` and take a look at the coding. 1. Start with importing a `Card` component into your `MyApp.tsx` file. - ```TypeScript / TSX - import { Card } from "@ui5/webcomponents-react"; - ``` + ```TypeScript / TSX + import { Card } from "@ui5/webcomponents-react"; + ``` -2. So, you imported the `Card` component. Now it's time to use it. Replace the content of your `
` with a ``. +2. Now it's time to use the `Card` component. Replace the content of your `MyApp` function with the following code. - In the [Storybook](https://ui5.github.io/webcomponents-react/v2/?path=/docs/data-display-card--docs), you can see that Cards can receive different props. For now only add some text as `children`. + ```TypeScript / TSX + return ( +
+ This is the content area of the Card +
+ ); + ``` - ```TypeScript / TSX -
- This is the content area of the Card -
- ``` - -Your webpage should now look like this. + > For now, the `Card` only contains some text as `children`, but in the [Storybook](https://sap.github.io/ui5-webcomponents-react/?path=/story/4-ui5-web-components-card--default-story), you can see that a `Card` can receive many props. -![Card01](01_card.png) + Your webpage should now look like this: -And the file like this: + ![Card01](01_card.png) -```TypeScript / TSX -import { Card } from "@ui5/webcomponents-react"; - -export function MyApp() { - return ( -
- This is the content area of the Card -
- ); -} -``` + Your `MyApp.tsx` file should now look like this : + ```TypeScript / TSX + import { Card } from "@ui5/webcomponents-react"; + export function MyApp() { + return ( +
+ This is the content area of the Card +
+ ); + } + ``` ### Add content to the Card component -The heading area of the `Card` component is empty, this is because it didn't receive the `header` prop. The `header` prop expects another component, the `CardHeader`. +The heading area of the `Card` component is empty, this is because it didn't receive the `header` prop. The `header` prop itself expects another component, the `CardHeader`. 1. Import the `CardHeader`. @@ -85,8 +85,7 @@ The heading area of the `Card` component is empty, this is because it didn't rec
``` -3. Our template applies the SAP defined `font-family` for all texts that don't implement `font-family` themselves. (see `index.css` file) - To enable this on a single text without using CSS, you can use the `Text` component. Let's wrap the text content of the `Card` inside the `Text` component: +3. Our application already applies the SAP defined `font-family` for all texts that don't implement `font-family` themselves via the `index.css` file, which is why the inner text already has the right font. However, to enable this on a single text without using CSS, you can use the `Text` component. Let's wrap the text content of the `Card` inside the `Text` component: ```TypeScript / TSX import { Card, CardHeader, Text } from "@ui5/webcomponents-react"; @@ -100,14 +99,11 @@ The heading area of the `Card` component is empty, this is because it didn't rec ``` - - ### Style your component -In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style). -You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [chapter six](ui5-webcomponents-react-styling) of the tutorial series. +In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style). You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [chapter six](ui5-webcomponents-react-styling) of the tutorial series. -The Card now spreads across the whole screen, this behavior is intended, so it takes up the whole space of its container. +The `Card` currently spreads across the whole screen, this behavior is intended, so it takes up the whole space of its container. 1. To restrict the `width` of the `Card`, add the `style` prop. @@ -131,31 +127,33 @@ The Card now spreads across the whole screen, this behavior is intended, so it t Hereby you get a standardized content-padding. -After this step `MyApp.tsx` should look like this: -```TypeScript / TSX -import { Card, CardHeader, Text } from "@ui5/webcomponents-react"; + After this step `MyApp.tsx` should look like this: + + ```TypeScript / TSX + import { Card, CardHeader, Text } from "@ui5/webcomponents-react"; + + export function MyApp() { + return ( +
+ } style={{ width: "300px" }}> + + This is the content area of the Card + + +
+ ); + } + ``` -export function MyApp() { - return ( -
- } style={{ width: "300px" }}> - - This is the content area of the Card - - -
- ); -} -``` -And your application like this: + Your application should look like this: -![Card03](03_card.png) + ![Card03](03_card.png) ### Event handling -1. The Card header can also be interactive, to enable this set `interactive` to `true`. +1. The `Card` header can also be interactive, to enable this set `interactive` to `true`. ```TypeScript / TSX ``` - _We didn't pass a value to `interactive`, because it [defaults to true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) if the value is omitted._ + > We didn't pass a value to `interactive`, because it [defaults to true](https://reactjs.org/docs/jsx-in-depth.html#props-default-to-true) if the value is omitted. When you now click or focus the header, the appropriate styles are applied, so users know they can interact with it. -2. To make the header react to a click (or SPACE/ENTER press), add a function as value to the `onClick` prop. +2. To make the header react to a click (or SPACE/ENTER press), add a function as value to the `onClick` prop. ```TypeScript / TSX } + style={{ width: "300px" }} > ... ``` 3. Now, add the callback function right in the beginning of the component (definition function): + ```TypeScript / TSX export function MyApp() { const handleHeaderClick = () => { @@ -193,35 +193,37 @@ And your application like this: ... ``` -The file should now look like this: -```TypeScript / TSX -import { Card, CardHeader, Text } from "@ui5/webcomponents-react"; - -export function MyApp() { - const handleHeaderClick = () => { - alert("Header clicked"); - }; - return ( -
- - } - style={{ width: "300px" }} - > - - This is the content area of the Card - - -
- ); -} -``` -Now the header opens an alert box on click. + The file should now look like this: + + ```TypeScript / TSX + import { Card, CardHeader, Text } from "@ui5/webcomponents-react"; + + export function MyApp() { + const handleHeaderClick = () => { + alert("Header clicked"); + }; + return ( +
+ + } + style={{ width: "300px" }} + > + + This is the content area of the Card + + +
+ ); + } + ``` + + Now the header opens an alert box on click. diff --git a/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md b/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md index a4b8e869f..f00b722db 100644 --- a/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md +++ b/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md @@ -12,8 +12,7 @@ author_profile: https://github.com/Lukas742 Display data in charts using UI5 Web Components for React. ## You will learn -- How to install and import charts -- Learn about charts in UI5 Web Components for React +- How to import and use charts with UI5 Web Components for React - How to add dynamic rendering ## Intro @@ -21,7 +20,7 @@ UI5 Web Components for React also comes with a chart library. In this tutorial, --- -### Install module and import charts +### Install dependencies and import charts 1. Install the chart library of UI5 Web Components for React. @@ -30,7 +29,7 @@ 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. + 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@ @ui5/webcomponents-react-base@`. 2. Then, import `LineChart` and `BarChart` into `MyApp.tsx`. @@ -52,9 +51,9 @@ _Charts only offer limited accessibility support with only basic built-in featur ``` - Now you should 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. + 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. Since `data` 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 you can define it outside the component, right above your `MyApp` component. ```TypeScript / TSX const dataset = [ @@ -103,9 +102,7 @@ _Charts only offer limited accessibility support with only basic built-in featur ![LineChart](01_linechart.png) -4. Add a `BarChart` to the `Card`. - - We want the same data just with a different representation, therefore you can use the same props as you did with the `LineChart`. +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`. ```TypeScript / TSX - + This is the content area of the Card {toggleCharts === "lineChart" ? ( @@ -249,22 +246,20 @@ Two charts in one `Card` is a bit too much, don't you think? It would be nicer i Done! Now you can toggle between charts by clicking on the header of the `Card`. -4. You can further improve your `CardHeader` component by using the `avatar` `prop` and adding an `Icon` to it. +4. You can further improve your `CardHeader` component by using the `avatar` prop and adding an `Icon` to it. - Add the following import to your component: + Add the following `Icon` import to your component: ```TypeScript / TSX import { Card, CardHeader, Text, Icon } from "@ui5/webcomponents-react"; ``` - Icons 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 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: ```TypeScript / TSX import lineChartIcon from '@ui5/webcomponents-icons/dist/line-chart.js'; import barChartIcon from '@ui5/webcomponents-icons/dist/horizontal-bar-chart.js'; ``` - The `Icons` should also be conditionally rendered. Luckily, this is easy: - Add the `avatar` prop to the `CardHeader`, which receives an `Icon` as value: ```TypeScript / TSX @@ -274,7 +269,7 @@ Two charts in one `Card` is a bit too much, don't you think? It would be nicer i /> ``` - Then, change the `name` prop of the `Icon` to the following: + The `Icons` should also be conditionally rendered. Luckily, this is easy. Change the `name` prop of the `Icon` to the following: ```TypeScript / TSX } @@ -394,7 +389,7 @@ export function MyApp() { One of React's main advantages is its efficient rendering mechanism: a component re-renders only when its state changes or when it receives new props from its parent. So it will not update the whole UI, but only components affected by changes. -1. In order to demonstrate this behavior, add a new `state` (right after the definition of the previous state). +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); @@ -442,8 +437,7 @@ 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. -As you can see, only the component affected by the `state` is updated, and the rest stays the same. 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 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. ### Add dynamic header and text @@ -452,7 +446,7 @@ To make your `Card` look cleaner and to give the user the information that the h 1. Add a dynamic content `Text` - The content text is not really informative. Let's change that and display the type of the chart. Add the following constants to your component (e.g. after the state definitions): + As of now the content text is not really informative. Let's change that and include the chart type. Add the following constants to your component (e.g. after the state definitions): ```TypeScript / TSX const contentTitle = toggleCharts === 'lineChart' ? 'Line Chart' : 'Bar Chart'; @@ -508,7 +502,7 @@ To make your `Card` look cleaner and to give the user the information that the h 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. - ``` + ```TypeScript / TSX ### Why TypeScript? +> Why TypeScript? > > TypeScript, a superset of JavaScript and brings a lot of advantages for developers: > @@ -55,8 +55,6 @@ These commands sets up a [Vite](https://vitejs.dev/) project, creating a React A > - **Readability:** Enhances code clarity with static typing. > - **Gradual Adoption:** Can be added to existing JavaScript projects. - - ### Create your new root component @@ -72,14 +70,14 @@ These commands sets up a [Vite](https://vitejs.dev/) project, creating a React A } ``` -> ### Structure of a React component -This is a very simple component, but it already shows you the basic structure of all components. The file starts with the import statements in the first few lines. Then, the component will be defined as a function ([React docs](https://react.dev/learn/your-first-component#defining-a-component)) in PascalCase notation. This function starts the definitions of the props and the logic, we'll add them in a later tutorial, and ends by returning JSX or HTML components in a return statement. +> Structure of a React component +> +>This is a very simple component, but it already shows you the basic structure of all components. The file usually starts with the import statements in the first few lines (none yet). Then, the component will be defined as a function ([React docs](https://react.dev/learn/your-first-component#defining-a-component)) in PascalCase notation. This function starts the definitions of the props and the logic, we'll add them in a later tutorial, and ends by returning JSX or HTML components in a return statement. With this you created your first `React` component. To actually render the component you will have to add it to your `src/App.tsx`. ### Embed your new component - 1. In `App.tsx` remove everything except for the [React.Fragment](https://react.dev/reference/react/Fragment) (`<>`) and the App component itself. ```TypeScript / TSX @@ -107,7 +105,7 @@ With this you created your first `React` component. To actually render the compo } ``` - > Note that `` is using a self-closing syntax and is equivalent to ``. All tags in JSX must be closed explicitly, this applies to HTML tags (like `img`) and custom JSX tags. [Here](https://react.dev/learn/writing-markup-with-jsx) you can find out more about JSX in general. +> Note that `` is using a self-closing syntax and is equivalent to ``. All tags in JSX must be closed explicitly, this applies to HTML tags (like `img`) and custom JSX tags. [Here](https://react.dev/learn/writing-markup-with-jsx) you can find out more about JSX in general. 4. Open `main.tsx`. This is your entry file, let's take a look at the content in more detail. @@ -130,8 +128,8 @@ With this you created your first `React` component. To actually render the compo ); ``` - - `Assets.js'`: This includes assets like translation files (CLDR), theming, etc. of the required packages. - - `ThemeProvider`: Inter alia, this provider makes your app react to theme and language changes and injects the CSS of __used__ components. + - `Assets.js`: This includes assets like translation files ([CLDR](https://cldr.unicode.org/)), theming, etc. of the required packages. + - `ThemeProvider`: This provider makes your app react to theme and language changes and injects the CSS of __used__ components. - `StrictMode`: The React `StrictMode` component enables additional development behaviors and warnings for the component tree inside. It is not required, but using it helps find common pitfalls and bugs in development. You can find out more about it [here](https://react.dev/reference/react/StrictMode). - `createRoot`: This function lets you create the React root to display React components inside a browser DOM node ([React docs](https://react.dev/reference/react-dom/client/createRoot)). You will usually add this DOM node inside the `index.html` file. - `App`: A React component. @@ -154,10 +152,4 @@ The page will automatically reload if you make changes to the code. You will see > **TIP:** You can put a browser window next to the editor in your screen to see the changes live in action. ->![split](splitscreen.png) -> ->  - - - ---- +>![screen split into two windows, VS Code on the left, browser on the right](splitscreen.png) From 7195c9d05cf052c28b9af95bd0c26e8e668908ab Mon Sep 17 00:00:00 2001 From: nicoschoenteich Date: Sat, 24 Oct 2026 21:24:29 +0200 Subject: [PATCH 2/2] more fixes for the dev garage --- .../ui5-webcomponents-react-card.md | 6 +- .../ui5-webcomponents-react-charts.md | 3 + .../ui5-webcomponents-react-dashboard.md | 74 ++++++++++--------- .../ui5-webcomponents-react-introduction.md | 1 - 4 files changed, 48 insertions(+), 36 deletions(-) diff --git a/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md b/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md index e55bf51bc..2a5fd9e4b 100644 --- a/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md +++ b/tutorials/ui5-webcomponents-react-card/ui5-webcomponents-react-card.md @@ -11,6 +11,10 @@ author_profile: https://github.com/Lukas742 # Create a Card Component Define your first component using UI5 Web Components for React. +## Prerequisites + +- Complete the tutorial [Get Started with UI5 Web Components for React](ui5-webcomponents-react-introduction). + ## You will learn - How to import UI5 Web Components into your application - Learn about the usage of props @@ -101,7 +105,7 @@ The heading area of the `Card` component is empty, this is because it didn't rec ### Style your component -In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style). You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [chapter six](ui5-webcomponents-react-styling) of the tutorial series. +In this step, we will only apply [inline-styling](https://reactjs.org/docs/dom-elements.html#style). You can also style your component using CSS ([modules](https://github.com/css-modules/css-modules)), but this and many more information regarding the styling approach of UI5 Web Components (for React) will be covered in [part six](ui5-webcomponents-react-styling) of the tutorial series. The `Card` currently spreads across the whole screen, this behavior is intended, so it takes up the whole space of its container. diff --git a/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md b/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md index f00b722db..63b0b2ad4 100644 --- a/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md +++ b/tutorials/ui5-webcomponents-react-charts/ui5-webcomponents-react-charts.md @@ -11,6 +11,9 @@ author_profile: https://github.com/Lukas742 # Integrate Charts and Conditional Rendering Display data in charts using UI5 Web Components for React. +## Prerequisites +- Complete the tutorial [Create a Card Component](ui5-webcomponents-react-card). + ## You will learn - How to import and use charts with UI5 Web Components for React - How to add dynamic rendering diff --git a/tutorials/ui5-webcomponents-react-dashboard/ui5-webcomponents-react-dashboard.md b/tutorials/ui5-webcomponents-react-dashboard/ui5-webcomponents-react-dashboard.md index 29c610b43..6a9d91832 100644 --- a/tutorials/ui5-webcomponents-react-dashboard/ui5-webcomponents-react-dashboard.md +++ b/tutorials/ui5-webcomponents-react-dashboard/ui5-webcomponents-react-dashboard.md @@ -11,19 +11,22 @@ author_profile: https://github.com/Lukas742 # Create an Analytical Dashboard via UI5 Web Components for React Create an analytical dashboard with different components using UI5 Web Components for React. +## Prerequisites +- Complete the tutorial [Integrate Charts and Conditional Rendering](ui5-webcomponents-react-charts). + ## You will learn - How to use the `ShellBar` component - How to use the `AnalyticalTable` component - How to style components ## Intro -So far, you have built your first `Card` component. Now to take things further, it's time to build something bigger. In this step, you will learn how different components work together by building an analytical dashboard. +So far, you have built your first `Card` component. Now to take things further, it's time to build something more interesting. In this tutorial, you will learn how different components work together by building an analytical dashboard. --- ### Add necessary imports -To make things easier, first import all the components and enums you will need in this step. Just copy the code below and replace the previous imported components in `MyApp.tsx`. +To make things easier, first import all the components and enums you will need in this step. Just copy the code below and use it to replace the previous imported UI5 Web Components in `MyApp.tsx`. ```TypeScript / TSX import { @@ -47,21 +50,21 @@ import { ``` -### Add a `ShellBar` +### Add a ShellBar -The `ShellBar` is the central navigation element in your Web Application and should therefore be visible on all pages. +The `ShellBar` is the central navigation element in your web application and should therefore be visible on all pages. -> Again, you can try it out in the [Storybook](https://ui5.github.io/webcomponents-react/?path=/docs/layouts-floorplans-shellbar--docs). +> Feel free to try out the `ShellBar` in the [Storybook](https://ui5.github.io/webcomponents-react/?path=/docs/layouts-floorplans-shellbar--docs). -1. Start with adding the `ShellBar` above your `Card` component and add a `primaryTitle` prop. +1. Start with adding the `ShellBar` that has a `primaryTitle` above your `Card` component. ```TypeScript / TSX ``` -2. Add some more properties - +2. Add some more properties. + The logo of the application should be displayed and also a profile picture would be nice. Use the `logo` and `profile` prop to achieve this. The `logo` prop accepts either an `img` tag or the `Avatar` component, the `profile` prop only accepts the `Avatar` component. First add the `logo` prop like this: @@ -80,7 +83,7 @@ The `ShellBar` is the central navigation element in your Web Application and sho /> ``` - You can use your own image, use a URL to an image or simply download the images below and add them inside your `src` folder and then import them. + You can use your own image, use a URL to an image or simply download the images below. For the download option, create a new `assets/` directory inside `src/`, download the images into that directory, and then import them in `MyApp.tsx`. [`reactLogo.png`](https://github.com/SAPDocuments/Tutorials/raw/master/tutorials/ui5-webcomponents-react-dashboard/reactLogo.png) @@ -106,25 +109,25 @@ The `ShellBar` is the central navigation element in your Web Application and sho /> ``` -3. Add custom items +3. Add custom items: By passing a `ShellBarItem` as `child` you are able to add custom items to your `ShellBar`. The element is basically a `Button` with responsive behavior and styling adapted to the `ShellBar`. ```TypeScript / TSX } + logo={Company Logo} profile={ - + User Avatar } primaryTitle="My App" > - + ``` - That is strange -- when you render your component, the `ShellBarItem` is not shown. + That is strange -- the `ShellBarItem` does not show an icon. 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). @@ -138,8 +141,6 @@ The `ShellBar` is the central navigation element in your Web Application and sho ![ShellBar](02_shellbar.png) - For maintainability reasons, replace `icon="activate"` with the import name `icon={activateIcon}`. Now if you replace the icon but forget to remove the import, modern IDEs or linters like [eslint](https://eslint.org/) will tell you that there is an unused import in your file. - Your component should now look like this: ```TypeScript / TSX @@ -281,10 +282,12 @@ export function MyApp() { } ``` -### Add a `List` +### Add a List + +In this step, we want to add a new `Card` to our application/analytical dashboard, that contains a `List`. -1. To wrap the `List` add a `Card` (right after the first one). +1. Add a `Card` (right after the first one). ```TypeScript / TSX ``` -5. Users should know the status of the activities. Add the `additionalText` prop to the `StandardListItem`. To visualize if the status is neutral, positive or negative, also add the `additionalTextState` prop. +5. Users should know the status of some activities. Add the `additionalText` prop to the `StandardListItem`. To visualize the status as neutral, positive or negative, also add the `additionalTextState` prop. You can either pass a supported string directly, or use the `ValueState` enum: @@ -342,7 +345,7 @@ export function MyApp() { ``` -6. The "Progress" card shows two list items, but both of them are already completed. Let's create two more activities which are still in progress. +6. The "Progress" card now shows two list items, but both of them are already completed. Let's create two more activities which are still in progress. First, create two `ListItemCustom`s below the completed items. @@ -368,7 +371,7 @@ export function MyApp() { ``` 7. The indicators are displayed as part of the list item, but the title and status of the activities is still missing. -For this, add two `Text` components above the indicator: +For this, add two `Text` components above the `ProgressIndicator` of the first `ListItemCustom`: ```TypeScript / TSX @@ -378,7 +381,7 @@ For this, add two `Text` components above the indicator: ``` -8. All necessary information are now available in each item, but the formatting looks terrible. Let's fix that by using a flex-box: +8. All necessary information are now available, but the formatting doesn't look right. Let's fix that by using a flex-box: ```TypeScript / TSX @@ -392,9 +395,9 @@ For this, add two `Text` components above the indicator: ``` - > The `FlexBox` implements most of the [`CSS Flexbox`](https://www.w3schools.com/css/css3_flexbox.asp) behavior without being forced to actually use CSS or other styling methods. + > The `FlexBox` component implements most of the [`CSS Flexbox`](https://www.w3schools.com/css/css3_flexbox.asp) behavior without being forced to actually use CSS or other styling methods. -9. The content of the list item is now aligned correctly, but doesn't apply the correct padding, colors and dimensions. To fix this as well, pass the `style` prop, to use the default [React `inlineStyle` syntax](https://reactjs.org/docs/dom-elements.html). Again, we're using global CSS variables for this: +9. The content of the list item is now aligned correctly, but doesn't apply the correct padding, colors and dimensions. To fix this, pass the `style` prop using the default [React `inlineStyle` syntax](https://reactjs.org/docs/dom-elements.html). Again, we're using global CSS variables for this: ```TypeScript / TSX @@ -425,10 +428,10 @@ For this, add two `Text` components above the indicator: ![List](03_list.png) -### Add an `AnalyticalTable` +### Add an AnalyticalTable -1. The last tile should contain a `AnalyticalTable` component. Again, create a `Card` to wrap the Table and set the `max-width` to `900px`. +1. The analytical dashboard should also contain a `AnalyticalTable` component. Again, create a `Card` (to wrap the Table). This time set the `max-width` to `900px`. ```TypeScript / TSX At this point, the `AnalyticalTable` throws an error due to the missing required `data` prop. You will fix this in the 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. You can create your own data or just use the code below and paste it right after the definition of the `dataset` of the chart. @@ -493,9 +499,9 @@ For this, add two `Text` components above the indicator: ![Table](04_table.png) -4. Add more properties +4. Add more properties: - 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 many more. + 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. @@ -507,12 +513,12 @@ For this, add two `Text` components above the indicator: visibleRows={5}/> ``` -### Dashboard layout +### Add the dashboard layout -At the moment, the dashboard doesn't really look like a dashboard. The components are way too close to each other and not aligned correctly. Let's change that. +At the moment, the dashboard doesn't really look like a dashboard. The components are too close to each other and not aligned correctly. Let's change that. -1. Add margin to each `Card` +1. Add margin to each of the three `Card`s: To add a margin to the cards, you can use the global CSS vars again: @@ -552,15 +558,15 @@ At the moment, the dashboard doesn't really look like a dashboard. The component > ``` -2. Align the elements +2. Align the elements: - To properly align the tiles, use a `FlexBox` component and wrap your `Cards` inside of it. Use the `justifyContent` prop to center align all elements and `wrap` to make them move to the next line if not enough space is available, also apply the `style` prop to add a padding to the whole content area. + To properly align the `Card`s, use a `FlexBox` component and wrap your `Cards` inside of it. Use the `justifyContent` prop to center align all elements and `wrap` to make them move to the next line if not enough space is available. Also apply the `style` prop to add a padding to the whole content area. ```TypeScript / TSX ``` diff --git a/tutorials/ui5-webcomponents-react-introduction/ui5-webcomponents-react-introduction.md b/tutorials/ui5-webcomponents-react-introduction/ui5-webcomponents-react-introduction.md index 8ec92f411..76da829b5 100644 --- a/tutorials/ui5-webcomponents-react-introduction/ui5-webcomponents-react-introduction.md +++ b/tutorials/ui5-webcomponents-react-introduction/ui5-webcomponents-react-introduction.md @@ -13,7 +13,6 @@ author_profile: https://github.com/Lukas742 Start building a React web application leveraging UI5 Web Components for React. ## Prerequisites -- [React](https://www.npmjs.com/package/react) and [React-DOM](https://www.npmjs.com/package/react-dom) ( **18.0.0 or higher** ) - [Node.js](https://nodejs.org/) - **[LTS](https://github.com/nodejs/release?tab=readme-ov-file#release-schedule) version** (check the version with `node -v`)