ivan77

Hi @ivan77,
I came across a forum thread that addresses a similar issue, and it might offer the solution you're looking for. You can explore the discussion for potential solutions and insights.
Thank you, and I hope this helps!
 

Hello!
You also may use iMask framework to implement any kinds of masks.
Here you can find information related to iMask - https://imask.js.org/
Example:
Let's implement the mask: 000-000-0000
To do that you need to follow these steps:
1. Add the "iMask.js" file as APP parameter with the File type.


2. Add the following snippet of code into the header of your datapage:
<script src="[@app:iMask/]"></script> <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { var phoneMask = IMask( document.getElementById('ID_OF_YOUR_INPUT'), { mask: '000-000-0000' }); }); </script>
You should use the ID value of your input instead of "ID_OF_YOUR_INPUT".
Please find the iMask.js file attached - iMask.js

Thanks a lot @CoopperBackpack It works as expected
Rgds,

Hi @ivan77,
Thank you for your clarification. 
Since labels on the Pivot table have the same classes, you may test the following approach: add styles to the Header section of the DataPage and reference the fields by their position number.
On your screenshot the highlighted fields are the 3rde and the 4th fields, so please test the code:
<style> th[class*="cbResultSetHeaderCell"]:nth-of-type(3), th[class*="cbResultSetHeaderCell"]:nth-of-type(4) { text-align: right; } td[class*="cbResultSetData"]:nth-of-type(3), td[class*="cbResultSetData"]:nth-of-type(4) { text-align: right; } </style>  

Hi there,
If you need to prevent some actions in your application made not by real people, this post is for you.
I am going to explain how easuly add Google reCAPTCHA v2 to any DataPage.

All you need is to have a Google account.

First, you need to create a key http://www.google.com/recaptcha/admin
This is very simple, you just need to type any label yuo wish, choose reCAPTCHA v2 and preferable validation method. I am going to use "I'm not a robot".
It is important to add domain of all the websites where you are going to use the DataPage. In case you are going to use only URL deployment option, the domain of your account, like 'AccountName.caspio.com' will be enough. Where 'AccountName' is a name of your Caspio account that you can find following  'Help->About Caspio'.
After creating a key you will see your site key that you will need to use later.

Second step is to add 2 snippets of code:
1) That part should be added to the Head tag on your own website or to the Header of the Configure Fields screen when you edit your DataPage:
<script type="text/javascript"> document.addEventListener("BeforeFormSubmit", function (event) { if(grecaptcha.getResponse().length == 0){ event.preventDefault(); alert('Please pass reCaptcha to verify you are not a robot') } }); </script> <script src="https://www.google.com/recaptcha/api.js" async defer></script> Before pasting do not forget to either uncheck the checkbox 'Enable HTML editor' in the Advanced tab or enable 'Source'.
2) Then you need to add HTML block where you wish reCaptcha to apper on your DataPage and add the next code:
<div><div class="g-recaptcha" data-sitekey="YourSiteKey"></div></div>  Where 'YourSiteKey' should be replaced with your site key.
 
The last step is to relax and stay assured that no robots will be able to mess up your data.

Hi @MechaNik,
You can remove the "Sum of" by modifying your Localization. First, go to your DataPage's Localization. Then, click Edit > Result Pages > Labels and Markers > Value columns.
You can see that its default value is "%f of %c". You can simply remove "%f of" and just leave the "%c" for the label.

I hope this helps! 

Hey Carlson,
 
Your question is a bit off-topic to this thread, but the answer to your question is yes, you may.
 
If you wanted to "hide" the Delete button in general (NOT record-specific), you may paste>modify this code on your Footer with HTML Editor disabled in the Advanced tab:
<script> var condition = ("[@authfield:role]" != "admin"); //Your condition /*Edits are not necessary from this point onward */ var deleteButtons = document.querySelectorAll('[data-cb-name="InlineDelete"]'); if(condition) { deleteButtons.forEach(function (elem) { elem.style.display = "none"; }); } </script>  
====
A per-record implementation is a bit more complex, paste the following code snippets in their respective places  with HTML Editor disabled. The only modification needed is the "condition"
Header
<script> var toHide = []; function hideDelete(idx, cond) { if (cond) toHide.push((idx-1)*2); } </script>  
HTML Block
<script> var condition = ("[@field:created_by]" == "[@authfield:userid]"); hideDelete([@cbRecordIndex], condition); </script>  
Footer
<script> var deleteButtons = document.querySelectorAll('[data-cb-name="InlineDelete"]'); toHide.forEach(function(elem) { deleteButtons[elem].style.display = "none"; deleteButtons[elem+1].style.display = "none"; }) </script>  
I hope this helps.
If you have questions, I'd suggest to start another forum thread then mention me in there to keep this thread clean.
 
Happy new year!
 
Cheers,
DN31337

Hello @ivan77,
As far as I understood, you need to apply styling to the Calculated field on the Details page of the Report. 
 
If you have multiple Calculated fields on the page, you may refer to them in the following way: 
div[data-cb-cell-name^="EditRecordCalculated_Field_1_"] + div > span.cbFormCalculatedField 
Where 1 stands for the Calculated Field 1.  Please change it to refer to the needed field.
You may test this code in the Header:
<style> div[data-cb-cell-name^="EditRecordCalculated_Field_1_"] + div > span.cbFormCalculatedField { color: #008ee4; font-size: 20px; } </style> Result:

I found this solution, and it works for my needs. Put this on header section
<style>
.cbResultSetTotalsRow {visibility:collapse !important;}
.cbResultSetGroup1Row {visibility:collapse !important;}
</style>

Hello @rush360,
Please add this code to the Footer and test. It works on my end.
<script> document.addEventListener('DataPageReady', changeColSpan); function changeColSpan() { var elem = document.querySelector('.cbResultSetTotalsLabelCell'); var currentColSpan = elem.colSpan; elem.colSpan = currentColSpan - 4; // 4 is a number of hidden columns, you may change the value if needed document.removeEventListener('DataPageReady', changeColSpan); } </script> Hope this helps!

Yes, it works.
Thanks @CoopperBackpack

Hello @ivan77,
I checked adding an image in PDF.  As I can see, when 'Styled image (right)' is applied it adds class="right". And it looks like this CSS class doesn`t work. 
You can see this when you click the 'Source' button.

 
Please test the following:
1) Click the 'Source' button and delete class="right"
2) Apply the alignment under the 'Image Properties'

This added the float: right property that works correctly.
 
 

Yes it Works, Thanks a lot @CoopperBackpack

Hello @ivan77,
As I can see the field you mentioned is the second field and grouping is applied to the 1st and 2nd fields. 
If this is correct, you may test the following solution:
1) As of now you have the 'No Label' Group aggregation label as far as I understand

2) This code should be added to the Footer section of the Results page (disable the HTML editor on the Advanced tab before pasting the code):
<script> document.addEventListener('DataPageReady', function (event) { let secondGroupLabels = document.querySelectorAll('td[class*="cbResultSetGroup2Label"]'); let subtotalLabel = document.querySelectorAll('td[class*="cbResultSetGroup2SubTotal"]'); secondGroupLabels.forEach((label, index) => { subtotalLabel[index].innerText = 'Sub Total ' + label.innerText; }); }); </script> Hope this helps!