SAP Community - Michelle Moudy

SAP Developer Challenge - UI5 Web Components for React Challenge (Week 3)

2023-06-21T08:56:50.034000+02:00

This post is part of the UI5 Web Components for React Challenge (June 2023)

Welcome to the third week of the React developer challenge! This week, your task is to add infinite scrolling to your table and use a larger data set sent into the Solution component through a prop.

If you haven’t completed the first 2 weeks, you’ll need to do so as this week’s code is built on top of the previous weeks.

Resources

To help you achieve the goals for this week, the following resources (along with the resources from the last 2 weeks) could be useful.

JavaScript Arrays

JavaScript Arrays Slice

React useState

Custom Component Styling

For guidance on getting started, please refer to week 1.

The Challenge

Goal: Use the larger data set from utils/data.js and send to your Solution component through a prop in App.tsx. Then implement an infinite scroll that loads 10 rows when the table initializes, and another 5 rows.

Hint: When loading in the data from a prop, you should be using React state.

To receive credit for this week, you will need to accomplish the following tasks:

1) Change the name of the title in App.tsx to include your name and “Week 3 – Infinite Scroll”. It should resemble the title shown in the screenshot at the top of this post.

2) Use the larger data set in utils/data.js and send that into your solution component through a prop in App.tsx. Also, you will need to add statuses to the individual tasks in data.js.

3) Implement an infinite scroll to your table with the help of built in Table or AnalyticalTable props. You should load 10 rows on initialization and 5 rows after scrolling to the bottom. You will need to apply a style to the table to limit its growth so you can scroll.

4) Take a screenshot with your full table, header, scroll bar, and modified statuses and post it in THIS discussion.

Note: If you encounter issues with your frontend not loading, ensure that you have imported all the necessary dependencies. Unfortunately, the debugging experience may not provide clear error messages. One useful approach is to comment out sections of code until the UI loads, then gradually uncomment to isolate the problematic line.

Get ready to enhance your React skills by incorporating the power of SAP UI5 Web Components into a custom component! Good luck and happy coding!

SAP Developer Challenge - UI5 Web Components for React Challenge (Week 4)

2023-06-28T20:24:30.667000+02:00

This post is part of the UI5 Web Components for React Challenge (June 2023)

Welcome to the fourth and final week of the SAP React developer challenge. This week, your task is add a row to your data set and table using the predefined custom component AddRowDialog. There is also a bonus challenge of adding a way to remove a row from the table and data.

If you haven’t completed the previous three weeks, you’ll need to do so as this week’s code is built on the previous weeks.

Bonus Challenge (Optional)

We have another bonus challenge this week. It makes sense that if we can add rows to a table, we should be able to remove them. For this bonus challenge, implement a way to delete rows of data from the table. Be careful here. If implemented improperly, bugs could be introduced into the infinite scrolling that was added last week.

Resources

To help you achieve your goals for this week, the following resources (along with the resources from the previous weeks) could be useful.

JavaScript Arrays

JavaScript Arrays Filter

React useState

Icon Component

For guidance on getting started, please refer to week 1.

The Challenge

Goal: Use the custom dialog in Components/AddRowDialog.jsx and write the logic to add a new row with data sent back from that dialog.

1) Change the name of the title in App.tsx to include your name and “Week 4 – Adding New Rows”. It should resemble the screenshots in this post.

2) Use the custom dialog in Components/AddRowDialog.jsx and write the logic to add a new row with data sent back from that dialog. You only need to add the component, which has a button already set up to open, close, and send data through the addNewRow function prop, to your Solution component.

A) Add a way to delete rows in the table and in the data. This is completely optional.

Note: If you are having issues with your icons loading, you might need to update your package.json dependencies with the packages from this file, open a terminal, run `npm i`, the restart your frontend using the three dot dropdown and clicking “restart” from the sub menu.

3) Take a screenshot of your full table and header and post it to THIS discussion. Be sure to add a new task to the table and have that appear in your screenshot. You do not need to have the dialog open like the screenshot at the top of this post.

Get ready to enhance your React skills by incorporating the power of SAP UI5 Web Components into a custom component! Good luck and happy coding!

Re: SAP Developer Challenge - UI5 Web Components for React Challenge (Week 4)

2023-07-06T01:14:39.873000+02:00

@Ruthiel, @bztoy

When I was experiencing this issue, I discovered that if I added the new packages and reinstalled then restarted the sandbox using the restart option in the menu, it fully fixed the problem. I believe there's some strange caching happening in the sandbox that can be fixed by restarting.

Re: SAP Developer Challenge - UI5 Web Components for React

2023-07-14T02:23:02+02:00

Hello Manuel. If you participated in the challenge, you should have received your badge at this point. Let me know if you feel you should have received it and haven't yet.

🟠 Using UI5 Web Components with Svelte

2023-08-30T09:21:34.377000+02:00

Have you ever wanted to learn Svelte but didn't know what it was, what kind of benefits it would provide over other libraries like React and Angular, or how to use it with your favorite web component library, UI5 Web Components? If the answer to any of those questions was yes, then this is the session for you.

In this session, I will talk about what Svelte is, why you might choose it over other frameworks, and together we will create a Rubber Duck Debugger app. You won't need an understanding of Svelte to follow along but having a basic understanding of JavaScript and frontend development would be a benefit.

Join me as I also learn what this newfangled library is all about and why I would choose it over an old favorite like React.

After watching the session, be sure to complete the validation tutorial to earn points for Devtoberfest! https://developers.sap.com/tutorials/devtoberfest2023-week1-frontend-web-comps-svelte.html

GitHub Repo

CodeSandbox

🟠 wdi5 2.0: New Features and Migration from v1

2023-08-30T09:25:56.313000+02:00

wdi5, the end-to-end testing tool for UI5, is available in version 2. Most notably, v2 provided WebdriverIO v8 compatibility, including support for BiDi, the next-gen automation protocol.

This session will showcase the new features available in wdi5 2.x and explain how to migrate from v1 to v2. Spoiler alert: there is only minimal migration work to perform.

🟠 Typescript Support in UI5 Web Components

2023-08-30T09:33:32.691000+02:00

The enabled TypeScript support is one of the major highlights in the UI5 Web Components project, greatly anticipated by the community.

Over the course of the year, we migrated the whole code base of the UI5 Web Components project into TypeScript. And there are two main additions that both application and component developers can benefit:

For application developers, we provide type definitions for all the components and framework APIs, making UI5 Web Components usage seamless in TypeScript apps.
For component developers, we provide renewed and modern dev experience and tooling for custom web components development with TypeScript.

Join the session to learn more about our journey of TypeScript enablement and how you can benefit from it.

🟠 Build your own React application with UI5 Web Components for React

2023-08-30T09:37:02.545000+02:00

UI5 Web Components for React seamlessly integrates UI5 Web Components into React, bridging a gap in current integration challenges. Our session highlights how it effortlessly blends UI5 Web Components with React apps and how it improves your developer experience. Additionally, UI5 Web Components for React introduces advanced components like the AnalyticalTable, DynamicPage, ObjectPage, and charts, giving you even more component choices for your application.

UI5 Web Components for React Storybook

Github Repo

Here are the links to the Presentation, code and Github repository used during the session.

Presentation: https://marcusnotheis.github.io/devtoberfest-ui5-webcomponents-react-intro
Hands-On Code: https://github.com/Lukas742/devtoberfest-ui5wcr
GitHub Repository: https://github.com/SAP/ui5-webcomponents-react
Interactive Documentation: https://sap.github.io/ui5-webcomponents-react/

After watching the session, be sure to complete the validation tutorial to earn points for Devtoberfest!

https://developers.sap.com/tutorials/devtoberfest2023-week2-frontend-react-web-comps.html

🟠 ui5-test-runner v3

2023-08-30T09:41:52.305000+02:00

2 years ago, ui5-test-runner was created to solve the problem of long running tests that may crash with karma.

On top of allowing parallel executions of tests, the tool also offered interesting features such as screenshots executing during the tests and the promise that it integrates with other browser automation tools. Yet, the tool had some limitations that restricted its adoption: the major one being that it does not integrate with the @ui5/cli framework.

The version 3 of the ui5-test-runner is about to be released and it solves many challenges of the first version:

It is lighter
It is delivered with with puppeteer, selenium-webdriver and jsdom integration
It is capable of running tests of an already served UI5 application (and hence integrates better with @ui5/cli)
It has better reporting (and debugging) features

During this session, I would like to present the version 3 of the tool and demonstrate its new capabilities as well as discuss about its future.

🟠 Metadata-driven Development with SAPUI5

2023-08-30T09:46:47.390000+02:00

Learn how to develop metadata-driven apps and reusable components with sap.ui.mdc.

Understand the basic principles and how to connect the most important parts of the library. Roll up the sleeves and build your own example.

Speakers:

Thomas Buechler

Benedikt Schoelch

Please complete the validation tutorial to earn points towards the Devtoberfest contest.

Validation Tutorial: https://developers.sap.com/tutorials/devtoberfest2023-week3-frontend-meta-dev-ui5.html

Link to tutorial: https://github.com/SAP-samples/ui5-mdc-json-tutorial

Link to Presentation: https://d.dam.sap.com/a/ud2fh1j/Devtoberfest_MDC.pdf?rc=10

🟠 SAP Fiori elements and SAP Fiori tools: It's time to use TypeScript!

2023-08-31T02:22:38.246000+02:00

Using TypeScript has come a long way in the SAPUI5 and SAP Fiori app development ecosystem. In this session, we will show how SAP Fiori elements app development feels modern with new TypeScript support.

We will explore how easy it is to get started with standard SAP Fiori elements floorplans, while simultaneously leveraging the SAP Fiori elements flexible programming model to implement custom use cases. All of this happens with support of a state-of-the-art development environment and development tools.

🟠 Equip an SAPUI5 freestyle app with the Flexible Programming Model

2023-08-31T02:29:01.441000+02:00

This session demonstrates how to add Building Blocks aka Macros ("OData v4 controls") to a UI5 freestyle app. The Building Blocks are part of the "Flexible Programming Model" (FPM). They are metadata-driven controls based on OData v4, implementing advanced functionalities such as filterable tables and visual data representation in charts.

Usually utilized in Fiori Elements applications, the Flexible Programming Model can also be re-used in UI5 freestyle applications.

🟠 Branding for SAP Applications

2023-08-31T02:58:44.094000+02:00

Your brand is your direct connection to your customers. With UI theme designer and the underlying theming infrastructure, you can directly apply it to your applications.

In this session we present SAPs theming infrastructure and give an end-to-end demo on using it on BTP with the various main SAP UI technologies – even your own.

We use UI theme designer to create a Custom Theme within minutes. Then we apply this Custom Theme to a BTP Portal with SAPUI5, Fundamental Library Styles, UI5 WebComponents, WebGUI and WebDynpro ABAP -based applications. Finally, we add our own plain html application that also makes use of the same Custom Theme.

Speakers

David Klug

Dominik Schreiber

🟠 Mastering the UI5 Ecosystem for Modern and Advanced OpenUI5/SAPUI5 Development

2023-08-31T03:10:53.304000+02:00

The development of OpenUI5/SAPUI5 application and libraries have never been easier. By mastering the Easy UI5 generators, you can quickly start your journey developing UI5 applications and libraries with or without TypeScript, by using the UI5 Tooling you boost your turnaround cycles, by knowing the tooling extensions available in the UI5 ecosystem, you can even benefit from a lot of different tasks and middlewares improving your development experience, simplifying code transpilation, using any npm package seamlessly, or integrating natively into other technologies such as the SAP Cloud Application Programming Model. The borders between the technologies are melting and OpenUI5/SAPUI5 development feels modern like never before.

Join me, to learn about the latest innovations and possibilities in and around OpenUI5/SAPUI5, its development experience, its tooling, and its ecosystem…

🟠 Using the SAP Approuter at dev time - a full-stack journey with UI5 and SAP CAP

2023-08-31T03:19:40.181000+02:00

In this session we will deep dive into how you can use the SAP Approuter during local development to run both UI5 and SAP Cloud Application Programming Model (CAP) applications. We will use several open-source packages developed by the UI5 community as well as npm workspaces to create a full-stack application that can be started with a single command.

🇺🇸 Introduction to the Core Principles of UI5 (Pennsylvania, USA)

2023-09-12T03:50:14.242000+02:00

This ASUG hosted CodeJam introduces you to the core principles of UI5, an enterprise-ready web development framework used to build apps that follow the Fiori design guidelines. This repository is a step-by-step guide explaining how to build a front-end web application using UI5. The finished app is a bookshop app, where users can browse and order books. The app sits on top of the well-known bookshop backend application built with the Node.js flavor of the SAP Cloud Application Programming Model (CAP).

Exercise Content: SAP-samples/ui5-exercises-codejam: Material for SAP CodeJam events on UI5.

This is an in-person event only (not virtual) and is planned for Tuesday, September 19th, 2023, at Duquesne University - Power Center in Pittsburgh, PA, USA from 8am to 6pm EST (UTC-5). The language of the event and the content will be English.

The instructor is Developer Advocate Michelle Moudy

There are essential prerequisites that must be completed by every attendee before arriving at the event location. They are documented here: ui5-exercises-codejam/prerequisites.md at main · SAP-samples/ui5-exercises-codejam (github.com)

🇺🇸 Introduction to the Core Principles of UI5 (Pennsylvania, USA)

2023-09-12T03:58:09.360000+02:00

Hi everyone!

We are very excited to announce that we will have another SAP CodeJam UI5 this year on September 19th in Pennsylvania, USA, hosted by ASUG. Check the event page for further information, and make sure to RSVP 😉

If you have questions about this CodeJam instance or if you are planning to attend and want to discuss anything in advance, feel free to use this discussion thread here or the event page.

Looking forward to seeing you there!

Re: 🟡 Petoberfest Day 2023!!!

2023-09-22T21:42:30.343000+02:00

I regularly think about that show. Thank you for the picture. It brought back a lot of memories of watching that when I was younger.

Re: 🟡 Petoberfest Day 2023!!!

2023-09-22T21:48:39.950000+02:00

When I was recording my Devtoberfest session (Using UI5 Web Components with Svelte), my cat was upset I had been locked in a room all day, not giving her the attention she deserved. You can actually hear her complaining about my audacity towards the end of my session and see her tail from her being on my lap. I ended up recording the last section with her on my lap and here is the shot my camera got when I started recording. She seems very pleased with herself.

Cheesecake really enjoying the attention, no matter the form

#fun #devtoberfest #petoberfest

🟠 Create Angular Applications like a Pro

2023-09-23T23:02:24.155000+02:00

The (r)evolution of Angular has being making easier for developers to create great applications and benefit from cutting edge features such as standalone API, lazy loading, signal, SSR, improved build time and bundle size.

Join our session and learn how Fundamental Library for Angular can help you create Angular application and benefit from the latest Angular features.

Speaker:

Denis Severin