Import Custom Plugins

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

IDE

You can import one or more custom Apache Cordova plugins that meet the requirements of AppBuilder. After you import a plugin, its files are added to your app. You can use the code editor to modify the code of the custom plugins.

When you add a custom plugin to your app, you cannot choose for which build configuration to enable it. The plugin is enabled for all build configurations.

Custom Apache Cordova plugins are not supported in the simulator and in the Cordova developer app.

Prerequisites

  • 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.
  • Verify that the custom Apache Cordova plugin meets the requirements of AppBuilder.
    For more information, see Requirements for Custom Plugins.

Procedure

In-Browser

  1. In the Project Navigator, double-click Properties.
  2. In the Plugins tab, navigate to the Custom Plugins section and expand it, if needed.
  3. Click Import and confirm the operation.
  4. In your file explorer, browse and locate the archive that you want to import in AppBuilder.
  5. Drag the selection and drop it in the drop files here to upload text box.
  6. Click Upload.
    A new folder that contains the files for your plugin is added in the Plugins folder in the Project Navigator.
    Your plugin is added in the Other Plugins section in the Properties dialog.
  7. If the archive was created on a macOS system, make sure to delete any system macOS files and folders such as __MACOSX and .DS_Store from the Project Navigator.
  8. (Optional) If needed, configure the plugin variables for the plugin.
    1. Click Expand for the newly added plugin to expand its configuration options.
    2. Click Configuration Variables.
    3. Select the build configuration to which you want to apply the plugin variables.
    4. Provide values for the listed variables and click Done.
  9. Close the properties dialog.

Universal

  1. In the Project Navigator, double-click Plugins.
  2. In the Plugins tab, navigate to the Custom Plugins section and expand it, if needed.
  3. Click Import and confirm the operation.
  4. In your file explorer, browse and locate the archive that you want to import in AppBuilder.
  5. Drag the selection and drop it in the drop files here to upload text box.
  6. Click Upload.
    A new folder that contains the files for your plugin is added in the Plugins folder in the Project Navigator.
    Your plugin is added in the Other Plugins section in the Properties dialog.
  7. If the archive was created on a macOS system, make sure to delete any system macOS files and folders such as __MACOSX and .DS_Store from the Project Navigator.
  8. (Optional) If needed, configure the plugin variables for the plugin.
    1. Click Expand for the newly added plugin to expand its configuration options.
    2. Click Configuration Variables.
    3. Select the build configuration to which you want to apply the plugin variables.
    4. Provide values for the listed variables and click Done.
  9. Close the properties dialog.

Windows

  1. In the Project Navigator, double-click Properties.
  2. In the Plugins tab, click Import and confirm the operation.
  3. Browse and locate the archive that you want to import in AppBuilder, select it and click Open.
    A new folder that contains the files for your plugin is added in the Plugins folder in the Project Navigator.
    Your plugin is added in the Other Plugins section in the Properties dialog.
  4. If the archive was created on a macOS system, make sure to delete any system macOS files and folders such as __MACOSX and .DS_Store from the Project Navigator.
  5. (Optional) If needed, configure the plugin variables for the plugin.
    1. Click Expand for the newly added plugin to expand its configuration options.
    2. Click Configure.
    3. Select the build configuration to which you want to apply the plugin variables.
    4. Provide values for the listed variables and click Close.
  6. Press Ctrl+S to save your changes.
  7. Close the properties dialog.

Visual Studio

  1. In the Solution Explorer, right-click Plugins.
  2. Select Import Plugin.
  3. Browse and locate the archive that you want to import in AppBuilder, select it and click Open.
    A new folder that contains the files for your plugin is added in the Plugins folder in the Solution Explorer.
    Your plugin is added in the Other Plugins section in the Properties dialog.
  4. If the archive was created on a macOS system, make sure to delete any system macOS files and folders such as __MACOSX and .DS_Store from the Solution Explorer.
  5. (Optional) If needed, configure the plugin variables for the plugin.
    1. Click + for the newly added plugin to expand its configuration options.
    2. Click Configure.
    3. Select the build configuration to which you want to apply the plugin variables.
    4. Provide values for the listed variables and click Close.
  6. Press Ctrl+S to save your changes.
  7. Close the properties dialog.

CLI

  1. In the command prompt, navigate to the directory that contains your app.
  2. To import the plugin that you want to implement, run the following command.

    appbuilder plugin fetch "Local Path, Plugin Repository, name or ID of the plugin in the Apache Cordova Plugin Registry or the npm registry"
    
  3. (Optional) If needed, configure the plugin variables for the plugin.

    1. On your local file system, open the directory that contains your app and navigate to the Plugins subdirectory.
    2. Locate plugin.xml for your Apache Cordova plugin and double-click to open it.
    3. In the markup of plugin.xml, locate the <preference> elements that contain variable declarations in the following format.

      $VARIABLE_IN_CAPITAL_LETTERS$
      
    4. Replace any $VARIABLE_IN_CAPITAL_LETTERS$ strings with the values for your plugin variables.
    5. Save changes.

Next Steps

Configure any plugin variables for the plugin and continue developing your app and writing and debugging your code.

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.