APTUS

@Volomeister, WOW... amazing. It works. You have no idea how much I appreciate your quick response and to make it even better, a response with a working solution. You really made my day. Thank you, thank you, thank you...

Hello @Volomeister, your script, provided above, for converting a listbox to multiselect checkboxes is fantastic and works great... thank you so much for posting it. But (unfortunately sometimes there is a but): while I have used it in a couple of datapages and tested it in the Caspio preview mode of said datapages and it works/looks great, as soon as I added it to a webpage (I've tried both a pure HTML page as well as a WordPress page) it simply does not work. The JS script appears to be running, but the conversion to checkboxes and multiselect is not taking effect. Do you have any thoughts about why this might be happening? Any guidance or solution will be much appreciated. Thanks.

@kpcollier, thanks for your suggestion above. While I wasn't able to use your exact selector to get rid of the "flashing regular tabular report before grid edit," you gave me the idea and I was able to make it work with a different class selector. The CSS that I am using is shown below. Also, @oliverk, this may help you. I simply placed this CSS Style as the very first item in the header (to make sure it runs and hides the tabular report before anything else runs) and so far so good. When I open the datapage, there is a very short delay before the grid edit mode shows up, but fortunately only a blank white screen is now showing during that delay. <style> .cbResultSetTable { display: none !important; } <style>

@KlisaN137, thanks again and for your reference, or anyone else interested, I have a tweaked the grid edit version of your script with the same approach as before to be able to insert individual columns and/or ranges of columns to be removed as shown below: <script> document.addEventListener('DataPageReady', function(event) { function hideColumns(...args) { for (let arg of args) { if (typeof arg === 'number') { hideColumn(arg); } else if (typeof arg === 'object' && arg.length === 2 && typeof arg[0] === 'number' && typeof arg[1] === 'number') { hideColumnsInRange(arg[0], arg[1]); } } } function hideColumn(columnNumber) { const values = document.querySelectorAll(`tbody:nth-of-type(1) td:nth-of-type(${columnNumber})`); values.forEach(el => { el.style.display = 'none'; }); } function hideColumnsInRange(startColumn, endColumn) { for (let i = startColumn; i <= endColumn; i++) { hideColumn(i); } } const target = document.querySelectorAll('a[data-cb-name="GridEditButton"]')[1]; const observer = new MutationObserver(mutations => { // WHICH COLUMNS TO HIDE WHEN ENTERING GRID EDIT MODE hideColumns(7, [4, 6], 3, [2, 3]); }); const config = { subtree: true, childList: true }; observer.observe(target, config); }); </script>

@KlisaN137, WOW: (1) thank you so much for your attention to my query and your fast response; and (2) the script for hiding columns in grid edit mode works flawlessly. This is awesome and I really appreciate it.

@KlisaN137, thank you so much for your post and the code for deleting tabular report columns using JS. I was using CSS to do this for the longest time and this JS approach is much, much better. While a user who knows what they are doing could technically get at the removed columns, it is much more difficult and will take a much more of a tech-savvy user to do so as compared with the CSS approach. FYI, and for others who may come across this post and find it useful, I have tweaked the code as shown below so the argument for the "deleting" function can be entered as one or more ranges, as well as one or more individual columns, or any combination thereof. Again, I have just modified things and the original idea and credit goes to KlisaN137; thanks again. I also have a somewhat related challenge that I cannot figure out for the life of me. I would like to be able to use this same approach with a Grid tabular report and while I have tried many, many variations of the script, I just cannot make it work. When I say variations, it mainly includes changing the querySelector lines to get to the correct elements/columns in the Grid scenario since I think the rest of the code should be ok regardless of the report type. If it make a difference, my grid report is already running a script to automatically open it in Grid Edit mode, which is working fine. It is just the removing columns part (using JS) that I cannot make work after having spend 1.5 days on it. Any help or guidance from KlisaN137, or anyone else, on the Grid report issue will be very much appreciated. <script> document.addEventListener('DataPageReady', function(event) { const check = document.querySelectorAll('table[data-cb-name="cbTable"] th'); const deleting = (...args) => { for (let arg of args) { if (Array.isArray(arg)) { // Column range let start = arg[0]; let end = arg[1]; deleteColumnsInRange(start, end); } else { // Single column number deleteColumn(arg); } } }; const deleteColumnsInRange = (start, end) => { for (let i = end; i >= start; i--) { deleteColumn(i); } }; const deleteColumn = (column) => { let label = document.querySelector(`table[data-cb-name="cbTable"] th:nth-of-type(${column})`); let values = document.querySelectorAll(`table[data-cb-name="cbTable"] td:nth-of-type(${column})`); label.parentElement.removeChild(label); values.forEach(el => { el.parentElement.removeChild(el); }); }; // Example showing use of multiple individual columns and multiple ranges let columnsToDelete = [5, [8, 12], 15, [18, 20]]; deleting(...columnsToDelete); }); </script>

Hello @oliverk, did you get the issue with the flashing regular tabular report before the grid edit mode shows on the page sorted out? I am having the same exact issue and any help or guidance will be appreciated. Thanks.

@PotatoMato and @Kronos, I have implemented both of your scripts above and they are working perfectly. First, I want to thank you both for providing these snippet solutions. They are very useful and I really appreciate it. Second, I have made a modification to Kronos' suggestion and I am sharing it here (1) to get any feedback or comments on it and/or if it doesn't or does make sense; and (2) assuming it does make sense and is a workable solution, it may help you or others reviewing this post down the line. Here it goes: In Kronos' suggested code, where we want to use two toggles on the same page effecting two separate sets of checkboxes, what I did is instead of using ('input[type="checkbox"]') in the "querySelectorAll" line, I use IDs which allows using unique IDs to target each separate set of checkboxes on the page in toggle1 and toggle2. The added benefit of this approach is the the "for loop" in each toggle's function can remain in the original form as presented by PotatoMato without having to worry about counting each set of checkboxes and using those specific counts in the for loops. IMHO, this provides more flexibility and less maintenance if changes need to be made in the future. If you happen to see my comment here, please let me know your thoughts. Thank you

@Lynda, thanks very much for your response. When you have a minute, can you please let me know (in high-level, general terms) which direction you went as an alternate to using this problematic Modal method recommended by Caspio. Just a general idea will be great and I don't want to take too much of your time with details. Thanks again.

Hello, I have implemented the Opening Details DataPages in a Lightbox per the instructions provided in Caspio Online Help (HERE) and it is working like a charm; though only under normal or basic operations. I have noticed the following two problems: When the details page provides the user with input fields and the user causes an error (e.g., a required field is left blank), the error message flashes for a second and the lightbox (modal) closes automatically (disappears) without giving the user a chance to correct his or her error. In addition, once the lightbox closes or disappears automatically, the originating datapage where the modal's trigger button is located remains grayed out and unusable (frozen). The only way out is to refresh the page which is clearly an unacceptable user experience. When a user opens the modal using a button on the originating page (Results DataPage) and ends up closing the modal using the 'X' on the top right, the modal does close properly. But, the originating button cannot be used a second time (nothing happens when clicked) if the user wants to re-open the modal. The only way is to refresh the page which is clearly not an ideal user experience. I would appreciate it if anyone knows of a solution for the above two problems in case you have experienced the same problems and/or have found a way to deal with them. Thank you in advance... Edited as follows: Hello @MayMusic and @Meekeee, I have read some of your comments/responses in other posts regarding Caspio's suggested approach to using Lightbox for Details Datapages. Based on my reading your other comments it appears you are quite familiar with the use of lightbox/popup and I am hoping you can help me with a solution to the two bugs described above. I have it working fine, except for these two issues. I would appreciate any help or input you can provide. Thank you in advance for your time.

Cstricker, thank you so much for your quick reply. Your explanation makes sense. I will give it a try and I hope to be able to reproduce what you described and get the correct result. Also, thank you for sharing the screenshot; it helps a lot. Thanks again.

Csticker, I have the same exact issue. Did you find a solution?

Thanks Vitalikssssss for sharing. The solution looks great and I will most likely use it in some other scenarios I may be needing. FYI given the limitation, back in August my workaround was to use triggered actions to determine day of the week and it has been working fine so far. I will be happy to share a screenshot of it if you or anyone else would like to see it.

Jan (Parma2015), while this is more than 3 years from your post here, I am having the exact same issue with the Caspio popup calendar in a WordPress site. Can you please provide your solution. It will be greatly appreciated. Thank you, Kaveh

Franchiser, thanks for taking the time to look into this. I see your test of this formula is being done in a DataPage and I had already been able to get it to work in a DataPage as well. The problem is that the same formula used directly in a Formula field in a table will not work. I was able to work around it by using a triggered action in the table and since triggered actions have a similar day of the week option, it works. However, the formula still will not work in a table field without a triggered action. Thanks again.