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

MichelleMoudy
Developer Advocate
Developer Advocate

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.

MichelleMoudy_0-1687976482885.png

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.

MichelleMoudy_1-1687976482889.png

 

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.

 

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!

21 REPLIES 21

stickman_0x00
Explorer

Init

stickman_0x00_0-1688030751932.png

After row added

stickman_0x00_1-1688031088165.png

After row delete

stickman_0x00_2-1688031115449.png

The status are different since I am generating them dynamically on the badge component, so they get regenerated every time

manuelbordallo
Explorer

Hello,

Here is my proposal.

Add new row:

w4-1-2.jpg

Remove row (bonus):

w4-2.jpg

JohnPaulLiberal
Explorer

Hi All!

Here is the output for this week's challenge:

JohnPaulLiberal_0-1688100607271.png

 

 

ManojKumarVarma
Explorer

Hi @MichelleMoudy  

Here is my week 4 challenge.

ManojKumarVarma_0-1688133306481.pngManojKumarVarma_1-1688133316451.png

Thanks.

gauthamkamathk
Explorer

Hello,

Below is my solution for Week 4. 

Addition of a new Row

Screenshot 2023-07-01 at 12.54.48 AM.png

Deletion of rows (Bonus):

Screenshot 2023-07-01 at 12.50.49 AM.png

Thanks 

bztoy
Participant

Hi @MichelleMoudy ,

Here are my submission for week#4.

Add row function.

Add new rowAdd new row

Add another rowAdd another row

New rows added in the tableNew rows added in the table

Delete row function.

for this part, I am able to do it with below assumptions.

- the table can be performed with actual data in the array only.

- the deleted row will be removed from both UI table and the element of the array (source data) to keep program works correctly.

- extra field (unique key) was added in the task object to use as the key in the React element (to be filter out).

to-delete-row-6.png

screen-after-remove.png

 

 

There was one issue that I need to take a look into. I found that If  I keep the state of  pure data object (array) instead of the rendered React table row component, it was more easily to manage the delete functionality but when the state of the data has changed, the UI table rendered incorrectly (the cursor focus always set to the top of the table after deletion was performed).

Thanks,

Wises K.

Ruthiel
Product and Topic Expert
Product and Topic Expert

Hello @MichelleMoudy 

Thanks for this last challenge.

Main:

Ruthiel_0-1688331963737.png

Bonus:

Ruthiel_1-1688332017198.png

I don't know why, but the delete icon did not work, even after I reinstalled the new dependencies.

Regards,
Ruthiel

 

 

0 Kudos

Hi Ruthiel,

the icon issue is quite interesting indeed, I also experienced that only the set of specified versions mentioned by Michelle as below worked for me.

 

    "@ui5/webcomponents": "~1.13.3",
    "@ui5/webcomponents-fiori": "~1.13.3",
    "@ui5/webcomponents-icons": "~1.13.3",
    "@ui5/webcomponents-react": "~1.15.1",
 
I tried to mixed up them like install the latest version of @ui5/webcomponents-icons (only this particular module) which IMO, the newer version of webcomponent-icons should work fine but it did not.
 
I am thinking about may be we need to upgrade all @ui5* modules altogether to achieve that but haven't tested yet. 
 
I will try it again locally, not on CodeSandbox when I am available from my daily job. If I find something interesting, I will share you here again.
 
Thanks for sharing the issue

MichelleMoudy
Developer Advocate
Developer Advocate

@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. 

MichelleMoudy_0-1688598799593.png

 

SamyukthaPrabhu
Explorer

Hi Michelle, 

Here is my entry for Week 4. 

I added row with ID 41 through addRowDialog and removed row with ID 37 through delete a row icon (button).

SamyukthaPrabhu_0-1688336812510.png

Thank you for this challenge. It was nice & exciting.

Regards,

Samyuktha

Hi Michelle, 

Here is my entry for Week 4. 
MicrosoftTeams-image (10).pngMicrosoftTeams-image (11).png

Hi Michelle,

This is my entry to the Week 4 challenge!

Prathyusha_0-1688364192497.png

Prathyusha_1-1688364224908.jpeg

 

 

HappyGirl
Associate
Associate

Please find the attached solution for Week 4 challenge

  • Screenshot 2023-07-03 at 5.26.01 PM.png
  • Add button dialogScreenshot 2023-07-03 at 5.26.33 PM.png
  • Once the row is deleted Screenshot 2023-07-03 at 5.26.58 PM.png

ecejudo
Explorer

 

ecejudo_0-1688458160000.png

 

 

 

SingireddySunil
Explorer

Hi @MichelleMoudy 

Here is my submission for Week-4

After Pressing Add symbol

SingireddySunil_0-1688461000277.png

After filling details and pressing on add the row is added to table

SingireddySunil_1-1688461028083.png

Before pressing the delete button

SingireddySunil_5-1688461368227.png

After deleting the selected row.

SingireddySunil_6-1688461395148.png

 

 

 

 

ojeswinisanaka
Explorer

Hi @MichelleMoudy 

Here is my week 4 challenge

adding the rows

ojeswinisanaka_0-1688464747545.png

after addition

ojeswinisanaka_4-1688464873711.png

 

Before deleting rows

ojeswinisanaka_2-1688464812928.png

after deleting rows

ojeswinisanaka_3-1688464829585.png

Thanks

Fianni
Explorer

This is my assignment:
Add button

Vrum_1-1688554192803.png

Inserting New Row

 

Vrum_0-1688554143814.png

alessandraarm
Explorer

Hello!

Here is my submission for week 4:

 

Button to add a new line:

alessandraarm_0-1688565463339.png

Clicking on it:

alessandraarm_1-1688565492445.png

 

alessandraarm_2-1688565524236.png

 

New line added:

alessandraarm_3-1688565545815.png

Testing it again:

 

alessandraarm_8-1688565642878.png


alessandraarm_7-1688565625022.png

😁

jdm
Explorer
0 Kudos

Week 4 submission:

jdm_0-1689048053645.png

jdm_1-1689048078719.pngjdm_2-1689048100553.png

Bonus (deleted rows 1 and 2):

jdm_3-1689048177998.png

 

 

0 Kudos

Hi all.

How to get row number in onClick event? I see the evt parameter in callback but there is no row num ?

geek
Explorer
0 Kudos

Initially 20 rows:

geek_0-1691684726041.png

Add one:

geek_1-1691684763659.png

Delete one (18):

geek_2-1691684807047.png