Search the Community

I have a tabular report datapage called "Dashboard" that is authenticated. It has multiple dropdown filters one of which is a personID. The user can select the person from the personID dropdown and the results below are filtered to only show that person's tasks. I want anyone to be able to change the dropdown filter to any person and be able to see that person's tasks in the results below. Those task records have links that let the user drill-down to targets. When the user clicks a link in one of the task records on Dashboard, another tabular report form called "Targets" loads showing the target records for that task. That datapage has a "back" button that returns the user to the Dashboard. When a user clicks the Back button to go back to the Dashboard, I want the filter values (i.e. PersonID) that were previously selected there to be selected again and the results list to be filtered by those values. I'm pretty sure I need to pass parameters back and forth between those pages to make it work correctly and I can do that. When a user first goes to the Dashboard, I want the PersonID filter to default to the user so I have it set to receive the PersonID from the authentication. This works fine. Here is the problem. When returning to the Dashboard from the Targets screen, the PersonID filter on the Dashboard defaults to the user (probably due to the PersonID filter receiving the authentication parameter) but I want it to default to whatever was selected previously. Hope this make sense. Any ideas?

Hello Caspians, I just wanted to share my case: I have a Submission Form with Authentication (users can have access levels 1,2 and 3). In it, I have a Dropdown where user can choose to which department (role) to assign the issue, but I want that each logged in user can choose department which is only on his or any lower level. So, user which is on level 2 can see only options that have stamped on them level 2 and 1. User with level 3 can see any option with levels 1, 2 or 3. We will need 'users' table with levels, and 'Roles' table with their mapped maximum level access:: In Submission Form, we will need to set up the Dropdown field as follows, as well as additional Virtual Field with Dropdown Form Element (Virtual Field will be hidden with JavaScript, but in order to hide Label, select 'No Label' from Advanced Options): Once this is done, add another HTML block, and add the following JavaScript code in it: <script> document.addEventListener('DataPageReady', function(event) { const userLevel = '[@authfield:Level#]' // Select you own Authentication Parameter for User Level const dropdown = document.querySelector('select[name="InsertRecordAssigned_Departmant"]'); // Select your own Dropdown Field const helper = document.querySelector('select[name="cbParamVirtual1"]'); // Select Virtual Field helper.style.display = 'none'; let optionsMap = []; const arrayHelper = Array.from(helper.querySelectorAll('option')); for (let el of arrayHelper) { optionsMap.push({ 'level': el.value, 'type': el.textContent }) } let getOut = []; for (let i = 0; i < dropdown.length; i++) { const find = optionsMap.find(({ type }) => type === dropdown.options[i].value) console.log(`find level: ${find.level}, type: ${find.type}, user_level: ${userLevel}, option: ${dropdown.options[i].value}`) if (Number(find.level) > Number(userLevel)) { getOut.push(i); } } getOut = getOut.reverse(); for (let i of getOut) { dropdown.remove(i); } }); </script> Adjust declaring of variables at top, to select your Authentication Parameter for User Level, Dropdown Field (Just this need to be changed: const dropdown = document.querySelector('select[name="InsertRecordAssigned_Departmant"]'); ), and for Virtual field.

Hi, I am trying to create a workflow where the fields are shown or hidden by the selection in the dropdown. I have tried using Rules, however, they are limited in reusing fields in Action. Can someone point me to the right direction on how to achieve this? For example, I have a dropdown with the Number of children, it can be 1, 2, 3, 4 and 5. And I want to show input fields below based on that selection in the dropdown. So, if I choose 1 in the dropdown, only first input is shown. If I choose 2, the first and the second inputs are shown and so on.

I have a workflow that will only let a user enter a date ranging from 7 days before the current date. Obviously a calendar pop up wont work since I can't disable other choices there. So I created a task that will update the table daily and put the necessary choices that I have. This way its dynamic and I don't need to change it everyday. Here is the Task: The task above will run every day and will first delete all the existing records within the table and replace it with the new set of 7 days. An example would be. Today is May 10 here in my location and that will give me May 3 - May 10 of range. Table: DataPage: Note: You can also edit this workflow where when a date is selected that option will be removed from the Table. That will use a trigger that will delete a date when it sees it after a user submission.

Hi there! I had a use case where drop-down input contained long lines of text. By default, a long line of text inside select input is getting cropped at the right. But it was required to keep the full text visible. I wrote the script that can be used as it is to solve this problem. Just copy and paste the code below into your form data page header. <script> document.addEventListener('DataPageReady', _=>{ const mainFunction = _=> { hideSelectContainers() addVirtualSelectOptions() addVirtualSelectOptionsListeners() addVirtualSelectOptionsContainerListeners() addStyles() } const hideSelectContainers = _=> { document.querySelectorAll('.cbFormSelect').forEach(item=> {item.style = "display: none;"}) } const virtualSelectContainerGenerator = selectElement => { let template = ''; selectElement.querySelectorAll('option').forEach(option=>{template += `<div value="${option.getAttribute('value')}" class="virtualOption">${option.innerHTML}</div>`; option.classList.add("hideElement")}) return `<div class="virtualSelectContainer"> <div class="virtualSelect"> <span class="virtualSelectText">${selectElement.value}</span> <div class="virtualOptionContainer hideElement">${template}</div> </div><span class="custom-arrow"></span></div>`; } const addVirtualSelectOptions = _=> { document.querySelectorAll('[class*="cbFormBlock"]').forEach( item =>{ if(item.querySelector('select')!=null) { item.insertAdjacentHTML('beforeend', virtualSelectContainerGenerator(item.querySelector('select'))) } }) } const addVirtualSelectOptionsListeners = _=> { document.querySelectorAll('.virtualOption').forEach( option => { option.addEventListener('click', e=> { let realOption = document.querySelector(`[value="${e.target.getAttribute('value')}"]`); realOption.parentElement.selectedIndex = realOption.index e.target.parentElement.parentElement.querySelector('.virtualSelectText').innerText = e.target.innerText; e.target.parentElement.classList.toggle("hideElement"); }) }) } const addVirtualSelectOptionsContainerListeners = _=> { document.querySelectorAll('.virtualSelectContainer').forEach( item =>{ item.addEventListener('click', e => { let clickedElement = e.target; if (clickedElement.classList.contains('virtualSelectContainer')) { clickedElement.querySelector('.virtualOptionContainer').classList.toggle('hideElement'); } else if (clickedElement.classList.contains('virtualSelectText')) { clickedElement.nextElementSibling.classList.toggle('hideElement'); } else if (clickedElement.classList.contains('custom-arrow')) { clickedElement.previousElementSibling.classList.toggle('hideElement'); } }, true) }) } const addStyles = _=> { let style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .virtualSelectContainer { position: relative; max-width: 800px; --custom-paddings: 1em 5.5em 1em 1.5em; box-sizing: border-box; color: white; white-space: normal; } .virtualSelectContainer:hover { cursor: pointer; } .virtualSelect { box-shadow: 0 10px 20px rgba(0,0,0,1); font-size: 1.1rem; background: #4d5061; border: 0; max-width: 100%; } .hideElement { display: none; } .virtualOption { padding: var(--custom-paddings); margin-top: 10px; overflow: hidden; } .virtualOption:hover { background: #4A65FF; color: white; } .virtualSelectText { display: block; padding: var(--custom-paddings); } .custom-arrow { display: block; background-color: #3b3c47; height: 100%; width: 5rem; position: absolute; right: 0; top: 0; pointer-events: none; } .custom-arrow::before, .custom-arrow::after { z-index: 10; --size: .65em; content: ''; position: absolute; width: 0; height: 0; left: 50%; transform: translate(-50%, -50%); } .custom-arrow::before { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-bottom: var(--size) solid rgba(255,255,255,.5); top: 40%; } .custom-arrow::after { border-left: var(--size) solid transparent; border-right: var(--size) solid transparent; border-top: var(--size) solid rgba(255,255,255,.5); top: 60%; } .cbSubmitButtonContainer .cbSubmitButton { background-color: #4d5061; box-shadow: 0 10px 20px rgba(0,0,0,1); } .cbSubmitButtonContainer .cbSubmitButton:hover { background-color: #4A65FF; }`; document.querySelector('head').appendChild(style);} mainFunction() }) </script> It is currenlty deployed on this test page: https://c7eku786.caspio.com/dp/7f80b000aa77201adc02489f8c6d Hope someone will find this useful.

I'm looking for a workaround to remove a value on my dropdown field if it was already selected by one of my users and submitted using a submission form. Is that possible?

Hi there, In case if you have 2 dropdowns where all of the options or some of them are equal and you don't want the same option to be choosen in both dropdowns, that JavaScript may help you: <script> document.addEventListener('DataPageReady', function (event) { const dropdown1 = document.querySelector("#InsertRecordDropDown1"); const dropdown2 = document.querySelector("#InsertRecordDropDown2"); dropdown2.onchange = function () { let options1 = dropdown1.options; for (let a1 = 0; a1 < options1.length; a1++) { if (options1[a1].value == dropdown2.selectedOptions[0].value) { options1[a1].disabled = true; } } }; dropdown1.onchange = function () { let options2 = dropdown2.options; for (let a2 = 0; a2 < options2.length; a2++) { if (options2[a2].value == dropdown1.selectedOptions[0].value) { options2[a2].disabled = true; } } }; }); </script> Make sure that you changed IDs of your dropdowns in constantas. Hope someone find it useful=)

I am able to get the cascading dropdowns to work in the details page for first selecting state, then county. However, I am having difficulty making it work in the grid edit mode of my tabular report. Since going through some of the Caspio HowTo documentation, I made my County table into more of a cascading table format that includes columns for both state and county. (I also have a separate table with the list of states in case I need to go back to distinct County and State lookup tables.) When a user selects a county, there is an implied state with it from the County table. My goal is to have the user be able to select the state first in my Facilities tabular report, then select the county as a cascading dropdown filtered on the state value. (Sometimes the state is known when a new facility record is added, but the county not until later.) When I try to implement cascading dropdowns in the grid edit page, there is no option to select the county name as the display value. The column "CountyId" in the Facility table is an integer number data type that stores the autonumber Id from the linked County table. I would appreciate anyone's suggestions! Screenshot included.

Hello; I would like to dynamically choose a lookup table for a dropdown list. Similar to a cascading dropdown, but where the actual lookup table changes. Consider the scenario... Parent Dropdown options: Opt1 & Opt2 When Opt1 is chosen viewOpt1 populates the child dropdown When Opt2 is chosen viewOpt2 populates the child dropdown I have a workaround envisioned that entails adding many fields to the lookup table, and i would prefer to not un-optimize my app by doing that. Does anybody know of a js that can help me with this? Thanks!!

Hi, so I have a datapage that has a dropdown for countries, provinces, and cities. each of these dropdowns are collecting data from individual tables. beside the country dropdown I added a plus icon to give the client the option to add a country if it is not on the list. the plus sign is pointing to another datapage. That all works, my problem is when the client adds another country, and closes the pop up window, it doesn't show in the dropdown. So I am looking for a solution to refresh this particular dropdown without having to refresh the whole datapage and loose all data entered already. Any solutions?

Hi, it seems that the only way to make a field available as a PARENT FIELD for a cascading dropdown, is to make that field editable; otherwise, that field is not an option. I need to filter a dropdown according to a field that I can't allow to be edited. This is what I need on a Bulk Edit on a report: field type: cascading dropdown filter by: parent field parent field type: display only Has anyone run into this before? Any ideas? Thanks

I would like to ask for help in my JS code. I'm trying to change the value of a checkbox in a search form when a specific option in a dropdown is selected. I want the checkbox to be set to true if "Math" is selected in the dropdown. Below is my code that's not currently working: <script> function checkdropdown(){ var drpselected = document.getElementsByName("Value1_1").value; if (drpselected == "Math") { document.getElementsByName("Value2_1").checked = true; } else { document.getElementsByName("Value2_1").checked = false; } } document.getElementsByName("Value1_1").onchange = function() {checkdropdown()}; </script> Also, here is a screenshot in the "Configure Search Fields" step of the DataPage: I'm hoping someone can help me with this. Thank you.

When I first load my website (hosted through Weebly), my drop down menu appears smooshed and is difficult to click on. Is this just an issue with Weebly or is there a way that I could fix this?

I'm needing to create drop down or radio button section that will allow the user to "rank" their choices. I have 4 locations and want them the to rank their preference to that location by selection 1 - 4. But I only want unique answers to each one. So if they rank one as number 1, then I don't want number 1 to be an option for the remaining 3 choices and so on. I've tried several ways but can't get it to work correctly and wasn't able to find any other posts that described this. Any suggestions on if and how it can be down are greatly appreciated.

my one authentication is built from a view based on a user_ table. when i build a report from that view, all fields present their expected values, that is, they show the values that are in the user_ table. however, when i build an HTML page and select authentication fields for embed (using the 'insert parameter' feature), not all fields present their expected values. for instance: [@authfield: user__first_name] prints out the user's first name on the HTML page and [@authfield: user__last_name] prints out the user's last name on the HTML page and even [@authfield: user__display_name] (which is a function that concatenates the first and last name) prints out the user's first name on the HTML page HOWEVER [@authfield: user__original_user_id] displays nothing even though it has a text field value of IAQM6XBX in the user table (upon which the authentication view is built, and, again, which prints out just fine in a tabular report built from that view) AND [@authfield: user__has_a_pool] displays nothing even though the text field has a value of 'Y' in the user table, and even though it prints out just fine in the tabular report built from the view. the only theory i have for why this might be is that the fields that are displaying nothing did not exist when the table was first created; they were later added. that is, i suspect that some caspio features don't update after initial creation (such as authentication view fields). i have created new views based on the updated table, but that hasn't helped. the only thing i haven't tested is creating a whole new table, which i am loathe to do. a perhaps related issue is that i have noted that when i change / add fields in tables - and ensure that those changes are duly reflected in the views that they participate in - datapage lookups for those views still do not reflect the changes in the table fields. in other words, if i were to change 'field ABC' to 'field XYZ' in a table, i can confirm that the change is reflected in view. however, when i select that view as a lookup table for a datapage's dropdown field, i will still see 'field ABC' and not see 'field XYZ'. that is, it is as if the original blueprint of the table/view is preserved. so, any thoughts? thanks for reading this far.

Hi everyone, How can copy the text from the selected drop-down element to the text field? Thanks for looking into. Regards, vitalikssssss

i have changed / added / renamed fields in some tables. i have checked the views which use those tables, and have ensured that the changes are reflected in the view (e.g. ensured that 'include all fields' is checked). however, whenever i use a VIEW for a datapage, the 'datasource' fields that are available for record-level security or for lookup tables in dropdown elements show only the old fields and the old field names. the only way to see the correct fields is to use the table as the datasource, but of course that shouldn't be the case. all this is to say, it seems that dropdowns in datapages for lookup tables and record -level security are using cached versions of the original view/table. a screenshot is tough to pull off, but perhaps this example will help: current table fields: field ABC (originally named field AB) field XYZ (not originally in table or view) current view fields (match table, as expected): field ABC field XYZ fields available for dropdowns and record-level security in datapages (does not match table; unexpected behavior): field AB (not field ABC, and not field XYZ)

I know that there are jquery tools used to completely customize standard form elements such as checkboxes, radio buttons, and dropdown menus. Are there any scripts and ways of styling them in Caspio? If so, what's the easiest way to go about doing it?

I am following this tech tip and was able to make it work except for the part where the original form should be refreshed so the dropdown item will be visible to the user who submitted it. I used the script in the tech tip and have already disabled the HTML editor.

Hi I am stuck with javascript doing multiple calculations in same datapage. 1st javascript is calculation of unit cost, no of units and total (in local currency) 2nd javascript is convert local unit cost to USD based on cascading dropdown field 3rd javascript is using unit cost (in USD), no of units to derive total cost (in USD) the 1st javascript seems to be working. But when I add on 2nd javascript, only one value shows and in the wrong field. There is also no error appearing in the web console. Eg javascript 1 calculation = virtual field 1 = virtual field 1 value javascript 2 calculation = virtual field 2 = virtual field 2 value Instead what i see is this javascript 1 = virtual field 1 = virtual field 2 value javascript 2 = virtual field 2 = blank I followed basically this script and did my own modification http://forums.caspio.com/index.php?/topic/6053-perform-calculations-in-submission-form/ I think the problem is I did not define 2 variable that points to virtual field 1 and virtual field 2 respectively. var totalField = document.getElementsByClassName('cbFormData')[0]; I need 2 of it, and I do not how to define for the 2nd virtual field. Also, how do I pass the the virtual field to a table field? I used the Pass field value as parameter, it does not seem to write into the table. Can anyone please help? <script type="text/javascript"> // Caspio form elements to calculate local total cost var unitcostField = document.getElementById('InsertRecordLocalUnitCost'); var unitsField = document.getElementById('InsertRecordUnit'); // var totalField = document.getElementById("cbParamVirtual1"); ** I tried using this to point to virtual field but it did not work ** var totalField = document.getElementsByClassName('cbFormData')[0]; // Caspio form elements to convert local to USD cost var exchangerateField = document.getElementsByName("InsertRecordExchangeRate")[0]; //var convertField = document.getElementById("cbParamVirtual2"); ** I tried using this to point to virtual field but it did not work ** var convertField = document.getElementsByClassName('cbFormData')[0]; var caspioForm = document.getElementById('caspioform'); // Event handler var calculateTotal = function (event) { // TODO: Do something on value change --> totalField.innerHTML = unitcostField.value * unitsField.value; } var calculateExchangeRate = function (event) { // TODO: Do something on value change --> convertField.innerHTML = (1/exchangerateField.value) * unitcostField.value; } // Run total calculation on input to any of these two fields unitcostField.addEventListener('input', calculateTotal); unitsField.addEventListener('input', calculateTotal); unitsField.addEventListener('input', calculateExchangeRate); unitcostField.addEventListener('input', calculateExchangeRate); </script> Thanks in Advance

I have an issue with the case on the report page, where the field should be active for adding or visible (hidden before). Details: I have a dropdown for answer revision with three status variants: Pending, Approved and Not Approved. The changes are provided via inline edit. If the message status is not approved I should be able to write a comment, but for the other cases window should not appear or should not be editable. It would be nice if somebody can help me with this case. Thanks.

I have found that if I manually click on a dropdown that is a parent to another cascading dropdown, the cascading dropdown works. But when I try to use javascript to change the value of that parent dropdown, I find that it does not kick off the cascading activity of the cascading dropdown that is connect to it. Strangely, the value changes in the parent dropdown (so it works), but it doesn't impact the cascading dropdown. The js code I am using to change the parent dropdown value is: document.getElementsByName("cbParamVirtual1")[0].value="2012"; which successfully updates the value, so I know the JS works. But it doesn't impact the cascading dropdown. Is there an onchange event that is misfiring? Any suggestions?

How to set dropdown field type to receive parameter, upon DataPage onload

Good Morning, I'm using a bulk edit on a tabular search and report. I've noticed that my Cascading drop-downs in the bulk edit show blank entries when there in no data for the filed being edited in it's own table. I have a view set-up to filter out blank entries in the table being used for value purposes; however unless the field has data in its own table it still shows a blank. I found the following code for standard drop downs but haven't found any information for cascading drop downs used in the bulk edit. Hoping someone can assist with code updates. All my attempts have been unsuccessful. Thanks...Bre <SCRIPT LANGUAGE="JavaScript"> <!-- Function removeBlanksInDropdown searches for blank entries and removes all occurrences. It is advisable to use this script with the "Show distinct display options" checkbox checked in the dropdown configuration in the Caspio Bridge DataPage Wizard --> function removeBlanksInDropdown() { /* dropdown stores the value of the dropdown form element reference in the DataPage. */ var dropdown = document.getElementsByName("Value1_1"); for (var q = dropdown[0].length-1; q >= 0; q--) { if (dropdown[0].options[q].value == "") dropdown[0].remove(q); } } document.addEventListener('DataPageReady', removeBlanksInDropdown); </SCRIPT>

This has been asked before but the answer didnt work. I have a Lookup table being called in a Datapage. I want one of the table choices to be the default. It work fine using Custon Lookup table and not using the table. Previous posts said add this to footer: <script type="text/javascript"> function f_default(){ document.getElementById("FieldName").value = "TheDefualtVaule"; } window.onload = f_default; </script> I have done this, referencing the correct field name and value but it doesn't work. Thoughts? Thanks as always.