158
Views
7
Comments
Solved
Horizontal Progress Bar With Status (Color)
Question

Hi i am looking something like below

As an example my total application will be 1000

Approved application 200, Draft 600 , Rejected 200

As like below I need color with 100% based on the above denomination


2021-01-06 14-10-16
Camila Teixeira Carneiro
Solution

Hello, 

for me I think that the easy way to achieve it is using containers. Based on the status you can give the color, base on the number, you can give the width. 


UserImage.jpg
touseef ahmed

Hi @Camila Teixeira Thanks for your response.

2020-04-15 19-07-26
Eduardo Rodrigues
Solution

Hi @touseef ahmed ,

I made this example to show how I would do it and left the component available in the forge if I wanted to use it and change it to your needs

Similar to the solution suggested by @Camila Teixeira

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=10248

Best Regards.

UserImage.jpg
touseef ahmed

Hi @Eduardo Rodrigues Thanks for your solution. Ok will check. thanks again.

UserImage.jpg
touseef ahmed

@Eduardo Rodrigues  Excellent. This is what I needed. It works. Thanks for your valuable time. :) Have a nice day

2020-04-15 19-07-26
Eduardo Rodrigues

Hi @touseef ahmed ,

Would it be with React or traditional?

UserImage.jpg
touseef ahmed

@Eduardo This is for react

2021-01-06 14-10-16
Camila Teixeira Carneiro
Solution

Hello, 

for me I think that the easy way to achieve it is using containers. Based on the status you can give the color, base on the number, you can give the width. 


UserImage.jpg
touseef ahmed

Hi @Camila Teixeira Thanks for your response.

2020-04-15 19-07-26
Eduardo Rodrigues
Solution

Hi @touseef ahmed ,

I made this example to show how I would do it and left the component available in the forge if I wanted to use it and change it to your needs

Similar to the solution suggested by @Camila Teixeira

https://www.outsystems.com/forge/Component_Overview.aspx?ProjectId=10248

Best Regards.

UserImage.jpg
touseef ahmed

Hi @Eduardo Rodrigues Thanks for your solution. Ok will check. thanks again.

UserImage.jpg
touseef ahmed

@Eduardo Rodrigues  Excellent. This is what I needed. It works. Thanks for your valuable time. :) Have a nice day

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.