Jump to content

Recommended Posts

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.

screenshot--2021_05.13-15_31_42.thumb.png.39c6e67de1992152b5405ccd59b13c32.png

<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

screenshot-c1dcn529.caspio.com-2021_05.13-15_43_00.png.f669bd76bd2148680c640c3e6ba7c97e.png

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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:

screenshot-c1dcn529.caspio.com-2021_05.14-19_04_18.png.532f48eee5458b9918fd6868c81fa3bb.png

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:

screenshot--2021_05.14-19_05_04.thumb.png.4926243c6501fec5a228574b54ad419b.png

Link to comment
Share on other sites

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:

screenshot-c1dcn529.caspio.com-2021_05.14-19_04_18.png.532f48eee5458b9918fd6868c81fa3bb.png

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:

screenshot--2021_05.14-19_05_04.thumb.png.4926243c6501fec5a228574b54ad419b.png

This worked for me

 

image.png.ed08e5b038c66de9c3a86eaa6fe9c744.png

 

image.png.1b4e116c067f172d2a64865260a96aff.png

image.png.342829806c7a3891a6f68534cc0c752f.png

 

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

image.png

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...