Bootstrap Progress Bar on list/view page

Tips submitted by PHPMaker users

Bootstrap Progress Bar on list/view page

Postby Andy » Thu Feb 25, 2016 5:58 pm

If you have a field, which you would like to show on the list or view page as a progress bar (e.g. Task Progress), you can use the Bootstrap progress bar class to create beautiful progress bars.

Progress bar with label (with minimum width):
http://getbootstrap.com/components/#progress-label

You can adapt to use whichever progress bar you like.
The label with minimum width progress bar is nice as it shows the numeric value even if it is a very low number.

In this example the progress bar field is called "TaskProgress":

Here is the code added to:
Server Events - Table-Specific- Common - Row_Rendered

// Row Rendered event
function Row_Rendered() {
// To view properties of field class, use:
//var_dump($this-><FieldName>);

//Progress Bar Start
$this->TaskProgress->ViewValue = "
<div class='progress'>
<div class='progress-bar progress-bar-success' role='progressbar' aria-valuenow='".$this->TaskProgress->ViewValue." aria-valuemin='0' aria-valuemax='100' style='min-width: 2em; width: ".$this->TaskProgress->ViewValue."%'>".$this->TaskProgress->ViewValue."%
</div></div></div>";
//Progress Bar End
}
Andy
 
Posts: 7
Joined: Wed Feb 10, 2016 10:43 pm

Re: Bootstrap Progress Bar on list/view page

Postby totranquilo » Sat Aug 27, 2016 5:03 am

I would like this feature, but with star rating, view and edit, where the user makes the evaluation of services.

star rating

storing the data in the database
totranquilo
 
Posts: 1
Joined: Sat Aug 27, 2016 3:46 am


Return to User Submitted Tips (PHPMaker)