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

MichelleMoudy
Developer Advocate
Developer Advocate

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.

MichelleMoudy_0-1686728637961.png

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!

26 REPLIES 26

SingireddySunil
Explorer

Hi @MichelleMoudy 

Here is my screenshot for week-2 challenge

SingireddySunil_0-1686746891473.png

Analytical Table for bonus challenge

SingireddySunil_0-1686829600607.png

 

ManojKumarVarma
Explorer

Hi @MichelleMoudy 

Here is my week 2 Custom Status Component challenge.

ManojKumarVarma_0-1686747002252.png

For Bonus Challenge Analytical Table is here,

ManojKumarVarma_0-1686830334653.png

 

Thanks.

gauthamkamathk
Explorer

Hello @MichelleMoudy ,

Below is my solution for the week 2 challenge: 

Screenshot 2023-06-14 at 4.09.46 PM.png
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
Associate
Associate

Here is my submission for Week 2Screenshot 2023-06-14 at 10.04.53 PM.png

SamyukthaPrabhu
Explorer

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!  🙂

SamyukthaPrabhu_0-1686780321177.png

Thank you!

Best Regards,

Samyuktha

MarcelloUrbani
Active Contributor

Here you go:

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

MarcelloUrbani_0-1686818336459.png

 

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
Explorer

Hi @MichelleMoudy 

Here is my week 2 challenge screenshot

ojeswinisanaka_1-1686821034753.png

For Bonus challenge Analytical Table is here

ojeswinisanaka_0-1686831561702.png

 

 

 

Hi @MichelleMoudy 

Here is my screenshot for week 2 challenge. 

MicrosoftTeams-image (8).png

Prathyusha_0-1686831598040.png

 

 

arunmbarec
Participant

Here is my screenshot for week2 challenge.

arunmbarec_0-1686822751258.png

 

Ruthiel
Product and Topic Expert
Product and Topic Expert

Hello @MichelleMoudy !
I really enjoyed this challenge!

The AnalyticalTable component is powerful.

Ruthiel_0-1686870347991.png

 


 

Hi @MichelleMoudy 

Here is my screenshot for week 2 challenge. 
MicrosoftTeams-image (6).png
For Bonus challenge Analytical Table is here
MicrosoftTeams-image (8).png

orozco_albert
Discoverer

Captura de pantalla 2023-06-16 a las 12.54.20.png

gphadnis2000
Participant

Hi Michelle,

Here is my week 2 submission

gphadnis2000_0-1686997714491.png

Thanks and Regards,

Gaurav Phadnis

JohnPaulLiberal
Explorer

Hi All!

Here is my week two submission (Bonus included):

JohnPaulLiberal_0-1687034168089.png

 

bztoy
Participant

Hi,

Here is my Week2 submission.

week2-custom-status.png

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

manuelbordallo
Explorer

Hello,

Here is my proposal for week 2 challenge:

table.jpg

And bonus (AnalyticalTable):

analytical.jpg

stickman_0x00
Explorer
0 Kudos

stickman_0x00_0-1687514968035.png

🙂

Fianni
Explorer
0 Kudos

this is mine

Vrum_0-1687852689557.png

 

alessandraarm
Explorer
0 Kudos

Hello!

Here my screenshot for week 2 challenge 😁:

alessandraarm_0-1688156601292.png

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

alessandraarm_1-1688156701935.png

 

0 Kudos

stickman_0x00_0-1688158712238.png

See property cell and look at the examples 😉

ecejudo
Explorer
0 Kudos

 

ecejudo_0-1688396443089.png

 

GRABLERE
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi,

result week 2 exercise:)

GRABLERE_0-1688551346404.png

Regards,

Emanuel

Aliaksandr_Ch
Product and Topic Expert
Product and Topic Expert
0 Kudos

Hi @MichelleMoudy,

Week 2.png

Best regards,
Aliaksandr

jdm
Explorer
0 Kudos

Week 2 Submission:

image.png

 

Here's the bonus (analytical table):

image.png

 

 

geek
Explorer
0 Kudos

Very late...

geek_0-1690382636942.png

The bottom is the AnalyticalTable.