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

[MichelleMoudy]

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

Welcome to the second week of our developer challenge! This week, your task is to create a custom status component that will conditionally render based on the incoming text.

If you haven't completed the first week yet, it's recommended to do so before starting this week's challenge. You will build upon the code you wrote last week.

Unlike last week, where you were required to use the Table component, this week you have more freedom in how you can build the custom component. For the custom status, I used the Badge component and mapped the color scheme to numbers in an object acting as an enum, but you can take whatever path you want to achieve a similar functionality.

Bonus Challenge (Optional)

We also have an exciting bonus challenge for you! You have the option to replace the Table component you implemented in Week 1 with the more advanced and powerful AnalyticalTable component. While it may be more complex, it offers enhanced functionality.

If you're up for the challenge and want to level up your skills, feel free to switch your table component to AnalyticalTable. You will still need to complete the custom status component to earn credit for this week.

Resources

To help you achieve the goals for this week, the following resources (as well as those from last week) could be useful. You don't need to use all of them to complete the challenge, but they will assist you in whichever direction you choose. 

Enums in JavaScript

Objects

Working with Objects

3 Ways to Access Object Properties in JavaScript

Passing Props to a Component

Custom Component Styling

Badge Component

AnalyticalTable Component

For guidance on getting started, please refer to week 1.

The Challenge

Goal: Create a custom component in a separate file that uniquely displays the four statuses below and use in the table component created in last week’s challenge.

The four different statuses are:

1. “Not Started”
2. “In Progress”
3. “Completed”
4. “Blocked”

To receive credit for completion, you need to accomplish three tasks:

1) Change the name of the title in App.tsx to include your name and “Week 2 – Custom Status Component”. It should resemble the title shown in the screenshot at the top of this post.

2) Create a custom status component in a new file to use in Solution.jsx. This component should dynamically render based on the status text. It should accept the status text as a prop and return a styled component. Each status should be a distinct color. If you forgot to add custom titles to the tasks from last week, make sure to do so now.

2.5) Switch your table component used in Week 1 to the AnalyticalTable component. This is fully optional. Let me know in the post with your screenshot if you implemented the AnalyticalTable and what your experience was.

3) Take a screenshot of your full table and header, similar to the screenshot at the top of this post, 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 UI5 Web Components into a custom component! Good luck and happy coding!

[SingireddySunil]

Hi @MichelleMoudy 

Here is my screenshot for week-2 challenge

Analytical Table for bonus challenge

[ManojKumarVarma]

Hi @MichelleMoudy 

Here is my week 2 Custom Status Component challenge.

For Bonus Challenge Analytical Table is here,

Thanks.

[gauthamkamathk]

Hello @MichelleMoudy ,

Below is my solution for the week 2 challenge: 

The first table is the solution to 2), and the second is the solution to 2.5).

Looking forward to Week 3!

Have a great week.

Thanks & Regards,
Gautham

[HappyGirl]

Here is my submission for Week 2

[SamyukthaPrabhu]

Hello!

Here's my entry as a part of the Week 2 Challenge!

Using the Analytical Table was nice & fun! This reminded me of my SAP days!  🙂

Thank you!

Best Regards,

Samyuktha

[MarcelloUrbani]

Here you go:

Any idea how to get rid of the extra line in analyticaltable?

[MichelleMoudy]

More than likely what is happening is the default number of lines in the table is set to 5. You can use that prop to change it to 4 to get rid of your extra line. 

[ojeswinisanaka]

Hi @MichelleMoudy 

Here is my week 2 challenge screenshot

For Bonus challenge Analytical Table is here

[Prathyusha]

Hi @MichelleMoudy 

Here is my screenshot for week 2 challenge. 

[arunmbarec]

Here is my screenshot for week2 challenge.

[Ruthiel]

Hello @MichelleMoudy !
I really enjoyed this challenge!

The AnalyticalTable component is powerful.

[PremKasina]

Hi @MichelleMoudy 

Here is my screenshot for week 2 challenge. 

For Bonus challenge Analytical Table is here

[orozco_albert]

[gphadnis2000]

Hi Michelle,

Here is my week 2 submission

Thanks and Regards,

Gaurav Phadnis

[JohnPaulLiberal]

Hi All!

Here is my week two submission (Bonus included):

[bztoy]

Hi,

Here is my Week2 submission.

I haven't done the analytical table yet because of my daily work but will try it later.

[manuelbordallo]

Hello,

Here is my proposal for week 2 challenge:

And bonus (AnalyticalTable):

[stickman_0x00]

🙂

[Vrum]

this is mine

[alessandraarm]

Hello!

Here my screenshot for week 2 challenge 😁:

I've tried the Analytical Table but I couldn't insert the badge in the column... 😥 I have to explore more about it!

[stickman_0x00]

See property cell and look at the examples 😉

[ecejudo]

[GRABLERE]

Hi,

result week 2 exercise:)

Regards,

Emanuel

[Aliaksandr_Ch]

Hi @MichelleMoudy,

Best regards,
Aliaksandr

[jdm]

Week 2 Submission:

Here's the bonus (analytical table):

[geek]

Very late...

The bottom is the AnalyticalTable.