Loading Values from Webpage onto Clipboard

[GGandhi]

Re: Loading Values from Webpage onto Clipboard

Requirements: the client computer have to have alpha five installed and server running

You are correct, I just tested on a computer which has no knowledge of alpha.
The first one had alpha in it.

[TheSmitchell]

Re: Loading Values from Webpage onto Clipboard

I believe the xbasic clipboard functionality accesses the server's clipboard, not the client's. :(

[cpgood]

Re: Loading Values from Webpage onto Clipboard

Hi gandhi,

Thank you for working on this problem and thank you for the great Jing movie. As you have pointed out this solution was close but would not work on the web in all browsers. I consulted with a web developer that does not use Alpha Five products. He wrote a solution that uses javascript and some plug-ins that are available via the web. I do not understand how to implement this solution in Alpha Five. I have a Dialog2 component that I want to put the copy to clipboard button on. I do not understand how to add this javascript to my project and how to set the button up to run the javascript.

I have attached the work of the web developer that developed the non Alpha Five solution.

[TheSmitchell]

Re: Loading Values from Webpage onto Clipboard

This code goes in the Javascript Code portion of your dialog or grid:

        $(document).ready(function () {
            $('#copy-to-clipboard-link').clipboard({
                path: 'js/jquery.clipboard.swf',

                copy: function() {
                    return 'Name: ' + $('#field-name').val() + ', Email: ' + $('#field-email').val() + ', Phone: ' + $('#field-phone').val();
                }
            });
            $('#copy-to-clipboard-button').clipboard({
                path: 'js/jquery.clipboard.swf',

                copy: function() {
                    return 'Name: ' + $('#field-name').val() + ', Email: ' + $('#field-email').val() + ', Phone: ' + $('#field-phone').val();
                }
            });
        });

You want to replace the return value for copy: function () {...} with the code to get the values from your grid/dialog.

The js & swf files go in your javascript directory for your project. Add them from within Alpha. There's a "Add File" button that in the Web Projects Control Panel for adding files. I believe it will copy the file(s) to the appropriate directory for you.

You will want to replace all instances of "$" with "jQuery." since "$" is a shortcut for "document.getElementById" inside Alpha whereas "$" is used as a shorthand for "jQuery" everywhere else. EG:

        jQuery(document).ready(function () {
            jQuery('#copy-to-clipboard-link').clipboard({
                path: 'js/jquery.clipboard.swf',

                copy: function() {
                    return 'Name: ' + jQuery('#field-name').val() + ', Email: ' + jQuery('#field-email').val() + ', Phone: ' + jQuery('#field-phone').val();
                }
            });
            jQuery('#copy-to-clipboard-button').clipboard({
                path: 'js/jquery.clipboard.swf',

                copy: function() {
                    return 'Name: ' + jQuery('#field-name').val() + ', Email: ' + jQuery('#field-email').val() + ', Phone: ' + jQuery('#field-phone').val();
                }
            });
        });

You may or may not need to do this inside your jquery.clipboard.js file. I don't think you need to -- others may want to weigh in on this one.

I don't think you need to include the "js/jquery-1.11.1.js" file. Alpha5 ships with jQuery. But, if you get complaints about it missing, then you'll want to list it in your grid's/dialog's Javascript Linked Files property along with jquery.clipboard.js file.


Replace 'copy-to-clipboard-link' and/or 'copy-to-clipboard-button' with the ID of your button/link. For example, if you put a link your Dialog for the copy, the id for that link would be something such as '{dialog.componentName}.V.R1.LINK_ID', assuming you used a link field and named it "LINK_ID". Note: you will need to escape the '.' to use the id inside jQuery('...'):

var ele = jQuery('#{dialog.componentName}\\.V\\.R1\\.LINK_ID');

That should get you started, probably.
---
Sarah

[cpgood]

Re: Loading Values from Webpage onto Clipboard

Hi Sarah,

Thank you for your detailed instructions. I'm having a tough time understanding how to locate the names of the fields on my dialog form. It appears that I click on the xBasic tab and this exposes this type of information. However I'm still lost. I'm trying to complete the copy: function() sections of the javascript.

Thank you,
CPGood

[TheSmitchell]

Re: Loading Values from Webpage onto Clipboard

Hi Sarah,

Thank you for your detailed instructions. I'm having a tough time understanding how to locate the names of the fields on my dialog form. It appears that I click on the xBasic tab and this exposes this type of information. However I'm still lost. I'm trying to complete the copy: function() sections of the javascript.

Thank you,
CPGood

It's easier if you use a tool like FireBug to figure out the names. But, unless there's some reason for it, the name of your components in a dialog should be of the form "{dialog.componenName}.V.R1.NAME_OF_FIELD".

NAME_OF_FIELD is going to be the value in the Variable Name or ID property for the field.

Easy example. If you insert the Submit-Reset pair of buttons into your dialog, they are given the Ids 'BUTTON_SUBMIT' and 'BUTTON_RESET'. The full ID for these buttons would be '{dialog.componentName}.V.R1.BUTTON_SUBMIT' and '{dialog.componentName}.V.R1.BUTTON_RESET'.

Since you're using these Id's in a jQuery lookup, then you'll also want to escape the . characters, otherwise it'll give you problems: '{dialog.componentName}\\.V\\.R1\\.BUTTON_RESET'. (You don't escape anything inside {dialog.componentName}; Alpha replaces that with the actual name of the dialog component.).

[TheSmitchell]

Re: Loading Values from Webpage onto Clipboard

The thought occurs to me that you probably want to use some variant of {dialog.object}.getValue('FIELD_NAME') or $gvs('{dialog.componentName}.V.R1.FILED_NAME') instead of jQuery(<long escaped id here>).val(). The first 2 are alpha functions and you don't have to escape all the periods. So, something like...

    copy: function() {
         var name = {dialog.object}.getValue('FIELD_NAME');
         var email = {dialog.object}.getValue('FIELD_EMAIL');
         var phone = $gvs('{dialog.componentName}.V.R1.FIELD_PHONE');

         var str = 'Name: ' + name + ', Email: ' + email + ', Phone: ' + phone;
         return str;
    }

---
Sarah