Jump to content


Caspio Rockstar
  • Content Count

  • Joined

  • Last visited

  • Days Won


Reputation Activity

  1. Thanks
    kpcollier reacted to NiceDuck in Back button in Multi Step Form   

    I think of something, However, you would need another single update form. When you press the back button or link, you will be redirected to a single update form which contains the values on your first submission form. Hmmm You may refer to this picture for elaboration.

    I hope this helps you.


  2. Like
    kpcollier reacted to Hastur in Multi Step Form Customization   
    Hello @kpcollier
    You can implement a similar workflow if you create datapages "on the fly".
    It can be done if your datapages use AJAX. All datapages are AJAX by default. 
    First of all, you should create a wrapper div where you will load a new step datapage.
    On each step of submission, you need to define the custom event to clear wrapper and load new datapage. This event should be fired on click of next/prev buttons.
    Example of the function:
    function createPage() { var dataPage = document.createElement('script'); dataPage.src = 'https://your_domen.caspio.com/dp/your_app_key/emb?param1=' + val1 + '&param2=' + val2; document.getElementById('wrapper').appendChild(dataPage); }  
  3. Thanks
    kpcollier reacted to SunakoChan in Letter-Style DataPage   
    Hi @kpcollier, Have you tried the format that I have provided you on the other post,  they are pretty the same: 
  4. Like
    kpcollier reacted to Hastur in Limit Certain Selections in List Box   
    Hello @kpcollier
    I think that the better idea will be to use Cascading to restrict the amount of values you get in multi-select list box.
    You can check this article to get familiar with this feature - https://howto.caspio.com/datapages/datapage-components/cascading-elements/
    You can use virtual field to  define to category. Then you may use this field as the parent field to get appropriate set of options in multi-select list box.
  5. Like
    kpcollier reacted to DefinitelyNot31337 in Formula on the Trigger Level   
    First, I'm not sure why you had to do Full Name and Full Address on your Work Order table when you can structure it the same way as your Clients table (with First_Name, Last_Name, etc... on separate fields).
    I haven't reviewed the table design and workflow as well. Haha. But I wanted to mention that formula field values can be referenced in the trigger (Read-only).
    This means that if you are able to separate the fields you need on a formula field, you may simply set First_Name_Text255 = #inserted.First_Name_Formula on your trigger.
    Hope this helps
  6. Thanks
    kpcollier got a reaction from Vitalikssssss in Make JS Work With Empty Fields   
    Haha, wow. Your code looks SO nice, specially compared to the way I did it. Thank you @Vitalikssssss it works great.
  7. Thanks
    kpcollier reacted to Vitalikssssss in Make JS Work With Empty Fields   
    Hi @kpcollier,
    Try this code:
    <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { let v_fields = ["Labor1_Rate", "Labor1_Hours", "Labor2_Rate", "Labor2_Hours", "Labor3_Rate","Labor3_Hours", "Labor4_Rate", "Labor4_Hours", "Labor5_Rate", "Labor5_Hours", "Labor6_Rate", "Labor6_Hours", "Labor7_Rate", "Labor7_Hours", "Labor8_Rate", "Labor8_Hours", "Labor9_Rate", "Labor9_Hours", "Labor10_Rate", "Labor10_Hours", "Labor11_Rate", "Labor11_Hours", "Labor12_Rate", "Labor12_Hours", "Labor13_Rate", "Labor13_Hours", "Labor14_Rate", "Labor14_Hours", "Labor15_Rate", "Labor15_Hours", ]; let t_field = ["Labor1_Total", "Labor2_Total", "Labor3_Total", "Labor4_Total", "Labor5_Total", "Labor6_Total", "Labor7_Total", "Labor8_Total", "Labor9_Total", "Labor10_Total", "Labor11_Total", "Labor12_Total", "Labor13_Total", "Labor14_Total", "Labor15_Total",]; let sub_total = document.getElementById("InsertRecordLabor_SubTotal"); sub_total.value = 0; let v_state = []; let t_state = []; v_fields.forEach(function(el) { if (el !== null) { v_state.push(document.getElementById("InsertRecord"+el)); } }); v_state.forEach(function(el){ if (el !== null) { el.addEventListener("keyup", calculate); } }); t_field.forEach(function(el) { if (el !== null) { t_state.push(document.getElementById("InsertRecord"+el)); } }); function calculate() { let i = 0; t_state.forEach(element => { if (element !== null) { element.value = ((!isNaN(v_state[i].value)) ? v_state[i].value : 0) * ((!isNaN(v_state[i+1].value)) ? v_state[i+1].value : 0); sub_total.value = +sub_total.value + +element.value; console.log(sub_total.value); i+=2; } }); } }); </script>  
    This code should resolve the issue.
  8. Like
    kpcollier reacted to SunakoChan in Make List Results Full Screen On PDF   
    Hi @kpcollier-Try this, just enable the source then paste it:
    <div style="text-align: center;"><span style="font-size:14px;">Capital Glass, Inc.<br />
    SM Bid / Work Order</span>
    <hr /><span style="font-size:14px;"><br />
    Job/Customer Name: _________________________________________ Phone #: _______________________<br />
    Contact Name: ______________________________________________ Phone #: _______________________<br />
    Fax Number: ______________________________________ E-Mail: __________________________________<br />
    Job Address: ________________________________ City: __________________ St:________ Zip:__________<br />
    Bill To (if different from above):_________________________________________________________________<br />
    Billing Address: _____________________________ City:__________________ St:_________ Zip:__________<br />
    PO #: ________________&nbsp; &nbsp;Warranty:______________&nbsp;&nbsp; Order Date:________&nbsp;&nbsp;&nbsp; Estimator: _______________</span><br />
    <table align="center" border="1" cellpadding="1" cellspacing="1" style="height:300px;width:700px;">
                <th scope="row">Quantity</th>
                <td style="text-align: center;">Size</td>
                <td style="text-align: center;">Description</td>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
                <th scope="row"></th>
    <span style="font-size: 12pt;"></span></center>
    <center style="text-align: left;">
    <center style="text-align: justify;"><span style="font-size:12.0pt;"></span><span style="font-size:12.0pt;"></span><span style="font-size:12.0pt;"><span style="font-size:12.0pt;"><span style="font-size:12.0pt;"><span style="font-size:12.0pt;"></span></span></span></span></center>
    <center><span style="font-size:12.0pt;"><span style="font-size:12.0pt;"><span style="font-size:12.0pt;"><span style="font-size:12.0pt;"><br />
    Labor hours to be billed:</span>_______________________________________________&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></span></span></center>
    <center style="text-align: center;"><span style="font-size:12.0pt;"> </span></center>
    <center style="text-align: justify;"></center>
    <center style="text-align: center;"><span style="font-size:12.0pt;">Scope of work:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;<br />
    ______________________________________________________________________________<br />
    ______________________________________________________________________________</span><br />
    <br />
    <span style="font-size:12.0pt;">Comments:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
    ______________________________________________________________________________<br />

    Here is the actual result in preview:
    Here is the actual result  in PDF:

  9. Like
    kpcollier reacted to Vitalikssssss in Button To Copy Address - Cascading Elements   
    Hi @kpcollier,
    You can use "start with" type of comparison in query selector like this:
    document.querySelector("input[id^='InsertRecordPrimary_Address']").value; The whole code would look like this:
    <script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { function f_address(){ if(document.getElementById('cbParamVirtual4').checked) { document.querySelector("input[id^='InsertRecordBilling_Address']").value = document.querySelector("input[id^='InsertRecordPrimary_Address']").value; document.querySelector("input[id^='InsertRecordBilling_City']").value = document.querySelector("input[id^='InsertRecordPrimary_City']").value; document.querySelector("input[id^='InsertRecordBilling_State']").value = document.querySelector("input[id^='InsertRecordPrimary_State']").value; document.querySelector("input[id^='InsertRecordBilling_Zip']").value = document.querySelector("input[id^='InsertRecordPrimary_Zip']").value; } else { document.querySelector("input[id^='InsertRecordBilling_Address']").value = ""; document.querySelector("input[id^='InsertRecordBilling_City']").value = ""; document.querySelector("input[id^='InsertRecordBilling_State']").value = ""; document.querySelector("input[id^='InsertRecordBilling_Zip']").value = ""; } } document.getElementById('cbParamVirtual4').onclick= f_address; }); </script>  
  10. Like
    kpcollier reacted to JolliBeng in PDF Report Page   
    Just to add on @AtayBalunbalunan's comment, if you have a copy of your layout saved as a Word document, you can use the Paste from Word option on your HTML block. In that way, you'll be able to print the details with your desired layout.
    Here's a screenshot:

    Also, here's the DataPage I created using that workaround. Click this link.
  11. Like
    kpcollier reacted to NiceDuck in submission form. send email to different users depending on the value of a certain field in the submission form.   
    I want to share something with you guys again. 
    Back then when I only have an 'explore plan', I'm using this workflow to send acknowledgement/notification emails on different persons base on a value of a field in my submission form.

    My workflow back then is I have a submission form for job applicants.  I want to send an email to a certain member of my company depending on which position the applicant is app laying.  for example.
    If the applicant is applying for a staff position, there will be an email an email send to staff manager, 
    If the applicant is applying for an agent position, there will be an email an email send to agent manager. 
    This could easily be done via trigger but since it was unavailable on explore plans. This is what I did. 
    First I made a lookup table containing the emails of the designated managers where I used the job they are managing as a unique field. 
    Then on my submission form. I made a virutal field and  set it as a cascading dropdown that is using the field for the position the user is applying for as a parent field and used the table containing the emails of the managers as a lookup table. I enveloped this virtual field with html blocks with html codes for hiding fields. please see this documentation for reference : https://howto.caspio.com/tech-tips-and-articles/common-customizations/how-to-hide-fields-in-datapages/ and https://howto.caspio.com/datapages/datapage-components/cascading-elements/ .
    Now that it was hidden, we will now proceed to the messaging options.  It is up to you to chose  if you want an Notification emails or Acknowledgement emails. As I check It works with any of them as long as you are going to use the virtual field with cascading value as the field reference for email. 
    It will now send an email on different person depending on what job the user is applying to.
    I hope it helps anyone. Also please comment if you have a better idea.
  12. Thanks
    kpcollier reacted to TaxGuy in Multiple calculations using javascript   
    Putting the calculations in JS is much faster. My page took 2 minutes to load; it is down to about a second. There is a limit to 10,000 characters in one HTML block so I'm working on splitting it out.
  13. Thanks
    kpcollier reacted to alexm72 in Loading Screen appears after Submit Button is pressed   
    Hi folks I wanted to share a cool code with everyone when you press the Submit Button on a Form.  Well when you press the Submit Button with a file in it to load and there is a unique field in it (such as a Username for a registration form), there's a bit of a delay until you ge to the confirmation screen.  This confuses the Submitter and may press the button again - which results in an error because now the form is submitted twice but the same username was alreast submitted on the first form
    Anyway you want a Loading screen to pop up.  Caspio should have this simple feature for a "low coding" platform!
    In your header drop this code (#Submit is the submit button - on an update form its something different, #processing is the name of my div that will show the processing window after submission):
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    In the Footer drop this:
    <div id="processing"  style="display:none;background-color:rgba(222,200,70,0.9);height:100vh;width:100vw;position:fixed;top:0;"><br/><br/><span style="display:table;height:75wh;margin:auto;top:0;bottom:0;left:0;right:0;">Processing, Please Wait....<br/><br/><img style="display:table;margin:auto;" src="http://skquares.com/processing.gif"></img><br/<br/></span></div>
    thats it!  Notice the display is set to none because you dont want to show the window until the Submit button is pressed via the Jquery script.  Notice the height and width are set to the size of the screen with a position of fixed, top:0 - so that the whole screen is covered but you can shrink it by putting less width and height; background is my own color choice but you can change that - note leave the opacity not at 100% but I have it at 90%(0.9) so that the user can still see the form a little.  Also, http://skquares.com/processing.gif is where i store MY image so you have to change it to where you image is hosted (but you could use mine i guess).
    Ok I hope this helps!
  14. Like
    kpcollier reacted to DefinitelyNot31337 in Passing field values with ampersand (&) over query String   
    Hello @TroubleShooter,
    The reason why the ampersand symbol is being cut is because Caspio renders the link literally. In this example:
    <a href="https://www.google.com?myParameter=[@field:someField]"> Link </a>  
    If "someField" evaluates to "Some Value & Another Value" then the mark-up would result to 
    <a href="https://www.google.com?myParameter=Some Value & Another Value"> Link </a>  
    This is when urlencoding comes into play. What this does is substitutes the special characters in a standard HTML format which interprets characters a different way.
    You may try using my code snippet below.
    1.) Just replace the link ID with the id attribute of your link.
    2.) repeat the addParameter function as needed. The first argument is your parameter name, and the second argument is your field value.
    <a href="#" id="link-1">MyLink</a> <script> // DO NOT TOUCH FROM THIS POINT var params = []; addParameter = function(qs, val){ params.push(`${qs}=${encodeURIComponent(val)}`); } //UP TO THIS POINT var link_id = "link-1"; var base_url = "https://SomeDomainFrom.caspio.com/dp/926560as124321324dasd00a6523f123123624543123423fc0453b9093"; addParameter('boo', '[@field:SelectedAction]'); //repeat as needed addParameter('far', '[@field:SelectedAction]'); // DO NOT TOUCH FROM THIS POINT var queryString = params.join("&"); document.querySelector(`#${link_id}`).href = `${base_url}?${params.join("&")}` //UP TO THIS POINT </script>  
    Works for me.
  15. Thanks
    kpcollier reacted to Vitalikssssss in Button to Submit Name   
    Hi @kpcollier,
    I have seen similar behavior on Caspio Ready Made App called Resource scheduling.
    Login in as a member, perform a simple search and you will see a Tabular Report with "Reserve this Item" button which performs similar logic.
    I believe you need the following items in order to create similarly flow within your app:
    1. Single record update form with default elements hidden by CSS.
    2. Embed this DP in the HTML block of the report by using the Iframe deployment method.
    I need to mention that DP performance might decrease if you have a lot of records on Result set (e.g. 250 per page).
    Hope this helps.
  16. Like
    kpcollier reacted to kgraham2121 in Button to Submit Name   
    @kpcollier - Maybe a triggered action?  I do something similar in an Audit Log/Audit Trail Process.  We have a group of Yes No questions on a checklist our billing group uses.  We log any changes to any of the questions on the checklist - including timestamp/user.  I am not a trigger expert - but seems something to this effect would work:
    On update of record, if #inserted value of your'Take Me!' button field is Yes and Original value was No, then insert Userstamp into 'Assigned to' field.
    Hope this may help a little...
  17. Thanks
    kpcollier reacted to DesiLogi in How to show & hide submit & details form on same page as tabular results using div column changes in bootstrap   
    I thought this might be helpful across the board for people developing in Caspio. I've been trying to do a better UI for data entry on web pages that also have to show results in a tabular report.
    Since iframes don't reliably pass parameters from parent to child and back it's necessary to sometimes deploy 2 datapages (a Submit or Details and a Tabular) on the same web page. This doesn't really look good from a UI perspective. 
    This solution requires using bootstrap and jquery but it's fairly straightforward. 
    One option is to put the the Submit/Details  deploy code in the first div with something like class="col-md-3" and the Tabular deploy code in the next div with class="col-md-9" (divs in bootstrap with col classes must add up to 12 but no more than 12, in basic mode). This will put the 2 datapages next to each other, the 1st with 1/4 screen width and the 2nd with 3/4th. However, this setup looks cluttered and can constrain the Tabular report which often needs full page width to show its data clearly. 
    So the ideal would be to onload hide/collapse the first div (with the Submit/Details form) and have the second div (tabular report) a full 12 columns wide. Then click a button or link to show the 1st div (Submit form) and change the 2nd div (tabular report) to 9 columns, thereby displaying both datapages when data entry/edit is needed. Clicking the button/link again (in this method) will collapse div1 and expand div2 back to 12 columns. So it's easy to toggle views this  way. 
    To do this: 
    Put this in the body of your webpage (you may have bootstrap and jquery referenced differently):
    <div class="container-fluid"> <br> <div class="row"> <div class="col-md-3 bg-faded"> <div id="showsubmitform" class="collapse"> Caspio Deploy Code for Submit/Details form </div> </div> <div class="col-md-12" id="right"> <div> Caspio Deploy Code for Tabular Report </div> </div> </div> </div> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script> $('#btnSwitch').click(function(){ $('.col-md-3').toggleClass('show'); $('#right').toggleClass('col-md-9 col-md-12'); }) </script> And then put a button or link elsewhere on your page, wherever you want to show it: 
    <a class="btn page-action" id="btnSwitch" href="#showsubmitform" style="color:green;" data-toggle="collapse"><i class="fa fa-plus" aria-hidden="true"></i> Submit New Data</a> When the page is loaded the Tabular Report will be the only datapage showing, in full width. 
    When the 'Submit New Data' link is clicked the Tabular Report moves to the right and shrinks to 9 columns from 12. The space that opens on the left is 3 columns wide and will now show the Submit/Details form. 
    When the 'Submit New Data' link is clicked again it will hide the Submit/Details form and expand the Tabular Report back to 12 full columns. 
    You can change the column numbers of the divs and button ids and labels to suit. This solution might help with some UI massaging, if anyone is working on that aspect of their app...
  18. Thanks
    kpcollier reacted to Glitch in Align Buttons   
    I think there can be an easier way here. If you're using the same style as the buttons, might as well hide the ID instead of the class, so you can use the class when creating the button.
    You can hide the ID of the element, something like this:
    input[id^='Submit']{display: none !important;}
    so you can create this button>
     <input type="submit" name="Submit" value="Submit" class="cbSubmitButton">
     <a href="REDIRECTION LINK"><button class="cbSubmitButton">Choose Again</button></a>
    This would work the same, just avoiding that extra effort to restyle the button. ❤❤

    @kpcollier, when you put in the code> display: none, this should hide the button. If you are using responsive code, you may want to add this piece of code inside the media query. Maybe that will help. 
  19. Like
    kpcollier reacted to Nuke354 in Work Around Solution for Printing Reports   
    I suggest using Print.js. With Print.js you can target the specific id of the element that you wanted to print out as a PDF.
    More info on the link here: https://printjs.crabbly.com/
  20. Haha
    kpcollier got a reaction from DefinitelyNot31337 in API: Error on update record with triggered action   
    The best kind of solutions. 
  21. Like
    kpcollier reacted to BaySunshine in 'Click to add more' or something similar?   
    Hi @kpcollier,
    You can use triggers to insert 3 lines in a new/existing table on an insert action in a table.  For calculating total cost estimates, you can use a report. 
    I hope that helps.
  22. Like
    kpcollier reacted to Hastur in 'Click to add more' or something similar?   
    Should each new item contain the same Labours group?
    If yes, please check the application attached. TRIGGER_Assign_Labours_1_0_2019-Jun-14_0919.zip
    The trigger under "Item_and_Labours" table will multiple entries as soon as you submit a new one.

    You need to import this zip file into your account.
    Here you can find the information related to the import process - https://howto.caspio.com/tables-and-views/importing-data/
  23. Like
    kpcollier reacted to DefinitelyNot31337 in Custom Link/Button - This Site Can't Be Reached   
    Hello @kpcollier,
    You have a typo error on your URL Scheme. Semicolon ":" is missing. Make sure that your URL starts with https://
    Good thing I have good eyes. Lol. Apologies for being vain.
    Happy Hacking!
  24. Like
    kpcollier reacted to SunakoChan in Custom Link/Button - This Site Can't Be Reached   
    I think it would be better if you can create a test datapage and check if that will work. If the replicated page works, then there is something wrong with your URL in your original link. Re-deploy and re-paste the URL of the deployed DataPage. Hence, if the replicated Datapage still does not work, check your HTML code. 
  25. Like
    kpcollier reacted to SinJunYoung in Standard PDF Feature   
    This article provides elaborate demonstration for the PDF Report function of Caspio. Note that this is only available in the Reports and not in the submission form. 
    Selecting as Download Options 
    PDF download option is available in all Report DataPages, including Pivot Tables and Combined Chart and Reports. This option allows your app users to download the displayed Report DataPage as a PDF file.  
    You can also find this information from one of the Release notes article: https://howto.caspio.com/release-notes/caspio-bridge-13-0/ 
      If your PDF is enabled as a Download option, you can actually set and customize it according to your preferences. Just click the icon beside it to check the default configuration of the PDF. 
  • Create New...