adding progress bar

Got something cool to share with AppGini users? Feel free to post it here!
Post Reply
rrahmad
Posts: 8
Joined: 2019-10-05 15:14

adding progress bar

Post by rrahmad » 2019-12-12 06:02

hi have anyone add progress bar on appgini app?
sample
https://www.w3schools.com/howto/tryit.a ... gressbar_3

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: adding progress bar

Post by jsetzer » 2019-12-12 06:57

Hi,

Bootstrap 3 already contains a built-in progress bar:

chrome_OYv1nKBG4g.png
chrome_OYv1nKBG4g.png (5.55 KiB) Viewed 1784 times

For example in file hooks/TABLENAME.php, function TABLENAME_dv() you can append some html-code like the following to the $html variable:

Code: Select all

<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50"
  aria-valuemin="0" aria-valuemax="100" style="width:50%">
    50% Complete (info)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
  aria-valuemin="0" aria-valuemax="100" style="width:60%">
    60% Complete (warning)
  </div>
</div>

<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    70% Complete (danger)
  </div>
</div>
https://www.w3schools.com/bootstrap/boo ... ssbars.asp
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

rrahmad
Posts: 8
Joined: 2019-10-05 15:14

Re: adding progress bar

Post by rrahmad » 2019-12-12 07:10

hi thanks for reply. can you show me example code? thanks.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: adding progress bar

Post by jsetzer » 2019-12-12 07:27

Sure, here you are:

Code: Select all

$html .= '<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
  aria-valuemin="0" aria-valuemax="100" style="width:40%">
    40% Complete (success)
  </div>
</div>';
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply