Bootstrap Progress Bar on list/view page

Tips submitted by PHPMaker users
Post Reply
Andy
User
Posts: 5

Bootstrap Progress Bar on list/view page

Post by Andy »

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
}


totranquilo
User
Posts: 1

Post by totranquilo »

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


Post Reply