Application Development Discussions
Join the discussions or start your own on all things application development, including tools and APIs, programming models, and keeping your skills sharp.
cancel
Showing results for 
Search instead for 
Did you mean: 

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

MichelleMoudy
Developer Advocate
Developer Advocate
10,183

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

 

Welcome to the first week of our developer challenge! Your objective is to utilize the Table component from UI5 Web Components for React to showcase the data stored in the `tableData` variable on the webpage.

MichelleMoudy_0-1686125003849.png

To accomplish this, you'll need a beginner's understanding of React and JavaScript. If you're unfamiliar with these topics, we've compiled some helpful resources for you to brush up on the fundamentals.

Resources

UI5 Web Components for React

JavaScript Basics

JavaScript Arrays

General Overview of React

React Documentation

React Components

Rendering Lists

 

Getting Started

To get started, please sign up for an account on CodeSandbox, which you can access here. Make sure you are signed in; otherwise, you won't be able to fork the repository and work on your solution. You can verify your login status by checking the menu located at the top left of the page. It should resemble the screenshot provided.

MichelleMoudy_1-1686125003853.png

Once you're signed in, fork the repository I've created by visiting the following link and clicking ...

 

The Challenge

Goal: Create a table using `tableData` in src/Solution.jsx

You have three tasks you need to accomplish to get credit for completion.

1)  Change the name of the title in App.tsx to include your name. This title will change every week.

2)  In Solution.jsx, below the label, create a table using the Table component from here This table should create all table rows dynamically and load all rows at once. The column headers should match the object parameter labels. You are going to need to add titles to each of the rows in the data. I used tasks I was completing for this week as inspiration.

3) Take a screenshot of your full table and header like the screenshot at the top of this blog post and post it to THIS discussion.

You will be writing your code in the Solution.jsx file. As you write and save your code, you should observe the corresponding changes in the development space located on the right side of the screen. If it isn’t automatically updating, you can click the refresh button on the right that appears when you hover over the panel.

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 showcase your React skills by incorporating the power of UI5 Web Components! Good luck!

42 REPLIES 42

9,878

 

Here is screenshot of my table. 

arunmbarec_0-1686179536151.png

 

nicoschoenteich
Developer Advocate
Developer Advocate
9,913

Hi there!

Nice challenge and very easy to get started thanks to the CodeSandbox.

I am still not sure I am a big fan of JSX though. Mixing markup and logic seems dangerous and complex - I am not sure I understand the real benefits. Maybe someone can enlighten me 😅

Anyway, here is my screen shot:

Screenshot 2023-06-08 at 09.51.00.png

9,758

Hi,

I don't know enough to enlighten you, but you piqued my interest. My new perspective based on a brief research is that it sounds or looks like JSX is optional and is like "another tool to add to one's toolbox if they desire." It sounds like a better version of or replacement for HTML, but not a replacement for the MVC of SAPUI5. I have been studying SAPUI5 and OpenUI5 and so far considered Web Components as totally separate, like a transition for web developers that may be interested in moving to UI5. I guess like anything else, JSX has its plus and minuses. Thank you for piquing my interest on JSX.

0 Kudos
9,623

Hi @joeremo,

Thanks for your reply. What you say makes total sense. It probably sits somewhere between raw HTML and the MVC approach. I guess it is a question of using the right approach for the right application.

I also do like to use the UI5 Web Components without React, like with no framework at also, simply using vite. This is the simplest approach, very close to raw HTML and therefore very performant.

Best, Nico

SushmitaG
Product and Topic Expert
Product and Topic Expert
9,903

Here is my screenshot for week 1 Challenge Screenshot 2023-06-08 at 3.54.18 PM.png

 

SushmitaG
Product and Topic Expert
Product and Topic Expert
0 Kudos
9,098

My updated screenshot..used UI5 component Screenshot 2023-06-14 at 5.21.47 PM.png

raja_velayuthan
Newcomer
9,829

Here is my screenshot for Week 1 Challenge

raja_velayuthan_0-1686273206809.png

 

 

Tomas_Buryanek
Active Contributor
0 Kudos
9,786

Hello, am I the only one who has issues to open codesandbox.io website? It is returning ERR_TUNNEL_CONNECTION_FAILED in 99% of the times I try it.
EDIT: seems to be proxy issue on my side.

-- Tomas --

9,778

Hi All,

Here is the output for the first week challenge:

Sonal_0-1686312445137.png

 

Ruthiel
Product and Topic Expert
Product and Topic Expert
9,758

Amazing challenge!

Ruthiel_0-1686316106408.png

 

SamyukthaPrabhu
Explorer
9,705

Hi there!

Here's my entry for the SAP Developer Challenge - SAP UI5 Web Components for React Challenge (Week 1) 🙂

samyuktaprabhu_0-1686355747968.png

gauthamkamathk
Explorer
9,696

Hello,

Please find my entry for the SAP Developer Challenge – SAP UI5 Web Components for React - Week 1. It was exciting to work on the challenge.

Screenshot 2023-06-10 at 2.34.25 AM.png

S0025473719
Discoverer
0 Kudos
9,665

good post

MarcelloUrbani
Active Contributor
9,633


Here is the output for the first week challenge:

MarcelloUrbani_0-1686404544834.png

 

manuelbordallo
Explorer
9,444

My first week challenge output:

w1.jpg

JohnPaulLiberal
Explorer
9,421

Hi All!

Here is the output for this week's challenge:

JohnPaulLiberal_0-1686582045955.png

 

gphadnis2000
Participant
0 Kudos
9,419

Here is my screenshot of week 1 challenge.

gphadnis2000_0-1686582547109.png

 

0 Kudos
9,240

It doesn't appear that you've used the SAP UI5 Web Components for React Table component. You will need to use that in order to get credit for completing this challenge. You can find the info for the Table component linked below, along with examples of how to use it. Good luck!

https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-table--docs 

0 Kudos
8,688

Hi Michelle,

Corrected now.

gphadnis2000_0-1686989697238.png

Thanks and Regards,

Gaurav Phadnis

bztoy
Participant
9,333

Hello,

Here is my screenshort for week#01.

sap-ui5-react-web-component-challenge-week01.png

ShadM
Explorer
9,301

Week 1 challenge completed. Excited for the next one

ShadM_0-1686664630306.png

 

agnissh
Product and Topic Expert
Product and Topic Expert
9,287

Week1# 

agnissh_1-1686666909684.png

 

Fianni
Explorer
9,252

 

I have just found this new challenge.
I did the other challenge for ABAPers and It was very informative.
Abap is my primary focus language.
I hope to be able to follow you 😅

This is my first time with Web Component in React 😀

Vrum_0-1686691519088.png


nice to have found it 😉

Francesco


Francesco

ManojKumarVarma
Explorer
9,166

Hi MichelleMoudy

Here is my week 1 challenge. The challenge is awesome. I am excited to do it.

ManojKumarVarma_0-1686742111102.png

Thanks.

 

SingireddySunil
Explorer
9,152

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

SingireddySunil_0-1686743155025.png

 

8,965

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. MicrosoftTeams-image (7).png

8,954

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

 

MicrosoftTeams-image (7).png

ojeswinisanaka
Explorer
8,954

Hi @MichelleMoudy ,

Here is  my week 1 challenge screenshot

ojeswinisanaka_1-1686820902000.png

 

samirhabibsaad
Explorer
8,929

Hi @MichelleMoudy ,

Please find below, my screenshot for the week1 challenge.

samirhabibsaad_0-1686824131157.png

 



8,869

Here is screenshot of my table.

geovanny64_0-1686880726270.png

 

 

orozco_albert
Discoverer
8,823

First time approaching UI5 web components, looking forward to some more challenges! 😄

Captura de pantalla 2023-06-16 a las 11.43.20.png

Sanurag18
Explorer
8,795

Here is the screen shot of my table.

Sanurag18_0-1686937485734.png

 

johna69
Product and Topic Expert
Product and Topic Expert
0 Kudos
8,385

Late to the game one this one:Screenshot 2023-06-22 at 10.17.38 AM.png

stickman_0x00
Explorer
0 Kudos
8,330

stickman_0x00_0-1687513070508.png

🙂

Nicolas
Active Contributor
0 Kudos
8,147

Hello,

Thank you for the challenge. Here is the screenshot of my table:

Nicolas_0-1687875028201.png

Regards, Nicolas

alessandraarm
Explorer
0 Kudos
7,954

Hello!

Here is my screenshot for week 1 challenge 😊

 

alessandraarm_1-1688154246409.png

 

 

ecejudo
Explorer
0 Kudos
7,874

 

ecejudo_0-1688396320231.png

 

 

GRABLERE
Product and Topic Expert
Product and Topic Expert
0 Kudos
7,793

Thanks @MichelleMoudy for the challenge, was looking for a kickstart into react for some time:)

GRABLERE_0-1688546953409.png

Thanks,

Emanuel

Aliaksandr_Ch
Product and Topic Expert
Product and Topic Expert
0 Kudos
7,764

Hi @MichelleMoudy,

Thank you for the challenge!🤘

Screenshot 2023-07-05 at 22.51.42.png