Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Access The Native Device Clipboard In Telerik NativeScript

TwitterFacebookRedditLinkedInHacker News

Have you ever wanted to copy something from your application to the native device clipboard? Maybe you want to copy contact information from a list of elements so you can paste it elsewhere. I recently wrote a post regarding social media sharing with Telerik NativeScript that will let you share to the clipboard, but that is a little overkill. Specially because there are actual clipboard APIs that don’t rely on social media sharing.

We’re going to see how to use the native device clipboard features in NativeScript to copy text to the clipboard and later obtain it.

Let’s start by creating a fresh NativeScript project by executing the following from the Command Prompt (Windows) or Terminal (Mac and Linux):

The Polyglot Developer

tns create ClipboardProject
cd ClipboardProject
tns platform add ios
tns platform add android

Before going forward, it is important to note that if you’re not using a Mac then you cannot add and build for the iOS platform.

NativeScript is pretty awesome so if we wanted to we could interface directly with the clipboard APIs, but for convenience we are going to use a plugin for this. We’re going to use the clipboard plugin by Eddy Verbruggen and it can be added to our project as follows:

tns plugin add nativescript-clipboard

Now we can get down to business and start coding something.

We’re going to spend all our time in the project’s app/main-page.xml and app/main-page.js files. One file of course being for UI and the other being for logic.

Starting with the app/main-page.js file, include the following code:

var clipboardModule = require("nativescript-clipboard");

exports.pageLoaded = function(args) {
    var page = args.object;
    page.bindingContext = {
        items: [
            {
                firstname: "Nic",
                lastname: "Raboy"
            },
            {
                firstname: "Maria",
                lastname: "Raboy"
            }
        ]
    };
}

exports.setText = function(args) {
    var selected = args.object.bindingContext.items[args.index];
    clipboardModule.setText(selected.firstname + " " + selected.lastname).then(function() {
        console.log(selected.firstname + " " + selected.lastname + ", copied to clipboard");
    });
}

exports.getText = function() {
    clipboardModule.getText().then(function(content) {
        console.log("Read from clipboard: " + content);
    });
}

Let’s figure out what is going on in the above. First off we’re importing the clipboard module. Inside the pageLoaded function we are creating an array that we’ll use to populate a ListView. It is going to be our mock data and also the data that gets copied to the clipboard.

Now for the setText method. This method is called when a list item is tapped. In this event we must first get the list element that was tapped so we can copy it. Once we have the list item we can make use of the clipboard plugin as defined in the official plugin documentation.

In the getText function we can get whatever is in the clipboard. Or you can just navigate to a different application and just long press a text field to bring up the input context menu.

With the logic stuff out of the way, open the app/main-page.xml file so we can create our UI:

<Page xmlns="http://schemas.nativescript.org/tns.xsd" loaded="pageLoaded">
    <ListView items="{{ items }}" itemTap="setText">
        <ListView.itemTemplate>
            <StackLayout>
                <Label text="{{ (firstname + ' ' + lastname) }}" />
            </StackLayout>
        </ListView.itemTemplate>
    </ListView>
</Page>

In the above code we are creating a list view and looping through the array of items that we created in the app/main-page.js file. Each list item will be our serialized first and last name. Nothing particularly fancy here.

If all went well, clipboard features should be a part of your app.

Conclusion

There wasn’t much to it. By using the NativeScript clipboard plugin we can copy data to be pasted elsewhere in our application or in a different application all together. Yes we can do this with the social sharing plugin as well, but that is a bit much for what we’re trying to accomplish.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.