Dynamic Progress Bar

[Benades]

I am trying to apply my caspio datapage to a website template which has a progress bar. I have successfully displayed the value (42%) via a HTML Block in a datapage but I'm stuck on how to change the width of the progress bar to the same value dynamically.

<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-info py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-info font-weight-bold text-xs mb-1"><span>Return of Investment</span></div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="text-dark font-weight-bold h5 mb-0 mr-3"><span><script type="text/javascript" src="https://c1dcn529.caspio.com/dp/75db9000ce3b16e37cda43bca9b2/emb"></script></span></div>
                                                </div>
                                                <div class="col">
                                                    <div class="progress progress-sm">
                                                        <div class="progress-bar bg-info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"><span class="sr-only">50%</span></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-clipboard-list fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>

Above is the relevant code used. I have tried to simply paste the deployment code in 'width:' with no success.

How can I pass the same value to the progress bar? Below is a screenshot of the HTML Block

[TellMeWhy]

Quote

<div class="progress-bar bg-info" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"><span class="sr-only">50%</span></div>

I think it's in this element, aria-valuenow should be the current value (the calc field) you can probably insert this in the DataPage, it will not work in Direct Deployment, but it should work when embedded in your site with the bootstrap included, the style = width:90% should be based on the value of the calc field as well.

Try this in your DataPage (valuenow is NOT in percent, width should be in percent)

<div class="progress progress-sm">
	<div class="progress-bar bg-info" aria-valuenow="[@calcfield:3]" aria-valuemin="0" aria-valuemax="100" style="width: [@calcfield:3%];"><span class="sr-only">[@calcfield:3%]</span></div>
  
</div>

 

Ref: https://getbootstrap.com/docs/4.0/components/progress/

[Benades]

Thanks for your reply @TellMeWhy,

However I have done exactly as your instructions but with no positive results. Please see screenshots below of code implementation and result:

The code:

<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-info py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-info font-weight-bold text-xs mb-1"><span>Return of Investment</span></div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="text-dark font-weight-bold h5 mb-0 mr-3"><span><script type="text/javascript" src="https://c1dcn529.caspio.com/dp/75db9000ce3b16e37cda43bca9b2/emb"></script></span></div>
                                                </div>
                                                <div class="col">
                                                    <script type="text/javascript" src="https://c1dcn529.caspio.com/dp/75db90006ceb67424966473c86ad/emb"></script>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-exchange-alt fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>

The result:

[TellMeWhy]

5 hours ago, Benades said:

Thanks for your reply @TellMeWhy,

However I have done exactly as your instructions but with no positive results. Please see screenshots below of code implementation and result:

The code:

<div class="col-md-6 col-xl-3 mb-4">
                            <div class="card shadow border-left-info py-2">
                                <div class="card-body">
                                    <div class="row align-items-center no-gutters">
                                        <div class="col mr-2">
                                            <div class="text-uppercase text-info font-weight-bold text-xs mb-1"><span>Return of Investment</span></div>
                                            <div class="row no-gutters align-items-center">
                                                <div class="col-auto">
                                                    <div class="text-dark font-weight-bold h5 mb-0 mr-3"><span><script type="text/javascript" src="https://c1dcn529.caspio.com/dp/75db9000ce3b16e37cda43bca9b2/emb"></script></span></div>
                                                </div>
                                                <div class="col">
                                                    <script type="text/javascript" src="https://c1dcn529.caspio.com/dp/75db90006ceb67424966473c86ad/emb"></script>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto"><i class="fas fa-exchange-alt fa-2x text-gray-300"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>

The result:

This worked for me

 

 

 

try style="width:[@calcfield:1#]%" number instead of % instead, then percent outside to append it.

[Benades]

At the end the above did not worked for me but what I did was to create a HTML Datapage to retrieve the numerical value and pass it through which worked for some reason.

[PotatoMato]

Hi! Just to add, you can also check this Caspio youtube video for progress bar: