Jump to content


Caspio Guru
  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by Hastur

  1. Hello! To change the color you need to use additional JS code. It will parse the data in chart and change the color according to name of the column. Here is the code: <script type="text/javascript"> document.addEventListener('DataPageReady', chartUpdateHandler); function chartUpdateHandler(event) { var cleaner = function(interv) { clearInterval(interv); } let interv = setInterval(() => { if (!!Highcharts) { const options = Highcharts.charts[0].series[0].data; let data = []; options.forEach(option => { let localData = {}; localData.y = option.y; localData.name = option.name; if(option.name === "(blank)") { localData.color = '#ee5921'; } else { localData.color = '#3186AD'; } data.push(localData); }) Highcharts.charts[0].update({ series: { data: data } }); cleaner(interv); } }, 200); } </script> You need to insert this code into the Header of the report DataPage. Do not forget to disable the HTML editor.
  2. Hello @CoopperBackpack You may use additional JS code to implement this workflow: <script type="text/javascript"> document.addEventListener('DataPageReady', fileInputEvent) function fileInputEvent() { document.querySelector("#InsertRecordFile_f"),addEventListener('change', fileInputHandler); // use the InsertRecord[your file field name] instead document.removeEventListener('DataPageReady', fileInputEvent) } function fileInputHandler(event) { const fileSizeInput = document.querySelector('#InsertRecordFile_size'); // use the InsertRecord[your file size field name] instead fileSizeInput.value = event.target.files[0].size; } </script> Insert this code into the header of the submission form. Do not forget to disable the HTML editor. For the file size field use the Number data type. You also may make the size field hidden in the submission form.
  3. @davidhshugar I have improved the solution to work without reloading. You need to add one additional HTML block with this code: <p id="ancor"></p> The following code should be int the Header: <script type="text/javascript"> document.addEventListener('DataPageReady', submitHandler); function submitHandler() { let submissionForm = document.querySelector('form[action^="your_deploy_URL"]'); submissionForm.style.display = 'none'; if(document.getElementById('ancor') !== null) { document.removeEventListener('DataPageReady', submitHandler); submissionForm.submit(); } document.removeEventListener('DataPageReady', submitHandler); } </script> To make it work, DataPage itself should either redirect OR show the message after the submission.
  4. Hello @CoopperBackpack You need to use some additional JS to handle the scroll This code needs to be inserted in the Header of the DataPage you open through the link: <script type="text/javascript"> document.addEventListener('DataPageReady', scrollHandler) function scrollHandler(event) { parent.postMessage('scrollHandler', '*'); document.removeEventListener('DataPageReady', scrollHandler) }; </script> This code needs to be placed in your CMS system before the deploy code of the DataPage: <script> window.addEventListener("message", receiveMessage, false); function receiveMessage(event){ if (event.data === 'scrollHandler') { window.scroll(0, 0); } } </script>
  5. Hello @CoopperBackpack You can insert this snippet of code into your submission form Header: <style> .cbFormFieldCell { position: relative; width: 50%; } .cbFormFieldCell .floating-label { position: absolute; color: gray; font-size: 13px; pointer-events: none; top: 11px; left: 20px; transition: 0.2s ease all; } .cbFormFieldCell input:focus ~ .floating-label, .cbFormFieldCell input:not(:focus):valid ~ .floating-label { top: 0px; left: 10px; font-size: 10px; opacity: 1; background-color: white; padding: 0 3px; } </style> <script> document.addEventListener("DataPageReady", placeholderHandler); function placeholderHandler() { const labels = document.querySelectorAll('.cbFormLabelCell'); const inputs = document.querySelectorAll('.cbFormFieldCell'); for(let i = 0; i < labels.length; i++) { if (inputs[i].children[0].type === 'text') { labels[i].children[0].classList.add("floating-label"); inputs[i].children[0].setAttribute("required", true); inputs[i].appendChild(labels[i].children[0]); labels[i].remove(); } } console.log(labels); } </script> You also can customize the placeholder adjusting the properties in the style tag of the code.
  6. @GPJ11 Can you specify the DataPage element type and the Data Type of the field you use? You may send the print screens. It is critical to create the script
  7. @BruceA 1. You can use the Formula field on the table level to add needed number of zeros. 2. You can use calculations in Update blocks as well if you add select into the Join directly and enable Group By. This is just the visual example without any logic behind.
  8. @benrob You an try the following: 1. Place this code outside of the iFrame deployment above the deploy code: <script type="text/javascript"> window.addEventListener("message", receiveMessage, false); function receiveMessage(event) { document.querySelector('iframe[name="Search and Report"]').height = event.data } </script> 2. Insert this code into the Result set of the Report: Header: </header> <div id="wrapper"> <header> Footer: </footer> </div> <footer> <script type="text/javascript"> document.addEventListener('DataPageReady', resizeHandler) function resizeHandler(event) { let heightVal = document.getElementById('wrapper').offsetHeight + 150; parent.postMessage(heightVal, '*'); document.removeEventListener('DataPageReady', resizeHandler) }; </script> Do not forget to use the name of your DataPage instead of "Search and Report"
  9. Hello @kpcollier You can use this code: <script type="text/javascript"> document.addEventListener('DataPageReady', assignAdditionalListeners) function assignAdditionalListeners() { document.querySelector('input[id^="InsertRecordtext_f0"]').addEventListener('change', customAlert); // change ID document.querySelector('input[id^="InsertRecordtext_f1"]').addEventListener('change', customAlert); // change ID document.querySelector('input[id^="InsertRecordtext_f2"]').addEventListener('change', customAlert); // change ID document.querySelector('input[id^="InsertRecordtext_f3"]').addEventListener('change', customAlert); // change ID document.querySelector('input[id^="InsertRecordtext_f4"]').addEventListener('change', customAlert); // change ID document.querySelector('input[id^="InsertRecordtext_f5"]').addEventListener('change', customAlert); // change ID document.removeEventListener('DataPageReady', assignAdditionalListeners) } function customAlert(event) { alert(event.target.value); } </script> You need to place the code in the header of the form. Do not forget to disable the HTML editor in the advanced section of the footer. You need to change the ID according to the name of the field you use. In the Example I have name as "InsertRecordtext_f0". If your field has name "Reason", you should name ID like this - "InsertRecordReason0".
  10. @benrob You may use this code in the Result set of the Report: 1. Header - </header> <div id="wrapper"> <header> 2. Footer - </footer> </div> <footer> <script type="text/javascript"> document.addEventListener('DataPageReady', resizeHandler) function resizeHandler(event) { let heightVal = document.getElementById('wrapper').offsetHeight + 150; // Change 150 according to the height of the search form var localWindow = window.parent.document.querySelector('iframe[name="Search and Report"]').style; // Change the name of the DataPage localWindow.height = heightVal + 'px'; document.removeEventListener('DataPageReady', resizeHandler) }; </script> If you still see scroll, change the 150 value as mention in the code. Also, you need to use the name of your DataPage instead of "Search and Report"
  11. @guardmetrics You may use this formula: CAST((( DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) - (DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) ) / 60) AS nvarchar) + ':' + CASE WHEN LEN(CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar)) = 1 THEN '0' + CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar) ELSE CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar) END
  12. Hello @crionsynx You may use additional formula field to get needed layout. Here is the example: CONVERT(nvarchar, [@field:asdwasd], 101) + ' ' + CONVERT(nvarchar, [@field:asdwasd], 108)
  13. Hello @Jaymee Try to insert this code in the header of the DataPage result set <script type="text/javascript"> document.addEventListener('DataPageReady', hideBlankHandler) function hideBlankHandler() { let labels = document.querySelectorAll('.cbResultSetListViewDataLabel '); let values = document.querySelectorAll('.cbResultSetData'); console.log(labels , values) for (let i = 0; i < values.length; i++) { if (values[i].innerHTML === "&nbsp;") { labels[i].remove(); values[i].remove(); } } } </script> You need to check two thing. First - your DataPage has the Responsive option enabled Second - you need to disable the HTML editor of the Header
  14. Hello @KevinCeres You can achieve this using standard features. You can add the Virtual field to your form with 2 option: stay at form after submission or go next. The values of these radio buttons should be links. Based on the choice, your user will be redirected to the same page (reload) or to a new one. Check the print screens:
  15. @guardmetrics The calculated field should look like this in: CAST((( DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) - (DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) ) / 60) AS nvarchar) + ':' + CAST((DATEDIFF(minute, [@field:Patrol_Activity_Database_Date], [@field:Patrol_Activity_Database_1_Date]) % 60) AS nvarchar) Also you may find other examples here -
  16. @Vipul There are two ways to implement such a workflow. 1. You can create triggered action to update to Total price of the order when the users submits new item. It most cases, it requires 3 triggers on each event (insert, update, delete) and it is not the easiest thing to implement. 2. The second approach is to create the calculated field on the DataPage level to sum prices of all items per order ID. Example: SELECT SUM(Item_Price) FROM Order_tbl WHERE Order_ID = [@field:Order_ID] You need to change the names of the fields and tables according to your local names.
  17. @DesiLogi Hello! To implement Such a iframe, your files should do the following: 1. Place PDF files in some folder 2. Enable the CDN FileStore Also, the code should look like this: <script type="text/javascript"> document.addEventListener('DataPageReady', embed_pdf); function embed_pdf(){ var pdf_link = "[@field:PDF_File/]"; if(pdf_link === "") { return null; } var google_link= "https://docs.google.com/gview?url="; var google_param = "&embedded=true"; var encoded_pdf_link = encodeURIComponent(pdf_link); var iframe_window = document.getElementById("iframe_pdf"); iframe_window.style.display = "block"; iframe_window.src=google_link + encoded_pdf_link + google_param; document.removeEventListener('DataPageReady', embed_pdf); } </script> You can place the code with iframe in any place of your DataPage. <iframe id="iframe_pdf" style="width:80%; height: 1100px; display: none;" align="middle" frameborder="0"></iframe>
  18. @rush360 The script you use now does not make any sense as it sets the .onload listener at the moment when DataPage is ready. It is like you trying to go home when you are already at home... You may create function to check each parameter and then hide the appropriate block. Example: <script type="text/javascript"> function hideBlocks() { var zipValue = '[@field:Zip3]'; if(zipValue === '') { document.getElementById('box1').style.display = 'none'; } document.removeEventListener('DataPageReady', hideBlocks); } document.addEventListener('DataPageReady', hideBlocks); </script> <!-- Your HTML code --> <div id="box1" style="background:#eee;border:1px solid #ccc;padding:5px 10px;"> <p>[@field:Address3_Type] [@field:Verb3]</p> <br /> <p>[@field:Address3_Time@] [@field:Address3_Time*]</p> <hr /> <p>Address:</p> <br /> <p>[@field:Address3]</p> <br /> <p>[@field:City3], [@field:State3]</p> <br /> <p>[@field:Country3], [@field:Zip3]</p> </div>
  19. Hello @HughOD You may add the wrapper to your DataPage using header and footer. Here is the example for responsive DataPages: <!-- Code in the Header starts --> </header> <div class="YOUR_CUSTOM_CLASS"> <header> <!-- Code in the Header ends --> DATAPAGE <!-- Code in the Footer starts --> </footer> </div> <footer> <!-- Code in the Footer ends --> And for the non-responsive DataPages: <!-- Code in the Header starts --> </div> <div class="YOUR_CUSTOM_CLASS"> <div> <!-- Code in the Header ends --> DATAPAGE <!-- Code in the Footer starts --> </div> </div> <div> <!-- Code in the Footer ends --> Also, you may find a lot of information about CSS selectors here - https://www.w3schools.com/cssref/css_selectors.asp
  20. @HughOD I cannot replicate the issue. May you try to open the page again?
  21. @steven9 In Caspio you need third table to create many-to-many relationship. Here is the video about this thing -
  22. @roattw You may try using the Section to group these 3 field and set the amount of columns as 3.
  23. @roattw Do you use Sections of "Continue next element on the same line" checkbox to place fields in this way?
  24. Hello @Alwayslost You may change the style of the Calendar in the Style section. You even can upload your custom images. See the example:
  • Create New...