Reference the Custom Plugin in index.html and config.xml

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

IDE

After you have imported the custom Apache Cordova plugin into your app, you might need to add includes for the plugin scripts.

You need to add script includes to index.html for JS resources defined in the <asset> element in plugin.xml. If the plugin script is defined in a <js-module> element, you do not need to add any script includes to your app. For more information about <js-module>, see Plugin Specification in the Apache Cordova Plugin Development Guide.

The markup of the plugin.xml file for the custom plugin must contain any declarations that need to be made in config.xml for iOS, Windows Phone, and Android.

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 contains a valid plugin.xml file.

Procedure

In-Browser

  1. In the Project Navigator, expand Plugins.
  2. Locate plugin.xml for your Apache Cordova plugin and double-click to open it.
  3. In the markup of plugin.xml, locate definitions for the <asset> element.
    The plugin assets are files or folders that need to be copied into your app. Typically, assets are JS files that encompass the functionality of the plugin.

    For example:

    <asset src="www/plugin.js" target="plugin.js">
    
  4. In the Project Navigator, double-click index.html.
  5. In the markup of index.html, add a script include for the target of the <asset> element in plugin.xml.
    The value for src in <script> must match the value for target in <asset>.

    For example:

    plugin.xml
    
    <asset src="www/plugin.js" target="plugin.js">
    
    index.html  
    
    <script src="plugin.js" type="text/javascript"></script>
    
  6. If plugin.xml contains more than one <asset> elements that define JS resources, repeat Steps 3-5.
    Review the examples for the custom plugin to learn if you need to add more script includes.
  7. Press Ctrl+Shift+S to save all changes.

Universal

  1. In the Project Navigator, expand Plugins.
  2. Locate plugin.xml for your Apache Cordova plugin and double-click to open it.
  3. In the markup of plugin.xml, locate definitions for the <asset> element.
    The plugin assets are files or folders that need to be copied into your app. Typically, assets are JS files that encompass the functionality of the plugin.

    For example:

    <asset src="www/plugin.js" target="plugin.js">
    
  4. In the Project Navigator, double-click index.html.
  5. In the markup of index.html, add a script include for the target of the <asset> element in plugin.xml.
    The value for src in <script> must match the value for target in <asset>.

    For example:

    plugin.xml
    
    <asset src="www/plugin.js" target="plugin.js">
    
    index.html  
    
    <script src="plugin.js" type="text/javascript"></script>
    
  6. If plugin.xml contains more than one <asset> elements that define JS resources, repeat Steps 3-5.
    Review the examples for the custom plugin to learn if you need to add more script includes.
  7. Press Ctrl+Shift+S to save all changes.

Windows

  1. In the Project Navigator, double-click Properties.
  2. In the Plugins tab, navigate to the Other Plugins section and expand it, if needed.
  3. Locate your plugin and click View.
  4. In the markup of plugin.xml, locate definitions for the <asset> element.
    The plugin assets are files or folders that need to be copied into your app. Typically, assets are JS files that encompass the functionality of the plugin.

    For example:

    <asset src="www/plugin.js" target="plugin.js">
    
  5. In the Project Navigator, double-click index.html.
  6. In the markup of index.html, add a script include for the target of the <asset> element in plugin.xml.
    The value for src in <script> must match the value for target in <asset>.

    For example:

    plugin.xml
    
    <asset src="www/plugin.js" target="plugin.js">
    
    index.html  
    
    <script src="plugin.js" type="text/javascript"></script>
    
  7. If plugin.xml contains more than one <asset> elements that define JS resources, repeat Steps 3-6.
    Review the examples for the custom plugin to learn if you need to add more script includes.
  8. Press Ctrl+Shift+S to save all changes.

Visual Studio

  1. In the Solution Explorer, double-click Properties.
  2. In the Plugins tab, navigate to the Other Plugins section and expand it, if needed.
  3. Locate your plugin and click View.
  4. In the markup of plugin.xml, locate definitions for the <asset> element.
    The plugin assets are files or folders that need to be copied into your app. Typically, assets are JS files that encompass the functionality of the plugin.

    For example:

    <asset src="www/plugin.js" target="plugin.js">
    
  5. In the Solution Explorer, double-click index.html.
  6. In the markup of index.html, add a script include for the target of the <asset> element in plugin.xml.
    The value for src in <script> must match the value for target in <asset>.

    For example:

    plugin.xml
    
    <asset src="www/plugin.js" target="plugin.js">
    
    index.html  
    
    <script src="plugin.js" type="text/javascript"></script>
    
  7. If plugin.xml contains more than one <asset> elements that define JS resources, repeat Steps 3-6.
    Review the examples for the custom plugin to learn if you need to add more script includes.
  8. Press Ctrl+Shift+S to save all changes.

CLI

  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 definitions for the <asset> element.
    The plugin assets are files or folders that need to be copied into your app. Typically, assets are JS files that encompass the functionality of the plugin.

    For example:

    <asset src="www/plugin.js" target="plugin.js">
    
  4. On your local file system, open the directory that contains your app.

  5. Locate index.html and double-click to open it.
  6. In the markup of index.html, add a script include for the target of the <asset> element in plugin.xml.
    The value for src in <script> must match the value for target in <asset>.

    For example:

    plugin.xml
    
    <asset src="www/plugin.js" target="plugin.js">
    
    index.html  
    
    <script src="plugin.js" type="text/javascript"></script>
    
  7. If plugin.xml contains more than one <asset> elements that define JS resources, repeat Steps 3-6.
    Review the examples for the custom plugin to learn if you need to add more script includes.
  8. Save changes.

Next Steps

Configure your app for building.

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.