Volomeister

Hi @ChrisCarlson This version accounts for inline add, inline edit, and details page edit options: <script> if (document.DataPageReadyHandler == undefined) { const fileInputName = 'File_File' const fileSizeInputName = 'File_Size' const addFileInputListener = () => { document.querySelector('body').addEventListener('change', e=>{ if(e.target.getAttribute == null) {return} if(e.target.getAttribute('id') == null) {return} if(e.target.getAttribute('id').indexOf(fileInputName) == -1) {return} let id = e.target.getAttribute('id') let files = e.target.files[0] let size if (files==undefined) { size=0 } else { size=files.size } if (id.indexOf('InlineEdit')>-1) { document.querySelector(`[id*="InlineEdit${fileSizeInputName}"]`).value = size } else if (id.indexOf('InlineAdd')>-1) { document.querySelector(`[id*="InlineAdd${fileSizeInputName}"]`).value = size } else if (id.indexOf('EditRecord')>-1) { document.querySelector(`[id*="EditRecord${fileSizeInputName}"]`).value = size } }) } const DataPageReadyHandler = (e) => { if (e.detail.appKey != '[@cbAppKey]') { return } addFileInputListener() } document.addEventListener('DataPageReady', DataPageReadyHandler) document.DataPageReadyHandler = 'Enabled' } </script> You need to update these lines with respective input names: const fileInputName = 'File_File' const fileSizeInputName = 'File_Size'

Hi @roattw You can add the following line: input.dispatchEvent(new Event('change')) Right after this line input.value = ''

Hello @roattw There is a small typo in the code in the line let resetAllBtn = document.querySelector('#ResetAllBtn') ResetAllBtn is supposed to start with a small letter r so it should be like this instead: let resetAllBtn = document.querySelector('#resetAllBtn')

Hi @wimtracking2 1. When adding lightbox with JavaScript, you specify the URL of the DataPage that needs to be open, so you can add a query string to pass the number of records from the results set. On your submission form, you will use regular calculated value field to calculate the cost based on external parameter that was passed via query string. 2. The only solution that comes to mind is: 2.1. The regular download option is hidden by default (via CSS, for example) 2.2. Instead, a custom "Download" link is added that open submission form lightbox (via JS) 2.3. After the form is submitted, JavaSript will click on the hidden download option and initiate a download The obvious drawback is that one can examine the source code of the DataPage, find the hidden download option, and click on it without having to pay

Instead of embedding 2 iframes in HTML DataPage, you can embed a report iframe in the footer of the submission form DataPage. This way, the iframe will be refreshed automatically after the submission

Hello @BrianI When someone "selects" a row in a tabular report it triggers "click" event. You can use this snippet and customize it to fit your use case: <script> if (document.clickEventHandler == undefined) { const clickEventHandler = (e) => { if (e.target.classList.contains('cbResultSetTableCell')) { // your click handling code goes here } } document.querySelector('body').addEventListener('click', clickEventHandler, true) document.clickEventHandler = 'Enabled' } </script>

Hi @CaspioE I have a sample of what it might look like: https://c7eku786.caspio.com/dp/7f80b000f874807ea93f45efa64d# Is it what you are looking for?

Hi @CaspioE Should there be an "unfreeze" option? Or once the button is clicked, the button will no longer be shown? What happens when the row is "freezed" ? Should it change the background color to indicate that?

Hello @MarkMayhrai Without seeing the actual webpage where you deployed this solution it is hard to tell what is causing this behavior. It could be caused by conflicting styles of the website where it was deployed or something else. I could suggest explicitly defining a width for the modal-content CSS class. Code snippet will look something like this: <style> .modal-content { width: 550px!important; } </style> If you need more tailored assistance, please share a link to the webpage where you implemented this solution

Hi Caspians I had a use case where we needed to enforce users entering only text in text input fields (no numbers/special characters allowed) Below is a solution that can be used for submission form/details DataPages. The code can be added to the header or footer: <script> if (document.addInputListener == undefined) { const txtInputNames = ['Txt1', 'Txt2'] const errorMessage = 'Please enter text only' const addInputListener = () => { txtInputNames.forEach(inputName => { document.querySelectorAll(`form[action*="[@cbAppKey]"] input#InsertRecord${inputName}, form[action*="[@cbAppKey]"] textarea#InsertRecord${inputName}, form[action*="[@cbAppKey]"] input#EditRecord${inputName}, form[action*="[@cbAppKey]"] textarea#EditRecord${inputName}`).forEach(HTMLInput=>{ HTMLInput.addEventListener('input', e=>{ e.target.value = e.target.value.replace(/\s{2,}/g, ' ') if (/^[A-Za-z\s]+$/.test(e.target.value)) { e.target.setCustomValidity('') return} e.target.setCustomValidity(errorMessage) e.target.value = e.target.value.replace(/[^A-Za-z\s]/g, '') e.target.reportValidity() }) }) }) } const DataPageReadyHandler = (e) => { if (e.detail.appKey != '[@cbAppKey]') { return } addInputListener() } document.addEventListener('DataPageReady', DataPageReadyHandler) document.addInputListener = 'Enabled' } </script> You would need to customize this array so it holds comma-separated names of your text fields where you need to enforce this solution: const txtInputNames = ['Txt1', 'Txt2'] Here you can customize the message that users will see when entering something other than text: const errorMessage = 'Please enter text only'

Hello @SlowRock Could you specify what exactly you would like to copy to text area by clicking on a button? Where does the copied text come from? Where is text area on List report DataPage? Could you share some screenshots/DataPage link?

Hi @MarkMayhrai You can use the following code: <script> if (document.DataPageReadyHandler == undefined) { const columnsArr = [6,7,8,9,10,11,12,13] const paintCell = (cell, color) => { cell.style = color } const colorTableCells = () => { document.querySelectorAll('.cbResultSetDataRow').forEach(row=>{ for (let i=0;i<columnsArr.length;i++) { let cell = row.querySelector(`td:nth-child(${columnsArr[i]})`) if (cell==null) return switch (cell.innerHTML.trim()) { case '1': {paintCell(cell, 'background: #df4d55;color: #ffffff') break } case '2': {paintCell(cell, 'background: #fcc200;color: #ffffff') break } case '3': {paintCell(cell, 'background: #96ded1;color: #000000') break } case '4': {paintCell(cell, 'background: #96ded1;color: #000000') break } case 'NA': {paintCell(cell, 'background: #e6e6e6;color: #000000') break } } } }) } const DataPageReadyHandler = (e) => { if (e.detail.appKey != '[@cbAppKey]') { return } colorTableCells () } document.addEventListener('DataPageReady', DataPageReadyHandler) document.DataPageReadyHandler = 'Enabled' } </script> This part includes a columns array where cells need to be colored, so you may need to adjust it to match your column's order: const columnsArr = [6,7,8,9,10,11,12,13]

Hi @MarkMayhrai Could you specify which script have you used and whether the responsiveness option on your tabular report is enabled or disabled?

Hi @MarkMayhrai Do you have responsiveness on the DataPage enabled or disabled? If it is enabled, you can add the following CSS code snippet to the header of your DataPage: <style> .cbResultSetTable tr th:nth-child(column order number) { background-color: color; } </style> Where the "column order number" represents the column order number. So you need to specify which table header columns must have which background colors in this rule. It will look like this: <style> .cbResultSetTable tr th:nth-child(10), .cbResultSetTable tr th:nth-child(11) { background-color: white; } .cbResultSetTable tr th:nth-child(7), .cbResultSetTable tr th:nth-child(8), .cbResultSetTable tr th:nth-child(9) { background-color: blue; } </style>

Hi @kpcollier The code must be modified. Try the following version: <script> document.addEventListener('DataPageReady', function (event) { document.querySelector('[name="cbParamVirtual1"]').addEventListener("change", myFunction); function myFunction(event) { let calcField = event.target.value; document.querySelector('#InsertRecordBulletin').value= calcField.toLocaleString(); document.querySelector('#InsertRecordBulletin').nextElementSibling.querySelector('iframe').contentDocument.querySelector('body').innerHTML = calcField document.removeEventListener('DataPageReady', myFunction); } }); </script>