Manage Plugins from the Telerik Verified Plugin Marketplace

Filter by IDE
Select the AppBuilder client you are currently using for development.

IDE

Telerik provides a collection of verified plugins for NativeScript applications, available as part of the Telerik Verified Plugins Marketplace. These modules are developed, maintained and verified by the Telerik team and the partners of the company.

You can use any of these plugins to facilitate the development of your NativeScript apps or to expand their functionality.

When you add a plugin from Telerik Verified Plugins Marketplace to your app, AppBuilder does not add its files to your app directory structure. Instead, it adds the plugin as a dependency in the package.json file in the root of your app. During the build, AppBuilder resolves the dependency and makes the plugin available inside your built application. Because of this behavior, you cannot test plugins in the developer app unless they are listed as Supported Modules.

At any time, you can review the modules currently added to your app by reviewing the Dependencies tab in your Properties dialog.

You cannot test plugins in the developer app. To be able to verify that the plugins work as expected, you need to build and deploy your app as an application package on the device.

Prerequisite

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.

Procedure

You cannot test plugins in the developer app. To be able to verify that the plugins work as expected, you need to build and deploy your app as an application package on the device.

In-Browser

Add plugins

  1. In the Project Navigator, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to install.
  5. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  6. Click Install.
    AppBuilder shows a check mark next to the newly installed plugin.
  7. Close the Manage Packages wizard.
  8. Verify that the dependency is declared in lowercase.
    1. In the Project Navigator, double-click the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  9. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the module's package.json file. You need to require the module by referencing its name and the main value.

  10. Save your changes.

Update plugins

  1. In the Project Navigator, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to update.
  5. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  6. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  7. Click Change.
  8. Close the Manage Packages wizard and the Properties dialog.
  9. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the Project Navigator, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to remove.
  5. Click Uninstall.
  6. Close the Manage Packages wizard and the Properties dialog.
  7. In the code of your app, remove any references to the plugin.

Windows

Add plugins

  1. In the Project Navigator, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to install.
  5. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  6. Click Install.
    AppBuilder shows a check mark next to the newly installed plugin.
  7. Close the Manage Packages wizard.
  8. Verify that the dependency is declared in lowercase.
    1. In the Project Navigator, double-click the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  9. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the module's package.json file. You need to require the module by referencing its name and the main value.

  10. Save your changes.

Update plugins

  1. In the Project Navigator, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to update.
  5. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  6. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  7. Click Change.
  8. Close the Manage Packages wizard and the Properties dialog.
  9. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the Project Navigator, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to remove.
  5. Click Uninstall.
  6. Close the Manage Packages wizard and the Properties dialog.
  7. In the code of your app, remove any references to the plugin.

Visual Studio

Add plugins

  1. In the Solution Explorer, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to install.
  5. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  6. Click Install.
    AppBuilder shows a check mark next to the newly installed plugin.
  7. Close the Manage Packages wizard.
  8. Verify that the dependency is declared in lowercase.
    1. In the Solution Explorer, double-click the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  9. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the module's package.json file. You need to require the module by referencing its name and the main value.

  10. Save your changes.

Update plugins

  1. In the Solution Explorer, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to update.
  5. In the description panel, from the Version drop-down menu, select the version to which you want to update.
  6. (TypeScript apps-only) Select or deselect the Include TypeScript definitions on install check box.
    The setting configures how AppBuilder handles the TypeScript definitions for the module, if available. By default, this option is enabled.
  7. Click Change.
  8. Close the Manage Packages wizard and the Properties dialog.
  9. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the Solution Explorer, double-click Properties.
  2. Click Dependencies.
  3. Click Install from Plugins Marketplace.
  4. Select the module that you want to remove.
  5. Click Uninstall.
  6. Close the Manage Packages wizard and the Properties dialog.
  7. In the code of your app, remove any references to the plugin.

CLI

Add plugins

  1. In the command prompt, navigate to the directory that contains your app files.
  2. To list the NativeScript modules available from npm and the Telerik Verified Plugins Marketplace, run the following command.

    appbuilder plugin add --available
    

    This command also prints information about the required module variables, if any.

  3. To install a selected module, run the following command.
    This operation adds the module as a dependency in the package.json file of your app but does not copy the module files locally.

    appbuilder plugin add <Module Name>
    

    <Module Name> is the name of the plugin as listed in Step 2.

    Set the --default or --latest switch to install the recommended or the latest available version of the plugin.

    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  4. To install a selected module and copy its files locally, run the following command.
    This operation adds the module as a dependency in the package.json file of your app and copies the module files locally.

    appbuilder plugin fetch <Module Name>
    

    <Module Name> is the name of the plugin as listed in Step 2.
    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  5. If prompted, provide values for the required plugin variables.
  6. Verify that the dependency is declared in lowercase.
    1. Open the package.json file located in the root of the app.
    2. Locate the plugin declaration in the dependencies module.
    3. Make sure that the declaration is entirely in lowercase.
    4. Save changes, if any.
  7. Insert a require reference to the plugin in your app.
    For example:

    var myModule = require("custom-module/index");
    

    IMPORTANT: The NativeScript framework searches for the file pointed by the main value in the module's package.json file. You need to require the module by referencing its name and the main value.

  8. Save your changes.

Update plugins

  1. In the command prompt, navigate to the directory that contains your app files.
  2. To update a selected module to the latest available version, run the following command.

    appbuilder plugin add <Module Name> --latest
    

    <Module Name> is the name of the installed plugin.

    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  3. To update a selected module to a selected version, run the following command.

    appbuilder plugin add <Module Name>@<Version>
    

    <Module Name> is the name of the installed plugin. <Version> is a valid version of the plugin.

    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  4. To update a selected module and copy its files locally, run the following command.
    This operation updates the module dependency in the package.json file of your app and copies the module files locally.

    appbuilder plugin fetch <Module Name>@<Version>
    

    <Module Name> is the name of the installed plugin. <Version> is a valid version of the plugin.
    (TypeScript apps-only) Set the --no-types option to disable the automatic installation of any available TypeScript definitions. By default, automatic installation is enabled.

  5. If prompted, provide values for the required plugin variables.
  6. In the code of your app, update any references to the plugin, if needed.

Remove plugins

  1. In the command prompt, navigate to the directory that contains your app files.
  2. Run the following command.
    This operation removes the module dependency from the package.json file of your app. If the module files were copied locally during the module installation, this operation also removes the module files from your app.

    appbuilder plugin remove <Module Name>
    

    <Module Name> is the name of the installed plugin.

  3. In the code of your app, remove any references to the plugin.

Next Steps

Manage your plugin variables, if any, and re-build your app for AppBuilder to resolve the newly added dependencies.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.