-
Posts
122 -
Joined
-
Last visited
-
Days Won
19
Volomeister last won the day on August 21
Volomeister had the most liked content!
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Volomeister's Achievements
-
Volomeister reacted to an answer to a question: Inserting a record into a view using Postman
-
How to get the file size
Volomeister replied to CoopperBackpack's topic in User JavaScript and CSS Discussions
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' -
roattw reacted to a post in a topic: Caspio How To: Add Reset Button in Forms - working in Report but oddly - adds 2 reset buttons
-
roattw reacted to a post in a topic: Caspio How To: Add Reset Button in Forms - working in Report but oddly - adds 2 reset buttons
-
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
-
DrSimi reacted to a post in a topic: Execute application task by clicking on button on a DataPage
-
referesh 2nd iframe using submission page
Volomeister replied to Harpreet's topic in User JavaScript and CSS Discussions
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?
-
ChrisCarlson started following Volomeister
-
Barry reacted to a post in a topic: Enforce users to enter only text in a text input field
-
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
-
CoopperBackpack reacted to a post in a topic: Enforce users to enter only text in a text input field
-
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'
-
Copy to clipboard button in report list.
Volomeister replied to SlowRock's topic in User JavaScript and CSS Discussions
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]
-
MarkMayhrai reacted to a post in a topic: Help Formatting Tabular Datapage: Hiding Gridlines & Coloring Headers
-
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>
-
kpcollier reacted to a post in a topic: Copy Value from Calculated Field to Text Area Field
-
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>