Jump to content

Alexray

Members
  • Posts

    7
  • Joined

  • Last visited

  • Days Won

    2

Alexray last won the day on December 24 2021

Alexray had the most liked content!

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

Alexray's Achievements

  1. Hello @RossChevalier, You can find the 'Delete' button under the drop-down 'More' If you do not see these buttons when you hover the task, then you need to clean the cookies of the browser. Hope it helps.
  2. Hello @ChristopherNORD, There are 2 ways to set the height for multiple iFrames, depending where you add them: 1) If you add a few DataPages with iFrames into another DataPage, then you can use '.contentWindow' because the the domain will be the same. <script> document.addEventListener('DataPageReady', function (event) { let frames = document.querySelectorAll("#caspioform iframe"); for (let frame of frames) { frame.onload = function(){ let frameHeight = frame.contentWindow.document.body.scrollHeight; frame.style.height = frameHeight + 16 + 'px'; }; } }); </script> 2) In case you embed a few iFrames into your website, then we can't use '.contentWindow', but we can use '.postMessage' and provide mesages outside the frame with their names: <!-- Add to the Footer of the DataPage 1 --> <script> document.addEventListener('DataPageReady', function() { let frame ={frame1 : document.documentElement.scrollHeight}; parent.postMessage(frame, "*"); }) </script> <!-- Add to the Footer of the DataPage 2 --> <script> document.addEventListener('DataPageReady', function() { let frame ={frame2 : document.documentElement.scrollHeight}; parent.postMessage(frame, "*"); }) </script> <!-- Add to the webpage where you wish to display 2 or more iFrames --> <iframe id="frame1" name="" src="" title="" width="100%">Sorry, but your browser does not support frames.</iframe> <iframe id="frame2" name="" src="" title="" width="100%">Sorry, but your browser does not support frames.</iframe> <script> var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; var eventer = window[eventMethod]; var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; eventer(messageEvent,function(e) { document.querySelector("#frame1").style.height = e.data.frame1 + 'px'; document.querySelector("#frame2").style.height = e.data.frame2 + 'px'; },false); </script> Make sure that you have same IDs for your iFrames or change them in the code. Hope it helps.
  3. Hi everyone, I wish to share JavaScript that can help you to highlight some records based on the condition. First you need to do for that is to paste the code into the Header: <script> const backgroundColor = '#ff000094' const numberOfColumnForCondition = '5'; const condition = 'High'; document.addEventListener('DataPageReady', function(event) { let lines = document.querySelectorAll('tr[data-cb-name="data"]'); for (let line of lines) { if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) { line.style.backgroundColor = backgroundColor; } } }) </script> Also you need to adjust first 3 lines of the code: 1) const backgroundColor = '#ff000094' This constant is used for setting the color of the background. 2) const numberOfColumnForCondition = '5'; The number 5 is the number of the column where we are going to check the condition. 3) const condition = 'High'; High is the value of our condition. So, in our example, we are going to highlight fields (rows) where the value in the 5th column equals 'High'.
  4. Hello. Here is one more way to do the same: <a id='aLink' href="[@app:URL_1]">Caspio</a> <script> document.addEventListener('DataPageReady', function (event) { if (document.querySelector('.cbResultSetDataRow[data-cb-name="data"]') == null) { document.querySelector('#aLink').style.display = 'none' } }); </script>
  5. Hello Caspio Family, Unfortunately, Caspio doesn't have a feature that would allow validating the date before the Submission Form. The only way I found using Caspio standard features is to show a warning message when the date doesn't fit the condition (e.g. when the date should not be prior to today). You can do that with the help of rules. I will show you an example with two dates 'Start Date' and 'End Date' with conditions: the Start Date shouldn't be prior to today and the End Date should not equal or be before the Start Date. 1) Add 2 HTML blocks beneath each Date field and add a section to each HTML block 2) Inside HTML blocks we need to add some warning message in case the condition is not met 3) Create 2 Rules as on screenshots That solution will show our warning messages, but won't prevent form submission if a user disregards the warning. But if it is necessary to let users submit only correct dates, you can use the second solution with JavaScript: 1. Insert Header&Footer, HTML block 1, HTML block 2, and place them below our Date fields. No need to add extra sections. 2. In the Header enable 'Source' and paste the code:<script>document.addEventListener("BeforeFormSubmit", function (event) {startDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;warn1 = document.querySelector("#warning1");warn2 = document.querySelector("#warning2");var today = new Date();var dd = String(today.getDate()).padStart(2, '0');var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!var yyyy = today.getFullYear();today = mm + '/' + dd + '/' + yyyy;if (startDate < today) {event.preventDefault();warn1.style.display = 'block'} else {warn1.style.display = 'none'}if (endDate <= startDate) {event.preventDefault();warn2.style.display = 'block'} else {warn2.style.display = 'none'}});</script> 3. In the HTML block 1 enable 'Source' and paste:<span id="warning1" style="color:#FF0000;display:none;">Start date cannot be in the past or empty</span> 4. In the HTML block 2 enable 'Source' and paste:<span id="warning2" style="color:#FF0000;display:none;">End date cannot be prior or same as Start date or empty</span> 5. Make sure your datafield 1 and datafield 2 are called 'DateStart' and 'DateEnd' respectively or in the JavaScript added to the Header you need to replace in the linesstartDate = document.querySelector("#InsertRecordDateStart").value;endDate = document.querySelector("#InsertRecordDateEnd").value;to the name of the fields you have. You can test to see how it works on my DataPages: 1st solution with Rules 2nd solution with JS
  6. Hi Ron, Is the form submitted even you click cancel? If yes, then I will need to check your DataPage. Please provide the deployed URL and test credentials if you have authentication. Regards, Alex
  7. Hello Caspio Family, I wish to share a JS code snippet with you, in case if you wish your users to confirm form submission if a certain condition is met. For example, if some field is empty. Let's say we have a text field for email which is not required. When that field is empty, we wish to ask our visitors if they are sure they want to submit the for without the email. document.addEventListener("BeforeFormSubmit", function (event) { if (document.getElementById("InsertRecordEmail").value == "") { event.preventDefault(); if (confirm("Are you sure you want to submit the form without your email?")) { document.forms["caspioform"].submit(); } } }); Let me know who thinks it is useful.
×
×
  • Create New...