14
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


Champion
Rank: #230
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.

Rank: #16263

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

Rank: #16263

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

Rank: #512
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. 


Rank: #16263

Hi @Camila Teixeira Thanks for your response.

Champion
Rank: #230

Hi @touseef ahmed ,

Would it be with React or traditional?

Rank: #16263

@Eduardo This is for react

Rank: #512
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. 


Rank: #16263

Hi @Camila Teixeira Thanks for your response.

Champion
Rank: #230
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.

Rank: #16263

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

Rank: #16263

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