Jump to content

Search the Community

Showing results for tags 'html block'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Caspio Bridge
    • General Questions
    • Caspio JavaScript Solutions
    • Tables, Views and Relationships
    • Import/Export and DataHub
    • DataPages
    • Deployment
    • Security, Authentications, Roles, SAML
    • Styles and Localizations
    • Parameters
    • API and Integration
    • Calculations and aggregations
    • User JavaScript and CSS Discussions

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


MSN


Website URL


ICQ


Yahoo


Skype


Location


Interests

Found 11 results

  1. I have a HTML Block displaying a QR Code from an URL I received here: However I would like the data to be used to populate the QR Code be from a table called tbl_btc_address in a column called bitcoin_address and also select the first value that is not ticked (No). Could someone please help in this custom request?
  2. Hi, I am trying to embed multiple calculated fields in my HTML Block with the website raw HTML code, but it changes the structure and look which is not desirable. Could someone please troubleshoot for me where I'm going wrong? What it should look like: (This is with individual datapages embedded in each block) What it comes out as: (When I try to combine all of it in one datapage) Here is the original HTML: <div class="container-fluid"> <div class="d-sm-flex justify-content-between align-items-center mb-4"> <h3 class="text-dark mb-0">Dashboard</h3><a class="btn btn-primary btn-sm d-none d-sm-inline-block" role="button" href="#"><i class="fas fa-download fa-sm text-white-50"></i>&nbsp;Generate Report</a> </div> <div class="row"> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-primary py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-primary font-weight-bold text-xs mb-1"><span>Earnings (monthly)</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>$100,00</span></div> </div> <div class="col-auto"><i class="fas fa-calendar fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-success py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-success font-weight-bold text-xs mb-1"><span>Earnings (annual)</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>$215,000</span></div> </div> <div class="col-auto"><i class="fas fa-dollar-sign fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <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>Tasks</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>50%</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: 50%;"><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> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Pending Requests</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>18</span></div> </div> <div class="col-auto"><i class="fas fa-comments fa-2x text-gray-300"></i></div> </div> </div> </div> </div> </div> </div> And here is the HTML in my HTML Block in a Datapage: (HTML Block 2 has 4x </div> to hide the calculated fields) <div class="container-fluid"> <div class="d-sm-flex justify-content-between align-items-center mb-4"> <h3 class="text-dark mb-0">Dashboard</h3> </div> <div class="row"> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Trade Growth</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:1#]%</span></div> </div> <div class="col-auto"><i class="fas fa-database fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Average Growth</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:2#]%</span></div> </div> <div class="col-auto"><i class="fas fa-wave-square fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Last 7 days</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:3#]%</span></div> </div> <div class="col-auto"><i class="fas fa-sort-amount-down fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div class="col-md-6 col-xl-3 mb-4"> <div class="card shadow border-left-warning py-2"> <div class="card-body"> <div class="row align-items-center no-gutters"> <div class="col mr-2"> <div class="text-uppercase text-warning font-weight-bold text-xs mb-1"><span>Previous Trade</span></div> <div class="text-dark font-weight-bold h5 mb-0"><span>[@calcfield:4#]%</span></div> </div> <div class="col-auto"><i class="fas fa-backward fa-2x text-gray-300"></i></div> </div> </div> </div> </div> <div style="display:none;"><div>
  3. 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
  4. I have a Submit form where I select a client account in a dropdown and it displays the account info in fields below via cascading auto complete. Instead of using a dropdown and fields, can I instead load/display the table data (account info) in an HTML block using parameters? or any other way?
  5. I need to set up a multi-column lookup list in the middle of a datapage. I have looked extensively and have not yet found an example. It would seem that others may have had this need. It looks like the existing listbox is not set up, yet, to handle multiple fields/columns. I am open to a HTML block solution, but, I don't know enough HTML myself to know how to build a multi-row, multi-column table dynamically that ties to a table. (the count of qualified records varies depending on the client business being profiled). The solution may be a data array built in javascript with nested for loops, that would feed the HTML table. I also have another multi-column lookup list where the cells/values of one of the columns needs to be editable. Currently records in the listbox control are not editable. I can build a static HTML table that includes edit boxes. The challenge here might be how to make this dynamic off a lookup dataset and insure that changed values in those edit boxes write back to the table they came from. I've even looked at an alternative solution of setting up a separate results table on a different datapage and then embed that in the middle of the datapage. But, currently Caspio does not seem to have the ability to embed a small tabular object from one datapage, into another. (The only way to do this seems to be to mash up two datapages on a webpage... but this does not give the user the in-line experience. Looking for expert guidance. Thanks in advance for any suggestions. Again, it seems like several other Caspio developers would have a use for such a solution. (maybe one is obvious and I am just not seeing it.) Thanks!
  6. Hi everyone, Does anyone know how to render a calculated field as HTML? I tried outputting HTML tags inside calculated fields, but they display as plain text. Thanks in advance. -dspolyglot
  7. I'm looking to display the the record count for a tbale in the header of a chart datapage and I'm not sure how to accomplish this. I have a table called tblEventRegistration and I would like show the query results of: 'SELECT Count(tblEventRegistration.ERID) AS TotalReg FROM tblEventRegistration;' . I was told that I could be done with a java script but I'm not sure how to access the data. Any help would be greatly appreciated.
  8. Hello everyone - I have a Calendar dataPage and I added a Calculated field and a link in it. I need a JS to hide the Link I created if the Calculated Field is not NULL or blank
  9. I am trying to build a div-based table in a Tabular Report. I have deleted all of the fields and included a Header/Footer and HTML block. I have turned off the HTML Editor which kept closing my <div>s automatically Problem: Titles (cell header) don't line up over top the grid properly. The first one covers the entire table and the next three are pushed right as though they are being added after the table. I'm confused. I thought I'd be able to build table-based divs with the HTML blocks of Caspio. *********************************************************************************** The header block: <style media="screen" type="text/css">.table { display:table; } .row { display:table-row; } .cell { display:table-cell; padding:2px; } .header { font-weight:bold; text-align:center; } </style> <strong>[@field:tblProduct_strProductName]</strong> <hr /> Sample Size: [@field:tblProduct_dblSampleSize#]&nbsp;[@field:tblProduct_strSampleSizeUnit] <hr /> <div class="table"> <div class="row"> <div class="cell header">Field 1</div> <div class="cell header">Field 2</div> <div class="cell header">Field 3</div> <div class="cell header">Field 4</div> </div> *********************************************************************************** The HTML Block <div class="row"> <div class="cell"><strong>[@field:tblProductAssay_strAssayName]</strong></div> <div class="cell">[@field:tblProductAssay_dblNormalLow#]-[@field:tblProductAssay_dblNormalHigh#]&nbsp;[@field:tblProductAssay_strNormalUnit]</div> <div class="cell">[@field:tblProductAssay_dblAMRLow#]-[@field:tblProductAssay_dblAMRHigh#]&nbsp;[@field:tblProductAssay_strAMRUnit]</div> <div class="cell">[@field:tblProductAssay_memIFU]</div> </div> *********************************************************************************** The footer block </div>
  10. Hi- I've searched boards and knowledge base and can't seem to find an answer for this one: In the Details page of my Report I have social media icons that connect to each person's FB, Twitter, etc pages. I did this by putting the icon image in an html block and then linking that icon to the appropriate field. Works like a charm! Only problem is that there isn't an easy checkbox, like a regular image would have, that allows you to hide the image when the field is blank, so....I guess I need to know: How do I hide an html block when the field inside it is blank? Or, do I need to set this up differently in order to be able to hide the social media icon when the field is blank? Thanks in advance for your suggestions!
  11. Hi Support team I created a table and this table records will be created by user when the run a Form. In this form, I try records user GEO location. I attached a HTML Block into the form. Please see the code : Once user to execute this form and click submit, user GEO location will be updated into the table by field Latitude and Longitude. I have tried so many time, but stiff not successful to update this two field. Can you please help to check what is the missing, please? Regards Patrick Li ------------------------------------------------- </div> <script> if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(GEOprocess, GEOdeclined); } else{ document.getElementById('geo').innerHTML = 'Your browser do not support geo-location.'; } // called when the browser has shown support of navigator.geolocation function GEOprocess(position) { gLongitude = position.coords.longitude; gLatitude = position.coords.latitude; console.log('latitude: ' + gLatitude + ' ; longititude: ' + gLongitude); // update the page to show we have the lat and long //document.getElementById('geo').innerHTML = 'Latitude: ' + position.coords.latitude + ' Longitude: ' + position.coords.longitude; document.write(document.getElementbyId('geo')(position.coords.latitude([@field:Latitude]))) </script> ----------------------------------------------------------------------------------------
×
×
  • Create New...