Leaderboard

Hello @CoopperBackpack You may use additional JS code to implement this workflow: <script type="text/javascript"> document.addEventListener('DataPageReady', fileInputEvent) function fileInputEvent() { document.querySelector("#InsertRecordFile_f"),addEventListener('change', fileInputHandler); // use the InsertRecord[your file field name] instead document.removeEventListener('DataPageReady', fileInputEvent) } function fileInputHandler(event) { const fileSizeInput = document.querySelector('#InsertRecordFile_size'); // use the InsertRecord[your file size field name] instead fileSizeInput.value = event.target.files[0].size; } </script> Insert this code into the header of the submission form. Do not forget to disable the HTML editor. For the file size field use the Number data type. You also may make the size field hidden in the submission form.

Hi, Hi can I change the color of the column in chart for the blank values. For example, I want the color of the first column (blank) to be color red

Hello, you can also try getting the nth child but will be a static change of color display. But since the chart will always return the blank in the first line, we can always modify the 1st one to be set as orange. Try pasting this to the header as well: <style> rect.highcharts-point.highcharts-color-0:nth-child(1) { fill: #ffd3a8; } </style> If you want to also apply different colors to the other values, change the bold number to any desired displayed number and it should work as expected.

Hello! To change the color you need to use additional JS code. It will parse the data in chart and change the color according to name of the column. Here is the code: <script type="text/javascript"> document.addEventListener('DataPageReady', chartUpdateHandler); function chartUpdateHandler(event) { var cleaner = function(interv) { clearInterval(interv); } let interv = setInterval(() => { if (!!Highcharts) { const options = Highcharts.charts[0].series[0].data; let data = []; options.forEach(option => { let localData = {}; localData.y = option.y; localData.name = option.name; if(option.name === "(blank)") { localData.color = '#ee5921'; } else { localData.color = '#3186AD'; } data.push(localData); }) Highcharts.charts[0].update({ series: { data: data } }); cleaner(interv); } }, 200); } </script> You need to insert this code into the Header of the report DataPage. Do not forget to disable the HTML editor.

I would like to format the auto-email on submit of an update form as neatly aligned table Vendor Number [@SA_Vendor_ID] Invoice Number [@MS_InvNo] Current Date [@Date()] Total Amount [@MS_InvAmount] Currency (fixed “USD”) SES Number [@MS_SESNo] PO Number [@SA_Purch_Order] How can I make this happen?

Hello @vanderLeest, I would like to add, that when you click the expand button, you will be able to add a table: It is possible to select the number of columns and rows, adjust border size, alignment, etc. And when the table is added, you may click the right mouse button to have access to the Table and Cell Properties. Using these properties you may style the table as you like.

Hi @vanderLeest, In order to format the content of the auto-email, I suggest that you select HTML, instead of Plain text. Then, click the expand button to display more options.

Hello @CoopperBackpack You can insert this snippet of code into your submission form Header: <style> .cbFormFieldCell { position: relative; width: 50%; } .cbFormFieldCell .floating-label { position: absolute; color: gray; font-size: 13px; pointer-events: none; top: 11px; left: 20px; transition: 0.2s ease all; } .cbFormFieldCell input:focus ~ .floating-label, .cbFormFieldCell input:not(:focus):valid ~ .floating-label { top: 0px; left: 10px; font-size: 10px; opacity: 1; background-color: white; padding: 0 3px; } </style> <script> document.addEventListener("DataPageReady", placeholderHandler); function placeholderHandler() { const labels = document.querySelectorAll('.cbFormLabelCell'); const inputs = document.querySelectorAll('.cbFormFieldCell'); for(let i = 0; i < labels.length; i++) { if (inputs[i].children[0].type === 'text') { labels[i].children[0].classList.add("floating-label"); inputs[i].children[0].setAttribute("required", true); inputs[i].appendChild(labels[i].children[0]); labels[i].remove(); } } console.log(labels); } </script> You also can customize the placeholder adjusting the properties in the style tag of the code.

Hi All, I was able to make a workaround not to include blank fields in the Automatic email using Calculated Value. I used Virtual fields in this example. Here is the formula: CASE WHEN '[@cbParamVirtual1]' = '' THEN '' ELSE 'Virtual 1: [@cbParamVirtual1]' END + CASE WHEN '[@cbParamVirtual2]' = '' THEN '' ELSE ' Virtual 2: [@cbParamVirtual2]' END + CASE WHEN '[@cbParamVirtual3]' = '' THEN '' ELSE ' Virtual 3: [@cbParamVirtual3]' END + CASE WHEN '[@cbParamVirtual4]' = '' THEN '' ELSE ' Virtual 4: [@cbParamVirtual4]' END You can also test this DataPage. I did not hide the Virtual field 5 for the sake of testing. You may hide it under the Advanced tab. Then, on the Email options, use this VirtualField5. Hope this helps. Cheers!

Hi @Vincent, Your data needs to reside in Caspio tables in order to work with it via Datapages. You may check this article which explains how you can import your date: https://howto.caspio.com/tables-and-views/importing-data/ You may also consider using REST API for transferring the data from you database into Caspio: https://howto.caspio.com/web-services-api/rest-api/ Hope this helps. Regards, vitalikssssss

Hello @Umbie, You have 2 options: 1. First create relationships between tables and then build a View based on these tables. In this case when you create a View, on the View Properties screen, the relationships are build automatically. 2. If relationships are not set up and you join tables in a View, you should choose the fields to join tables manually on the View Properties screen. Also, please note that you may find some helpful features only in the Relationship Settings. For example, Enforce Referential Integrity between parent and child table, Display value instead of the ID on the DataPage level. Here is the article about the Relationship Settings https://howto.caspio.com/tables-and-views/relationships/relationship-settings/ Hope this helps.

Hello @mhand To implement such a workflow you may use JavaScript. Paste this code into the Header of the Submission form: <script type="text/javascript"> function inputHandler() { document.getElementById('InsertRecordTrxnType').value = document.getElementById('cbParamVirtual1').value //cbParamVirtual1 needs to be changed according to the name of the Virtual field you have in your DataPage } document.addEventListener('BeforeFormSubmit', inputHandler); </script> Note that cbParamVirtual1 needs to be changed according to the name of the Virtual field you have in your DataPage. Also, do not forget to Disable the HTML editor of the header in the advanced section.

Hi @Caspio101 You can implement this workflow using the JS code. Here is the code with comments on parts which needs to be changed according to your workflow: <style> /* some styles for the disabled button */ input[name="Submit"]:disabled { cursor: not-allowed !important; background-color: gray !important; } </style> <script type="text/javascript"> function inputHandler(event, elementsSelectors) { if (!!event.target.innerHTML.trim()) { let elements = elementsSelectors.map( function(selector) { return document.querySelector(selector).innerHTML.trim() }); if (elements.includes('0')) { // Here you may change the condition. Now the button will be disabled if at least one calc value is equal to 0 document.querySelector('input[name="Submit"]').disabled = true; } else { document.querySelector('input[name="Submit"]').disabled = false; } } else { return null; } } function assignEvent() { // here you may define the list of the selectors to choose calculated fields you may use in condition let elementsSelectors = ['span[id^="InsertRecordfield_1"]', 'span[id^="InsertRecordfield_2"]', 'span[id^="InsertRecordfield_3"]']; elementsSelectors.forEach(function(selector) { document.querySelector(selector).addEventListener('DOMSubtreeModified', function() { inputHandler(event, elementsSelectors); }); }); document.removeEventListener('DataPageReady', assignEvent); } document.addEventListener('DataPageReady', assignEvent); </script> You need to insert this code into the header of the submission form. Do not forget to disable the HTML editor in the advanced section of the header.

Hi @Telly, I suppose that you are using Date/Time field. Since it is a Data/time field you have to convert the Field in to text after that use substring for the month, you may use this formula below: CONVERT(VARCHAR, (SUBSTRING('JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC ', ((Datepart(month, [@field: DATEFIELD])) * 4) - 3, 3))) + ' -' + CONVERT(VARCHAR, (Datepart(day, [@field: DATEFIELD))) + ' - ' + CONVERT(VARCHAR, (Datepart(year, [@field: DATEFIELD]))) I hope this helps.