Jump to content

nightowl

Caspio Ninja
 View Profile  See their activity

  • Posts

    55

  • Joined

  • Last visited

  • Days Won

    5

 Content Type 

Everything posted by nightowl

  1. nightowl
    Hi NeoInJS, Please put the following code in the Header section of your DataPage (with Source button enabled): <style> tr > td:nth-of-type(2) { text-align: left; } </style> Hope this helps.
  2. nightowl
    Hi dspolyglot, You can also try the following: [RECOMMENDED] Create an external HTML file in your web hosting provider. [OR] you can also create an HTML DataPage. Use this code inside the <body> element: <!-- iframe container --> <div id="cb-iframe-container"></div> <!-- REFERENCE: http://stackoverflow.com/questions/9249680/how-to-check-if-iframe-is-loaded-or-it-has-a-content --> <script type="text/javascript"> function checkIframeLoaded() { // Get a handle to the iframe element var iframe = document.getElementById('cb-iframe-1'); var iframeDoc = iframe.contentDocument || iframe.contentWindow.document; // Check if loading is complete if (iframeDoc.readyState === 'complete') { // The loading is complete. Call the function we want executed once the iframe is loaded setIframeDimensions(iframe); return; } // If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds window.setTimeout('checkIframeLoaded();', 100); } </script> <script type="text/javascript"> var previousHeight = '0px'; var previousWidth = '0px'; </script> <!-- REFERENCE: http://www.dyn-web.com/tutorials/iframes/height/demo.php --> <script type="text/javascript"> function setIframeDimensions(iframe) { var doc = iframe.contentDocument ? iframe.contentDocument : iframe.contentWindow.document; // Reset to minimal height and width iframe.style.height = '10px'; iframe.style.width = '10px'; iframe.style.visibility = 'hidden'; // IE opt. for Bing/MSN needs a bit added or scrollbar appears iframe.style.height = getDocHeight(doc) + 4 + 'px'; iframe.style.width = getDocWidth(doc) + 4 + 'px'; iframe.style.visibility = 'visible'; // Detect height and/or width changes previousHeight = (iframe.style.height === previousHeight) ? previousHeight : iframe.style.height; previousWidth = (iframe.style.width === previousWidth) ? previousWidth : iframe.style.width; } function getDocHeight(doc) { doc = doc || document; // REFERENCE: https://stackoverflow.com/questions/1145850/ var body = doc.body, html = doc.documentElement; var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight, 600 ); return height; } function getDocWidth(doc) { doc = doc || document; // REFERENCE: https://stackoverflow.com/questions/1145850/ var body = doc.body, html = doc.documentElement; var width = Math.max( body.scrollWidth, body.offsetWidth, html.clientWidth, html.scrollWidth, html.offsetWidth, 1024 ); return width; } </script> <!-- REFERENCE: http://stackoverflow.com/questions/10418644/creating-an-iframe-with-given-html-dynamically --> <script type="text/javascript"> // TODO: Change the site and appkey as necessary --> var site = 'YOUR_SITE.caspio.com'; // EXAMPLE: c5gaf330.caspio.com var appkey = 'YOUR_APPKEY'; window.onload = function () { parent.createIframe(site, appkey); } function createIframe(site, appkey) { var iframe = document.createElement('iframe'); iframe.id = 'cb-iframe-1'; iframe.style.borderStyle = 'none'; var customContent = document.getElementById('cb-iframe-container'); var oldIframe = document.getElementById('cb-iframe-1'); if (oldIframe) { customContent.removeChild(oldIframe); } customContent.appendChild(iframe); var link = 'https://' + site + '/dp.asp?AppKey=' + appkey; var id = 'cb' + appkey; var html = '<scr' + 'ipt type="text/javascript" src="https://' + site + '/scripts/embed.js"></scr' + 'ipt><scr' + 'ipt type="text/javascript">try{f_cbload(true, "' + site + '", "' + appkey + '");}catch(v_e){;}</scr' + 'ipt><div id="cxkg"><a href="' + link + '">Click here</a> to load this Caspio <a href="http://www.caspio.com" target="_blank" title="Cloud Database">Cloud Database</a></div><div id="' + id + '"><a href="https://www.caspio.com" target="_blank">Cloud Database</a> by Caspio</div>'; iframe.contentWindow.document.open(); iframe.contentWindow.document.write(html); iframe.contentWindow.document.close(); checkIframeLoaded(); } </script> Don't forget to update these two lines: // TODO: Change the site and appkey as necessary --> var site = 'YOUR_SITE.caspio.com'; // EXAMPLE: c5gaf330.caspio.com var appkey = 'YOUR_APPKEY'; Hope this helps. -nightowl
  3. nightowl
    Hi dspolyglot, Assuming that all of your fields have non-empty labels, you can try this trick: Add a Header/Footer section to your Details DataPage. Go to the Footer section. On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/ Then add this code: <script src="https://cdnjs.cloudflare.com/ajax/libs/he/1.1.1/he.min.js"></script> <script> // EXAMPLE 1: Calculated field is on position 2, with one field before it that has no label calcFieldAsHtml(2, 1); // EXAMPLE 2: Another calculated field is on position 6, with two fields before it that have no label. // The two fields mentioned here includes the no-label field from EXAMPLE 1 calcFieldAsHtml(6, 2); function calcFieldAsHtml(index, noLabelsBefore) { var childPos = (index * 2) - noLabelsBefore; var selector = 'span[class^="cbResultSetData"]:nth-of-type(' + childPos + ')'; var calcFields = document.querySelectorAll(selector); for (var calcField of calcFields) { // STEP 1: Align left inside the flex column calcField.style.display = 'inline-flex'; // STEP 2: Setup he.js options var options = { 'allowUnsafeSymbols': true, }; // STEP 3: Decode once calcField.innerHTML = he.decode(calcField.innerHTML, options); // STEP 4: Decode once more calcField.innerHTML = he.decode(calcField.innerHTML, options); } } </script> Hope this helps. -nightowl
  4. nightowl
    Hi DesiLogi, For Details page, it's not possible since the next/previous page is not yet available to the browser until you hit the pagination controls. On the other hand, if you're worried about incorrect page breaks on tabular/list reports, you can try wrapping the entire report in a <div> container using the Header/Footer section. And then try if the CSS page-break-after property will work for you: https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-after Hope this helps. -nightowl
  5. nightowl
    Hi Alwayslost, Yes. We only need to change the second line of the script. Here's the fully revised script: <script> var sortingControl = document.getElementById('asorting'); sortingControl.innerHTML = '<option value="|">No Sort</option>' + sortingControl.innerHTML; </script> Hope this helps. -nightowl
  6. nightowl
    HI dspolyglot, I tried this a long time ago and I was able to create a workaround. You can try the following and see if this still works: Add a Header/Footer section to your Gallery/List DataPage. Go to the Footer section. On the footer section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/ Then add this code: <script> var sortingControl = document.getElementById('asorting'); sortingControl.innerHTML += '<option value="|">No Sort</option>'; </script> [OPTIONAL] Then go to Search and Report Wizard - Results Page Options and disable AJAX: Hope this helps. -nightowl
  7. nightowl
    Hi NeoInJS, Sending an HTTP POST request comes to mind, but this method requires a back-end server to fetch the posted data. Here are the alternatives: Cookies Browser locationStorage or sessionStorage For the first option, cookies must be enabled in your browser. For the second option, you can take a look at my old forum post: Hope this helps. -nightowl
  8. nightowl
    Hi Sheila, This can be done in multiple ways: JavaScript: You might take a look at my other forum post below, although you might need to tweak the JavaScript a bit. See the REFERENCES section below for the link. Triggers: This is a new feature in the 9.9 release. See below for the link. REFERENCES: Multiple Values Separated by Commas Input: https://forums.caspio.com/topic/6770-multiple-values-separated-by-commas-input/?do=findComment&comment=21222 Triggered Actions (aka Triggers Feature): https://howto.caspio.com/tables-and-views/triggered-actions/ Hope this helps. -nightowl
  9. nightowl
    Hi dspolyglot, You can try this script inside an HTML block: <script> document.getElementById('EditRecordFIELD_NAME').value = '[@cbTimestamp]'; </script> Hope this helps.
  10. nightowl
    Hi oceaim, You can try this revised code: <script> var signatureField = [@field:Signature!]; $(document).ready( function () { var api = $('.sigPad').signaturePad({ displayOnly: true }); api.regenerate(signatureField); } ); </script> Hope this helps.
  11. nightowl
    Hi spazz1421, You can check out my forum post: Hope this helps.
  12. nightowl
    Hi NeoInJS, You can try something like this: <div id="row-marker-[@field:Teacher_ID]"></div> <script> var marker = document.getElementById('row-marker-[@field:Teacher_ID]'); var column = marker.parentNode; if ('[@calcfield:1]' === 'Alice') { var row = column.parentNode; row.style.display = 'none'; } </script> Hope this helps.
  13. nightowl
    Hi EveryPlace, I can that, as per MayMusic's solution, you do have the correct revision for your use case. But since you said that neither method works, i.e. MayMusic's solution or mine, can you please explain a bit further why is that so? -nightowl
  14. nightowl
    Hi Mylene, You can also try this script: <script> var checkboxesToCheck = [ // TODO: Add here the HTML IDs of checkboxes to check --> 'InsertRecordPublished', 'InsertRecordSubscribed', 'cbParamVirtual2', 'cbParamVirtual3', ]; var vfield = document.getElementById('cbParamVirtual1'); vfield.onchange = function () { checkboxesToCheck.forEach( function (id, index) { document.getElementById(id).checked = vfield.checked; } ); } </script>
  15. nightowl
    Hi NikkiC, Thanks for the comment. I just noticed that the script is meant to save the CSV values into separate columns (horizontally) and not into separate rows (vertically), as you wish. I need to correct the original reply. Going back to your question, this might need either: a custom trigger, or repeated submission via JavaScript Let me see if I can come up with a different script.
  16. nightowl
    Hi Kirkman, If you also want to duplicate a specific block/section of fields inside the DataPage, you can try the following: Add a Header/Footer section to your submission/update form. Go to the Header section. On the header section's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/ Then add this code: <!-- Header code --> <!-- Latest jQuery + jQuery Migrate --> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> Add an HTML block before the first field you want to include in the repeatable section. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/ Then add this code: <!-- BEGIN: Repeatable Section --> <table class="datapage-fields"> Add an HTML block after the last field you want to include in the repeatable section. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/ Then add this code: <!-- END: Repeatable Section --> </table> Add another HTML block after the HTML block in STEP #8. On the HTML block's Advanced tab, disable the HTML editor as mentioned in this article: http://howto.caspio.com/faq/web-forms/how-to-disable-html-editor-in-datapage-headerfooter-and-html-blocks/ Then add this code: <!-- HTML Block code --> <button class="add-space" style="display: inline-block !important; float: right;">Add Space</button> <!-- Custom scripts --> <script> $(document).ready( function (event) { var addSpaceButton = $('.add-space'); addSpaceButton.click( function (event) { event.preventDefault(); var dpFields = $('.datapage-fields').last(); var dpFieldsClone = dpFields.clone(); dpFields.after(dpFieldsClone); } ); } ) </script> Hope this helps.
  17. nightowl
    Hi dspolyglot, You can try creating an HTML block and put this template code: <div id="row-marker-[@field:ID_FIELD_NAME]"></div> <script> var marker = document.getElementById('row-marker-[@field:ID_FIELD_NAME]'); var column = marker.parentNode; if ('[@calcfield:1]' === '') { var row = column.parentNode; row.parentNode.removeChild(row); } </script> Please replace ID_FIELD_NAME with the actual name of your ID/AutoNumber field. Also, don't forget to replace [@calcfield:1] with the actual calculated field you're using. Hope this helps.
  18. nightowl
    Hi planet13, You can try this revised code: <script type="text/javascript"> function uppercase(field) { return function () { field.value = field.value.toUpperCase(); } } var fields = document.querySelectorAll('input[type="text"][id^="InsertRecord"]'); fields.forEach( function (field, index) { field.oninput = uppercase(field); } ); </script> Hope this helps.
  19. nightowl
    Hi Kirkman, You can try this template code inside an HTML file or HTML DataPage: <div class="forms-container" class="container-fluid"> <div class="row datapage-row"> <div class="col-md-12 col-sm-12 col-xs-12"> <!-- TODO: Put your DataPage [iframe] embed code here --> <script type="text/javascript" src="https://c2eru839.caspio.com/scripts/embed.js"></script> <!--<script type="text/javascript">try{f_cbload(true, "c2eru839.caspio.com", "148b400049998e67f1434f05bf7f");}catch(v_e){;}</script>--> <iframe name="ACBL New Profile" title="ACBL New Profile" src="https://c2eru839.caspio.com/dp.asp?AppKey=148b400049998e67f1434f05bf7f" width="100%" height="200px" style="border-style: none">Sorry, but your browser does not support frames.</iframe> </div> </div> <div class="row spacer">&nbsp;</div> <button id="add-department" style="display: inline-block !important; float: right;">Add Department</button> </div> <!-- Latest jQuery + jQuery Migrate --> <script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> <!-- Custom scripts --> <script> $(document).ready( function (event) { var formsContainer = $('.forms-container').last(); var addDepartmentButton = $('#add-department'); addDepartmentButton.click( function (event) { var dpClone = $('.datapage-row').last().clone(); var spacer = $('.spacer').last(); var spacerClone = spacer.clone(); spacer.after(dpClone); dpClone.after(spacerClone); } ); } ) </script> Hope this helps.
  20. nightowl
    Hi NeoInJS, If you're trying to achieve something like this: var fields = [tag1 tag2 tag3 tag4 tag5] tag1 will be saved as field #1 tag2 will be saved as field #2 tag3 will be saved as field #3 tag4 will be saved as field #4 tag5 will be saved as field #5 Then, you can use the jQuery Tag-it! library to achieve this. You can then use the following script in the footer of your submission page: <!-- Latest jQuery + jQuery Migrate --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> <!-- jQuery UI: Required by Tag-It! --> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <!-- jQuery Tag-It! --> <script src="//aehlke.github.io/tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script> <!-- Required jQuery UI Theme + Tag-It! theme --> <link href="//code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="//aehlke.github.io/tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css"> <script language="JavaScript"> document.getElementById('caspioform').onsubmit = function () { // TODO: Add your field names here var fields = ['Tag_1', 'Tag_2', 'Tag_3', 'Tag_4', 'Tag_5']; var input = document.getElementById('cbParamVirtual1').value; var values = input.split(','); values.forEach( function (value, index) { // Map each CSV segment to each field in the 'fields' list above document.getElementById('InsertRecord' + fields[index]).value = value.trim(); } ); } </script> <script language="JavaScript"> function alphanumeric(v_plate) { if (!(v_plate.value.match(/[^a-zA-Z0-9,\-]|(,,)|(,,,)|(,,,,)|(,,,,,)| \s | # | @ | ! | ? | $ | % | ^ | & | * | ( | ) | ~ | ` | _ | + | = | ; | . | > | < | : | " | ' | 1{2,} /))) { return true; } else { alert("Only letters or numbers are allowed in this field"); return false; } } </script> <script language="JavaScript"> $(document).ready( function () { var v_b = document.getElementById('Submit'); v_b.onclick = function () { if (alphanumeric(document.getElementById('cbParamVirtual1'))) { document.getElementById('caspioform').submit(); } else { return false; } } $('#cbParamVirtual1').tagit( { // The hypothetical 'cbParamVirtual1' above is what I am trying to point to the Virtual1 text area in the DataPage. // This will make JQuery Tag-it feature submit an array of values as shown in the script above, as comma-delimited. // The hope is that the rules remain consistent through all through scripts. All I am trying to do is change the display // effect on the front end. No changes are required to the back end. singleField: true, singleFieldDelimiter: ',' } ); } ); </script> To change the jQuery UI theme used by the script above: Please go to https://code.jquery.com/ui/. Choose your theme from the jQuery UI 1.12 > Themes section and copy the link address. Replace the href attribute in the following line with the link you've got from STEP #2: <link href="//code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet" type="text/css"> Hope this helps.
  21. nightowl
    Hi 74Systems, Caspio doesn’t allow to use Text64k in Filter by field (not as parent or child, but as a field which is used for filtering in cascading form element). If you edit the DataPage after you change the data type of the field to Text64k, you will see that the cascading settings are updated and filter by changed to ID: That's why it's better to use the ID instead of the full-text ProductDetails (Text64k) when filtering while retaining the full text for the dropdown display.
  22. nightowl
    Hi NeoInJS, You can try DATEADD(year, 1, [@field: Start_Date]). Thanks.
  23. nightowl
    Hi guys, You can try this workaround: Create a parent dropdown from an existing field, say Status. Insert a cascading virtual text Field, say Virtual1. Then configure it so that it filter-cascades from the Status field in STEP #1. Then create a textarea field from another existing field, say Canned_Message. Create an HTML block with the Source button enabled. Then use this sample script inside the HTML block from STEP #4: <!-- Latest jQuery + jQuery Migrate --> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script> <script> $(document).ready( function () { // TODO: Update the names accordingly var parentFieldName = 'Status'; var virtualFieldName = 'Virtual1'; var textAreaFieldName = 'Canned_Message'; // WARNING: Please don't modify code beyond this point // Parent dropdown (can also be a virtual field) var getParentField = function () { return $('select[name^="InsertRecord' + parentFieldName + '"]'); } // Cascading VIRTUAL text field (will be hidden via CSS) var getVirtualField = function () { return $('input[id^="cbParam' + virtualFieldName + '"]'); } // Cascading textarea (will get its value from the cascading text field above) var getTextAreaField = function () { return $('#InsertRecord' + textAreaFieldName); } var getRichTextField = function () { return $('iframe[title="Rich Text Editor, InsertRecord' + textAreaFieldName + '"]').contents(); } var addEventListeners = function () { var parentField = getParentField(); var vField = getVirtualField(); var richText = getRichTextField(); vField.on('change', setTextAreaContents); richText.ready(setTextAreaContents); } // The workaround var setTextAreaContents = function (event) { var parentField = getParentField(); var vField = getVirtualField(); var textArea = getTextAreaField(); var richText = getRichTextField(); var selected = parentField.val(); var textToDisplay = vField.val(); if (textArea.length > 0 && richText.length > 0) { $('body', richText).html(textToDisplay); } else { textArea.html(textToDisplay); } }; // Hide the virtual field via CSS var vField = getVirtualField(); vField.parent().parent().hide(); // Enable the cascading textarea addEventListeners(); // Manually trigger the dropdown 'onchange' event var parentField = getParentField(); parentField.trigger('change'); } ); </script> Please don't forget to change the name of: The parent field (Status) The virtual field (Virtual1) The text area (Canned_Message) This workaround works properly, regardless of whether the rich text editing toolbar is enabled or not in the Advanced tab. Thanks.
  24. nightowl
    Hi NeoInJS, You can try the following: Create a new virtual field. Let's assume that it's named Virtual1. Include the actual fields for Name, Age, and Gender. Make them Hidden. Create an HTML block with the Source button enabled. Then put this code in the HTML block: <script> document.getElementById('caspioform').onsubmit = function () { // TODO: Add your field names here var fields = ['Name', 'Age', 'Gender']; var input = document.getElementById('cbParamVirtual1').value; var values = input.split(','); values.forEach( function (value, index) { // Map each CSV segment to each field in the 'fields' list above document.getElementById('InsertRecord' + fields[index]).value = value.trim(); } ); } </script> Hope this helps.
  25. nightowl
    Hi wdandrews, You can create a custom print CSS style using @media print and hide the buttons there: https://stackoverflow.com/questions/355313/how-do-i-hide-an-element-when-printing-a-web-page Hope this helps.
×
×
  • Create New...