[Progress Bar Widget] Discussion

[Progress Bar Widget] Discussion

  
Forge Component
(7)
Published on 2012-03-12 by Rodrigo Castelo
7 votes
Published on 2012-03-12 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?
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,
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.
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,
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)
Thanks for this widget with was very useful!
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;
}
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!
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
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?