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 3)

MichelleMoudy
Developer Advocate
Developer Advocate
4,946

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.

MichelleMoudy_0-1687316676514.png

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!

 

20 REPLIES 20

manuelbordallo
Explorer
4,706

Hello,

Here is my proposal for Week 3:

w3.jpg

 

Ruthiel
Product and Topic Expert
Product and Topic Expert
4,695

Hello!

My print of the challenge:

Ruthiel_0-1687434243562.png

 

SushmitaG
Product and Topic Expert
Product and Topic Expert
4,612

Here is my submission for week 3

 Screenshot 2023-06-23 at 10.57.16 AM.png

SushmitaG
Product and Topic Expert
Product and Topic Expert
0 Kudos
4,612

Edited the screenshot

stickman_0x00
Explorer
4,576

 

stickman_0x00_9-1687516429193.pngstickman_0x00_10-1687516513264.png

 

🙂

For debugging at least the browser console were able to provide me of libraries I missed to import, at least that helps.

gauthamkamathk
Explorer
4,546

Hello,

Screenshot 2023-06-23 at 6.30.59 PM.png

Screenshot 2023-06-23 at 6.28.56 PM.png
Please find my solution for Week 3-Infinite Scroll. It currently waits until 18th row is scrolled to and then loads more data.

Have a great weekend!

 



bztoy
Participant
4,394

Hi Michelle,

Here are my submission for week 3.

Picture1, at the top of the page. There are totally 15 rows in the table now. 10 rows were from the initial load plus more 5 rows added by a setRows function on onLoadMore event that has automatically raised according to the height of the table.

week3-top.png

Picture2, at the bottom of the page after the 3rd scrolling down.

week3-buttom-3rd-times.png

ManojKumarVarma
Explorer
4,373

Hi @MichelleMoudy ,

Here is my screenshots for week 3 challenge.

ManojKumarVarma_0-1687777969606.png

 

ManojKumarVarma_1-1687777974416.png

Thanks.

SingireddySunil
Explorer
0 Kudos
4,272

Hi @MichelleMoudy 

Here is the screenshot for week-3
Initial loading

SingireddySunil_0-1687870018255.png

After scrolling down

SingireddySunil_1-1687870029579.png

 

 

JohnPaulLiberal
Explorer
0 Kudos
4,210

Hi All!

Here is the output for this week's challenge:

JohnPaulLiberal_1-1687952063634.png

After scrolling down:

JohnPaulLiberal_3-1687952300314.png

Fianni
Explorer
0 Kudos
4,097

this is my assignment.
I have no excuse right now to learn React with SAPUI5 🙂

Vrum_0-1688076911168.png

Vrum_1-1688076925254.png

 



SamyukthaPrabhu
Explorer
3,982

Hi Michelle,

This is my entry to the Week 3 challenge!

SamyukthaPrabhu_0-1688335320748.png

Was more challenging than the previous 2 weeks & excited for Week 4. 😄

Best, 

Samyuktha

 

0 Kudos
3,959

Hi Michelle,

This is my entry to the Week 3 challenge!
MicrosoftTeams-image (9).png

0 Kudos
3,950

Hi Michelle,

This is my entry to the Week 3 challenge!

Prathyusha_0-1688364025834.png

 

alessandraarm
Explorer
0 Kudos
3,924

Hello!

Here my submission for week 3:

 

First load:

alessandraarm_0-1688421979678.png

After scrolling:

 

alessandraarm_1-1688422033989.png

 

ecejudo
Explorer
0 Kudos
3,892

Nice !

ecejudo_0-1688455748238.png

 

ojeswinisanaka
Explorer
0 Kudos
3,870

Hi @MichelleMoudy 

Here is my week 3 challenge

ojeswinisanaka_0-1688464965109.pngojeswinisanaka_1-1688464973688.png

Thanks

GRABLERE
Product and Topic Expert
Product and Topic Expert
0 Kudos
3,818

Hi @MichelleMoudy,

thanks again for the nice challenge. Screenshots below:

GRABLERE_0-1688630180114.png

GRABLERE_1-1688630189306.png

Cheers,

Emanuel

 

jdm
Explorer
0 Kudos
3,740

Week 3 Submission:

jdm_0-1688983046365.png

Interestingly, the additional 5 rows after scrolling to the bottom is more apparent when the growing="Button" component is used. Tried it when testing if my code worked.

 

geek
Participant
0 Kudos
3,119

Before reaching bottom of scroll:

geek_2-1690970771025.png

After:

geek_3-1690970819458.png