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

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

arunmbarec
Participant

 

Here is screenshot of my table. 

arunmbarec_0-1686179536151.png

 

nicoschoenteich
Developer Advocate
Developer Advocate

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

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

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

HappyGirl
Associate
Associate

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

 

0 Kudos

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

raja_velayuthan
Newcomer

Here is my screenshot for Week 1 Challenge

raja_velayuthan_0-1686273206809.png

 

 

Tomas_Buryanek
Active Contributor
0 Kudos

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.

Hi All,

Here is the output for the first week challenge:

Sonal_0-1686312445137.png

 

Ruthiel
Product and Topic Expert
Product and Topic Expert

Amazing challenge!

Ruthiel_0-1686316106408.png

 

SamyukthaPrabhu
Explorer

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

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

good post

MarcelloUrbani
Active Contributor


Here is the output for the first week challenge:

MarcelloUrbani_0-1686404544834.png

 

manuelbordallo
Explorer

My first week challenge output:

w1.jpg

JohnPaulLiberal
Explorer

Hi All!

Here is the output for this week's challenge:

JohnPaulLiberal_0-1686582045955.png

 

gphadnis2000
Participant
0 Kudos

Here is my screenshot of week 1 challenge.

gphadnis2000_0-1686582547109.png

 

0 Kudos

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

Hi Michelle,

Corrected now.

gphadnis2000_0-1686989697238.png

Thanks and Regards,

Gaurav Phadnis

bztoy
Participant

Hello,

Here is my screenshort for week#01.

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

ShadM
Explorer

Week 1 challenge completed. Excited for the next one

ShadM_0-1686664630306.png

 

agnissh
Product and Topic Expert
Product and Topic Expert

Week1# 

agnissh_1-1686666909684.png

 

Fianni
Explorer

 

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

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

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

SingireddySunil_0-1686743155025.png

 

Hi @MichelleMoudy 

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

Hi @MichelleMoudy 

Here is my screenshot for week 1 challenge. 

 

MicrosoftTeams-image (7).png

ojeswinisanaka
Explorer

Hi @MichelleMoudy ,

Here is  my week 1 challenge screenshot

ojeswinisanaka_1-1686820902000.png

 

samirhabibsaad
Explorer

Hi @MichelleMoudy ,

Please find below, my screenshot for the week1 challenge.

samirhabibsaad_0-1686824131157.png

 



Here is screenshot of my table.

geovanny64_0-1686880726270.png

 

 

orozco_albert
Discoverer

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

Here is the screen shot of my table.

Sanurag18_0-1686937485734.png

 

johna69
Product and Topic Expert
Product and Topic Expert
0 Kudos

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

stickman_0x00
Explorer
0 Kudos

stickman_0x00_0-1687513070508.png

🙂

Nicolas
Active Contributor
0 Kudos

Hello,

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

Nicolas_0-1687875028201.png

Regards, Nicolas

alessandraarm
Explorer
0 Kudos

Hello!

Here is my screenshot for week 1 challenge 😊

 

alessandraarm_1-1688154246409.png

 

 

ecejudo
Explorer
0 Kudos

 

ecejudo_0-1688396320231.png

 

 

GRABLERE
Product and Topic Expert
Product and Topic Expert
0 Kudos

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

Hi @MichelleMoudy,

Thank you for the challenge!🤘

Screenshot 2023-07-05 at 22.51.42.png