Skip to Content (Press Enter)
2011-06-15 10-50-22
André Ramos
197Views
10Comments
[Progress Bar Widget] Discussion
Question
Forge
2012-03-02-1213-png
Web icon
Progress Bar Widget (O11)
Forge asset by Rodrigo Castelo
This looks great but how does it work? How can the component know what percentage of an Ajax request has been completed?
0
0
02 Mar 2012
Copy Link
2025-09-25 08-38-29
Rodrigo Castelo
Staff
André Ramos wrote:
This looks great but how does it work? How can the component know what percentage of an Ajax request has been completed?
 
Hi André,

It has a sample example. Download, install, and check it.

Have fun. Cheers,
0
0
02 Mar 2012
Copy Link
2018-11-23 09-43-46
Carlos Henriques
This eSpace references the RichWidgetsExtension for the "RunJavascript" action.

I'm using Platform 6.0.1.10 and there is no RichWidgetsExtension. Instead you must reference the same action from the HTTPRequestHandler extension.
1
0
09 Mar 2012
Copy Link
2025-09-25 08-38-29
Rodrigo Castelo
Staff
Carlos Henriques wrote:
This eSpace references the RichWidgetsExtension for the "RunJavascript" action.

I'm using Platform 6.0.1.10 and there is no RichWidgetsExtension. Instead you must reference the same action from the HTTPRequestHandler extension.
 
Thank you, Carlos. A new version was uploaded referencing HTTPRequestHandler.

Cheers,
0
0
12 Mar 2012
Copy Link
2020-12-07 17-35-54
António Chinita
Looks great. Thank you. :D

Small improvement: add 
.ui-progress {
    border: 0px solid #287A91 !important;
}

to the WB stylesheet. Corrects a small issue, that makes a vertical bar appear when progress = 0, and seems to make no difference when it has progress. (At least in chrome)
0
0
21 Mar 2012
Copy Link
2021-07-22 16-16-55
Edgar Ramos
Champion
Thanks for this widget with was very useful!
2
0
22 Mar 2012
Copy Link
2018-05-30 02-48-38
Rui Barbosa
Here are some more colors

Enjoy

	.ui-progress-bar.aqua .ui-progress {
  background-color: aqua!important;
  border: 0px solid aquamarine;
}    
.ui-progress-bar.black .ui-progress {
  background-color: black!important;
  border: 0px solid darkgray;
} 
.ui-progress-bar.blue .ui-progress {
  background-color: #166BA5!important;
  border: 0px solid #287a91;
}
.ui-progress-bar.fuchsia .ui-progress {
  background-color: fuchsia!important;
  border: 0px solid blueviolet;
}
.ui-progress-bar.gray .ui-progress {
  background-color: gray!important;
  border: 0px solid black;
}
.ui-progress-bar.grey .ui-progress {
  background-color: grey!important;
  border: 0px solid black;
}
.ui-progress-bar.green .ui-progress {
  background-color: #76B501!important;
  border: 0px solid #4c8932;
}
.ui-progress-bar.lime .ui-progress {
  background-color: lime!important;
  border: 0px solid limegreen;
}
.ui-progress-bar.maroon .ui-progress {
  background-color: maroon!important;
  border: 0px solid #5A0000;
}
.ui-progress-bar.navy .ui-progress {
  background-color: navy!important;
  border: 0px solid #00004D;
}
.ui-progress-bar.olive .ui-progress {
  background-color: olive!important;
  border: 0px solid olivedrab;
}
.ui-progress-bar.purple .ui-progress {
  background-color: purple!important;
  border: 0px solid #5A005A;
}
.ui-progress-bar.red .ui-progress {
  background-color: red!important;
  border: 0px solid #990000;
}
.ui-progress-bar.silver .ui-progress {
  background-color: silver!important;
  border: 0px solid #606060;
}
.ui-progress-bar.teal .ui-progress {
  background-color: teal!important;
  border: 0px solid #004D4D;
}
.ui-progress-bar.white .ui-progress {
  background-color: white!important;
  border: 0px solid #B2B2B2;
}
.ui-progress-bar.yellow .ui-progress {
  background-color: yellow!important;
  border: 0px solid #999900;
}
.ui-progress-bar.orange .ui-progress {
  background-color: #E88310!important;
  border: 0px solid #ab8d15;
}
0
0
06 Sep 2012
Copy Link
UserImage.jpg
Theresa Sturdivant
I'm new to the OutSystems platform, and I'm trying to make a set of progress bars (5 to be exact, each with a different color that the user has no control over). We're looking to put this bank of progress bars on a dashboard for users to see how far along they are in certain question categories. Ultimately, the progress bar will have to tie to a stored value that will determine the progress that needs to be displayed.  Is it possible to modify this component to suit those needs? If so, what's the best way to do that?

Any help is appreciated!
0
0
18 Dec 2013
Copy Link
2019-11-12 17-31-26
Justin James
 
MVP
Theresa -

Yes, that is possible, no modifications needed. You just tell the progress bar what percentage of completion it should show.

If you are showing more than a few, change the CSS to not use animations, the animations put load on the CPU and we've found that more than a few on the screen slow the system down (and it is REALLY bad on a tablet or phone).

J.Ja
0
0
18 Dec 2013
Copy Link
UserImage.jpg
Theresa Sturdivant
J.Ja,

Thanks for the tip on the animation. I've altered the CSS and commented out the candy stripe scrolling.

I think I must be doing something wrong though because while I added an additional web block widget to hold a second progress bar and created the necessary structure and edit record, the second bar remains grayed out and won't respond to the "refresh with ajax" button as shown in the screen shot attached. Also the second bar is a different length than the first. Is there a trick I'm missing?
ProgressBarScreenShot.pdf
0
0
19 Dec 2013
Copy Link
UserImage.jpg
Joey Bosteen

This eSpace references the RichWidgetsExtension for the "RunJavascript" action.

I'm using Platform 6.0.1.10 and there is no RichWidgetsExtension. Instead you must reference the same action from the HTTPRequestHandler extension.

goldenslot mobile

0
0
30 Jun 2017
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.