Any ideas on implementing this kind of status bar?
Application Type
Traditional Web
Service Studio Version
11.11.4 (Build 43498)

I'm trying to make a status bar like the below image and I checked several Forge components similar to status progress bar, but I couldn't discover a good one.

Let's say you submit something. What I want to do is to display application status after submitting.

Do you recommend any ideas?

I'd be nice if you could give me your advice.

Best,

mvp_badge
MVP
Solution

Hi Tsubasa,

Even though you are looking for a TWA solution for the mentioned use-case, I would suggest you to refer to this forum post: https://www.outsystems.com/forums/discussion/61901/wizard-theme-in-react-outsystems-11-steps-on-button-click/#Post242415

I guess the Wizard widget from the OutSystemsUIWeb module suits your use-case.

I hope it helps you :)


Kind regards,

Benjith Sam

I implemented a simple wizard app(attached oml file) but it didn't work as I expected.

I proceeded with this official tutorial Wizard for reference. 

What I'm expecting is 

Everytime you press "submit" or "Back" button, only active Wizard icon displays with another color.  

However when I open in browser, each Wizard icon  doesn't display in the first place as below(red circle part).


 


I couldn't figure out why.

I wonder if I can set a wizard icon shape anywhere...


I attached my oml, so if you don't mind, I'd be happy if you could take a look at it.

I'd like you to lend me your expertise if you are familiar with this.

Best, 

apply.oml

I want to display horizontal wizard icons like this.

 I set "horizontal" in orientation of Wizard widget ,though... it didn't work..


Hi Tsubasa,

do you want to display only one block of the current status or all blocks behind as well?

You don't need a progress bar. Since the list of status is so small you can manually create them inside containers and show/hide according to the current status.

Regards

I want to display only one block of the current status.


Let's say, in the image in my question, the current status is "Review".

You display only the shape of "Review" with a different color.

You have the data of status as Entity.



Also, what I want to do is very close to the stuff Manish Gupta pasted .

Do you have any ideas on how you implement to display status flow on browser?

I'd appreciate it if you could tell me about it if you have expertise on that.

I can tell you a logic to implement it based only on visible true/false containers.

You can create a container for each status and inside each container you have an If (If StatusAchieved) with the image in purple for True and the image in Blue/Grey for False.

Thank you for your reply.

You mentioned "You don't need a progress bar. Since the list of status is so small you can manually create them inside containers " 

,but that means there is some widget to create status flow chart ? 


Best,


I don't know any widget with that format but you can use that own images you used or search for others.

Dear Tsubasa 

I am not sure if I have understood your query correct. But can you confirm if you are looking something like this - https://personal-9qwkrkgl.outsystemscloud.com/ForumHelp/StepForm ?

Sorry for my vague question..

I checked the link you pasted. That's exactly close to what I want !


If you don't mind, I'd like to know about how you implement that status flow chart.

Would you lend me your knowledge?


I wonder if there is something I can use as reference.

Hello Tsubasa

After understanding your requirement I have try to create one more sample here - https://personal-9qwkrkgl.outsystemscloud.com/ForumHelp/ShowStatus 


It has data at left side, if you click on any tile the status will update. I was not clear that you want to show only one status (which is of entity) or status in different color (which is of entity). So, I have added both options. 


Also, I have added OML.

Please check STEPFORM Screen for the Flow that I shared earlier. 

And check SHOWSTATUS for the current one. 


Please feel free to ask in case of any question. 

Tsubasa.oml

Thank you for your reply.

I run through your attached OML file.

I actually want to make an app with Dublin Template.

I'm on implementation with that but when I open in browser, wizard icons don't display and I can't see which is active when I press the next button "Submit".


I want to display horizontal wizard items but I'm not sure where I'm missing.

Are you familiar with this?


Best, 

Hello Tsubasa

I think the template will not impact on the Step Form Implementation. 

If you are referencing the OML I have shared, I have not used the Navigation Wizard. I have done that with Tags and Conditions 

Also, in the Browser you cannot see the icon because through the Widget Tree you have attached it seems you have not added the Icon. In the Icon Placeholder, you will need to add icons from widget. 

Also, in my OML please check, I have added condition of colors as well in the tag. 

mvp_badge
MVP
Solution

Hi Tsubasa,

Even though you are looking for a TWA solution for the mentioned use-case, I would suggest you to refer to this forum post: https://www.outsystems.com/forums/discussion/61901/wizard-theme-in-react-outsystems-11-steps-on-button-click/#Post242415

I guess the Wizard widget from the OutSystemsUIWeb module suits your use-case.

I hope it helps you :)


Kind regards,

Benjith Sam

I implemented a simple wizard app(attached oml file) but it didn't work as I expected.

I proceeded with this official tutorial Wizard for reference. 

What I'm expecting is 

Everytime you press "submit" or "Back" button, only active Wizard icon displays with another color.  

However when I open in browser, each Wizard icon  doesn't display in the first place as below(red circle part).


 


I couldn't figure out why.

I wonder if I can set a wizard icon shape anywhere...


I attached my oml, so if you don't mind, I'd be happy if you could take a look at it.

I'd like you to lend me your expertise if you are familiar with this.

Best, 

apply.oml

I want to display horizontal wizard icons like this.

 I set "horizontal" in orientation of Wizard widget ,though... it didn't work..


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