Discussions

Expand all | Collapse all

A button to copy the content of a field to clipboard

Jordan McAlister06-05-2019 13:25

Jordan McAlister06-10-2019 12:19

Jordan McAlister06-11-2019 22:03

Jordan McAlister06-13-2019 18:49

  • 1.  A button to copy the content of a field to clipboard

     
    Posted 01-03-2019 14:51
    I have a field in a form that I need to copy to clipboard, I'd like to create a button that does that, is it possible? I've try javascript but nothing works so far, please help and thank you


  • 2.  RE: A button to copy the content of a field to clipboard

    Posted 06-05-2019 13:25
    anyone?



  • 3.  RE: A button to copy the content of a field to clipboard

    Posted 06-05-2019 13:54
    I really don�t know anything about this stuff first hand but somebody told me that there are security issues involved in copying information onto your clipboard which essentially means your copying it into your computer. I have heard you have to have an app of some kind installed to be able to do that.


  • 4.  RE: A button to copy the content of a field to clipboard

    Posted 06-05-2019 15:50
    I know even less than that, but it is possible for a browser to push content to your clipboard. For example, I routinely use wetransfer.com, which has a button that does just that.

    Dan Diebolt's pastebin app has a button that does it, too. https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=726&rl=9eb

    So we can be certain that it's possible in QB.


  • 5.  RE: A button to copy the content of a field to clipboard

    Posted 06-05-2019 21:44
    Well, here is link to a button I am trying to replicate, and the demo works, but I'm trying to retrofit it to work for my case of just copying one field instead of multiple.

    https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=654&_ga=2.213316500.1672376286.1559564048-1030199511.1545336323



  • 6.  RE: A button to copy the content of a field to clipboard

    Posted 06-05-2019 21:53
    Oh, I should have known he'd have shared that code. I got almost all the way to an actual answer, ha.

    So the hard part is done and you just need to meddle with the content of the API query and its outputs?


  • 7.  RE: A button to copy the content of a field to clipboard

    Posted 06-10-2019 12:19
    yes!


  • 8.  RE: A button to copy the content of a field to clipboard

    Posted 06-10-2019 12:19
    want me to post my code to see if you can see an error?


  • 9.  RE: A button to copy the content of a field to clipboard

    Posted 06-11-2019 15:22
    Sure! Is it not working?

    And I guess I can take it you're not here in Miami at Empower?


  • 10.  RE: A button to copy the content of a field to clipboard

    Posted 06-11-2019 22:01
    (function() {

      var dbid = "bmwnna5n4";
      var dbidTable1 = "bmwnwyvin";
      var apptoken = "dx3ta9k8ehe8acqra66ic6unwyr";
      $.ajaxSetup({data: {apptoken: apptoken}});

      var querystring = document.location.search;

      if (/a=dr/i.test(querystring)) {
        $("img[qbu=module]").closest("td").css("background-color", "#FFFFFF");
        var audio = new Audio("http://dl.dropboxusercontent.com/s/7ubb14hilzkgnfk/slipkid.mp3");

        $("#QBU_Clipboard").on("click", event => {
          audio.play();
          var rid = QBU_Clipboard.dataset.rid;

          $.get(dbidTable1, {
            act: "API_DoQuery",
            query: '{3.EX.${rid}}',
            clist: "165"
          }).then(function(xml) {

            var mytext = $("STB:Sketch Text", xml).text();
         
            navigator.clipboard.writeText(mytext)
              .then(() => {
                $.jGrowl("I Got My Clipboard!", {life: 5000, theme: 'jGrowl-green'});
              });
          });

        });
      }

    })();


  • 11.  RE: A button to copy the content of a field to clipboard

    Posted 06-11-2019 22:03
    Correct, I am not at Empower


  • 12.  RE: A button to copy the content of a field to clipboard

    Posted 06-11-2019 22:04
    I'll end up deleting the mp3 and changing the growl message but just trying to get it working first


  • 13.  RE: A button to copy the content of a field to clipboard

    Posted 06-11-2019 22:25
    My whole reply got deleted while typing, wonderful.

    Is your field name currently "STB:Sketch Text"? Have you tried a name without a colon in it? IS that even text, or is it some kind of "fancy" text? Weird question I know but it doesn't look to be just simple text from a quick Google search.

    Does the copy button on your form have a type/value of this? data-rid="1"
    The one on Dans site does and that is used in the DoQuery call.

    Where exactly is your error? Or even a ballpark of where it fails, does the DoQuery return an xml at all?


  • 14.  RE: A button to copy the content of a field to clipboard

    Posted 06-11-2019 22:25
    My whole reply got deleted while typing, wonderful.

    Is your field name currently "STB:Sketch Text"? Have you tried a name without a colon in it? IS that even text, or is it some kind of "fancy" text? Weird question I know but it doesn't look to be just simple text from a quick Google search.

    Does the copy button on your form have a type/value of this? data-rid="1"
    The one on Dans site does and that is used in the DoQuery call.

    Where exactly is your error? Or even a ballpark of where it fails, does the DoQuery return an xml at all?


  • 15.  RE: A button to copy the content of a field to clipboard

    Posted 06-12-2019 12:49
    Good questions!
    Just tried a non-colon name, but to no avail; also, yes, the text I am trying to copy is a special text. It looks like this:

    All of the text is also dependent on other things, so it has fields in the formula rich text too. Here is, for instance, the first couple lines:

    //START HIGHLIGHT SECTION
        "<p style='font-family: Tahoma, Verdana, Segoe, sans-serif;line-height:0'><span style='font-size:85%; font-weight:bold; background-color:        #FFFF00'>" & "LAT/LONG: " & [Pole Location: Street 1] & "</span></p>"&
    //END HIGHLIGHT SECTION

    //START BASIC INFO SECTION
        "<p style='font-family: Tahoma, Verdana, Segoe, sans-serif;line-height:0;padding-left:30px'><span style='font-size:85%; font-weight:bold'>Point " & [STB:Point#]     & "</span></p>"&

        "<p style='font-family: Tahoma, Verdana, Segoe, sans-serif;line-height:0;padding-left:30px'><span style='font-size:85%; font-weight:bold'>Tag# " & [Tag #] & "    </span></p>"&

        "<p style='font-family: Tahoma, Verdana, Segoe, sans-serif;line-height:.1;padding-left:30px'><span style='font-size:85%; font-weight:bold'>Location# " &             [Location #] & "</span></p>"&
    //END BASIC INFO SECTION

    I would be fine with just manual highlighting the text and pasting, but doing that doesn't copy the text color, background, or line spacing I need.

    The text field is a formula rich text and has a fid of 165

    The table the text field and copy button are located in had dbid of bmwnwyvin.

    Here is the code for my copy button:

    [iol] & "copybutton.js" & [/iol]
    &
    "<a id='QBU_Clipboard' class='Vibrant Success' " &
    "  data-rid='" & [Pole ID#] & "'" &
    ">Copy To Clipboard</a>"

    Everything works except for the copying. The music plays and the "I Got My Clipboard" popup box shows and nothing else happens. Are you saying the error is in the copy button code? What should I change, if so?


  • 16.  RE: A button to copy the content of a field to clipboard

    Posted 06-12-2019 12:53
    Also, [Pole ID#] is [Record ID#] just with a name change.


  • 17.  RE: A button to copy the content of a field to clipboard

    Posted 06-12-2019 15:59
    What I would do is put a lot of console.log's in there and just see if the data is what you expect at all points of the script. I assume it is failing around where it does the DoQuery but I'm not sure. That and maybe try doing this on a basic text field first and then move on to the STB:Text after you get the basic working.

    So since you only changed the name and Pole ID# is still FID 3 correct?

    The only other thing I can think of is a permission issue in the browser. If you are using chrome then how it should work is the current active tab has permission to write to the clipboard. If for some reason it is not the active tab, like if you have the dev console open and are using it(this becomes the active tab), it might fail.

    Sorry I can't be more help here, I'm sure you have thought about most of this.


  • 18.  RE: A button to copy the content of a field to clipboard

    Posted 06-12-2019 15:59
    What I would do is put a lot of console.log's in there and just see if the data is what you expect at all points of the script. I assume it is failing around where it does the DoQuery but I'm not sure. That and maybe try doing this on a basic text field first and then move on to the STB:Text after you get the basic working.

    So since you only changed the name and Pole ID# is still FID 3 correct?

    The only other thing I can think of is a permission issue in the browser. If you are using chrome then how it should work is the current active tab has permission to write to the clipboard. If for some reason it is not the active tab, like if you have the dev console open and are using it(this becomes the active tab), it might fail.

    Sorry I can't be more help here, I'm sure you have thought about most of this.


  • 19.  RE: A button to copy the content of a field to clipboard

    Posted 06-12-2019 21:25
    Thanks for the help! I'm not too code savvy, so some of this I haven't thought through, so your suggestions are helpful. Pole ID# is FID 3 still. I put in the console.logs and also started on basic text field. I got returns on my "querystring" and "rid" then it spits out nothing for my console.log(mytext), so I guess my API_DoQuery is the problem.


  • 20.  RE: A button to copy the content of a field to clipboard

    Posted 06-12-2019 23:14
    Hopefully this does not keep double posting for me. So is it not giving you any kind of response back? No xml at all? It should give you an xml response that has an error or says basically nothing when it works but it will have the info you requested.

    What we can do is break this down into smaller parts. I just tested this myself and got a response with the correct information. However as I hopefully said earlier(I could not edit at the time) for this to work the window NEEDS to be the focus. If it is not the focus then Chrome does not allow you to set the clipboard. When using the console, the console is the focus so it breaks. The below code should work right now but it gives me an error in console because the window is not focused. 

    This is just the basic part of the code that sets up ajax and creates the DOQuery request. You will need to add the variables to it for dbidtable1, rid, and apptoken. Once that is done can you try it in console and see if it returns the xml document? It should print it out in console as "#Document" and you can then open it and see what was picked up.

      $.ajaxSetup({data: {apptoken: apptoken}});

          $.get(dbidTable1, {
            act: "API_DoQuery",
            query: '{3.EX.${rid}}',
            clist: "165"
          }).then(function(xml) {
    console.log(xml);
            var myText = $("insert field name here", xml).text();

            navigator.clipboard.writeText(info)

          });


  • 21.  RE: A button to copy the content of a field to clipboard

    Posted 06-13-2019 18:49
    This is what I get:


  • 22.  RE: A button to copy the content of a field to clipboard

    Posted 06-13-2019 18:51
    I used it with a simple text field with FID 26 and name "Notes" and within the #document, it showed the correct text it had in the notes. I don't know what the "Uncaught" error is though


  • 23.  RE: A button to copy the content of a field to clipboard

    Posted 06-13-2019 21:48

    So right now we have figured out that that section seems to be working. So the DoQuery call works.

    That uncaught error is because the window is not the focus. Since you entered it from the console the console is the focus. If you do this with a button on the form now it should work. I don't know the IOL technique very well because we don't really use it here. I wish I could help more with that part. It might be as simple as just putting the part you tested into a function and then having the button on the page call the function.