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

[MichelleMoudy]

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.

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!

[stickman_0x00]

Init

After row added

After row delete

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

[manuelbordallo]

Hello,

Here is my proposal.

Add new row:

Remove row (bonus):

[JohnPaulLiberal]

Hi All!

Here is the output for this week's challenge:

[ManojKumarVarma]

Hi @MichelleMoudy  

Here is my week 4 challenge.

Thanks.

[gauthamkamathk]

Hello,

Below is my solution for Week 4. 

Addition of a new Row

Deletion of rows (Bonus):

Thanks 

[bztoy]

Hi @MichelleMoudy ,

Here are my submission for week#4.

Add row function.

Add new row

Add another row

New 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).

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]

Hello @MichelleMoudy 

Thanks for this last challenge.

Main:

Bonus:

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

Regards,
Ruthiel

[bztoy]

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]

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

[SamyukthaPrabhu]

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

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

Regards,

Samyuktha

[PremKasina]

Hi Michelle, 

Here is my entry for Week 4. 

[Prathyusha]

Hi Michelle,

This is my entry to the Week 4 challenge!

[HappyGirl]

Please find the attached solution for Week 4 challenge

• 
• Add button dialog
• Once the row is deleted 

[ecejudo]

[SingireddySunil]

Hi @MichelleMoudy 

Here is my submission for Week-4

After Pressing Add symbol

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

Before pressing the delete button

After deleting the selected row.

[ojeswinisanaka]

Hi @MichelleMoudy 

Here is my week 4 challenge

adding the rows

after addition

Before deleting rows

after deleting rows

Thanks

[Vrum]

This is my assignment:
Add button

Inserting New Row

[alessandraarm]

Hello!

Here is my submission for week 4:

Button to add a new line:

Clicking on it:

New line added:

Testing it again:

😁

[jdm]

Week 4 submission:

Bonus (deleted rows 1 and 2):

[AlexKarpov]

Hi all.

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

[geek]

Initially 20 rows:

Add one:

Delete one (18):