topic Re: SAP Developer Challenge - UI5 Web Components for React Challenge (Week 2) in Application Development and Automation Discussions

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

MichelleMoudy6 — Wed, 14 Jun 2023 14:04:16 GMT

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:

“Not Started”
“In Progress”
“Completed”
“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!

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

SingireddySunil — Thu, 15 Jun 2023 11:48:23 GMT

Hi @MichelleMoudy6

Here is my screenshot for week-2 challenge

Analytical Table for bonus challenge

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

ManojKumarVarma — Thu, 15 Jun 2023 11:59:18 GMT

Hi @MichelleMoudy6

Here is my week 2 Custom Status Component challenge.

For Bonus Challenge Analytical Table is here,

Thanks.

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

gauthamkamathk — Wed, 14 Jun 2023 14:34:05 GMT

Hello @MichelleMoudy6 ,

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

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

SushmitaG98 — Wed, 14 Jun 2023 16:36:55 GMT

Here is my submission for Week 2

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

SamyukthaPrabhu — Wed, 14 Jun 2023 22:07:42 GMT

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

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

MarcelloUrbani — Thu, 15 Jun 2023 08:40:21 GMT

Here you go:

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

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

Ojeswini_Sanaka — Thu, 15 Jun 2023 12:19:31 GMT

Hi @MichelleMoudy6

Here is my week 2 challenge screenshot

For Bonus challenge Analytical Table is here

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

former_member145047 — Thu, 15 Jun 2023 12:20:11 GMT

Hi @MichelleMoudy

Here is my screenshot for week 2 challenge.

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

arunkrishnamoorthy1988 — Thu, 15 Jun 2023 09:53:03 GMT

Here is my screenshot for week2 challenge.

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

MichelleMoudy6 — Thu, 15 Jun 2023 21:11:31 GMT

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.

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

Ruthiel — Thu, 15 Jun 2023 23:06:01 GMT

Hello @MichelleMoudy6 !
I really enjoyed this challenge!

The AnalyticalTable component is powerful.

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

former_member142680 — Fri, 16 Jun 2023 06:28:55 GMT

Hi @MichelleMoudy

Here is my screenshot for week 2 challenge.

For Bonus challenge Analytical Table is here

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

orozco_albert — Fri, 16 Jun 2023 10:55:10 GMT

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

gphadnis2000 — Sat, 17 Jun 2023 10:28:58 GMT

Hi Michelle,

Here is my week 2 submission

Thanks and Regards,

Gaurav Phadnis

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

JohnPaulLiberal — Sat, 17 Jun 2023 20:39:14 GMT

Hi All!

Here is my week two submission (Bonus included):

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

bztoy — Mon, 19 Jun 2023 11:19:31 GMT

Hi,

Here is my Week2 submission.

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

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

manuelbordallo — Tue, 20 Jun 2023 13:39:00 GMT

Hello,

Here is my proposal for week 2 challenge:

And bonus (AnalyticalTable):

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

stickman_0x00 — Fri, 23 Jun 2023 10:09:33 GMT

🙂

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

Fianni — Tue, 27 Jun 2023 07:58:58 GMT

this is mine