PinDialog plugin not loading

Thread is closed for posting
4 posts, 0 answers
  1. Giancarlo
    Giancarlo avatar
    9 posts
    Member since:
    Jul 2015

    Posted 10 Aug 2015 Link to this post


    I'm using the AppBuilder visual studio extension in 2015. When I try to add the PinDialog custom plugin I see all the relevant files. However, I can't detect its existance at runtime nor do I see the pin.js file loaded in debug mode. At first all I did was import and I see the plugin in the plugin configurator. 

    I added the following to the Android config.xml:

    <feature name="Keyboard">
        <param name="android-package" value="com.ionic.keyboard.IonicKeyboard" />
        <param name="onload" value="true" />
    <feature name="PinDialog">
        <param name="android-package" value="hu.dpal.phonegap.plugins.PinDialog" />

    I even tried adding the following to the CorePlugins array in my debug.abproject and release.abproject files:


    I am using Cordova 4.0.0 with CrossWalk for my project.

    Note, I created a sample project using the instructions from the following page and they worked perfectly but for some reason I can't load up the plugin in AppBuilder:

    We have tried using custom plugins before at my company to no avail. I've read through the documentation but didn't see anything that stood out. Perhaps someone can give an in-depth guide as to how anyone is supposed to work with custom plugins.


  2. Kaloyan
    Kaloyan avatar
    878 posts

    Posted 13 Aug 2015 Link to this post

    Hi Giancarlo,

    Thank you for contacting us about the issue. First, I would like to point several important things:
    • Custom Cordova plugins are not supported in the AppBuilder Simulator - this means that, you won't find such plugins' files while debugging in the AppBuilder Simulator, as the whole Plugins folder is ignored there.
    • Custom Cordova plugins are not supported in the AppBuilder Companion Apps - the same as the above, the whole Plugins folder is ignored in the AppBuilder Companion Apps' builds.
    • AppBuilder depends on Plugman for automatically installing the custom Cordova plugins in your projects - this means that, as long as a custom Cordova plugin is compatible with the latest requirements from Plugman, you don't need to do anything additional to import it. In other words, it should be enough to only pass the archive in the Import Plugin command in VS. Also, the lines you have added in the Android config.xml are being automatically inserted upon cloud build in AppBuilder. They are redundant.
    • You must wait for the Cordova deviceready event before working with Custom Cordova plugins - this means that, if you make calls to custom Cordova plugins before the deviceready event has fired, they won't succeed. The earliest time you can check for the window.plugins.pinDialog object for example is in the deviceready function:
      document.addEventListener('deviceready', function () {
          // plugin logic here
      }, false);
    Now, about that specific plugin. The good news is that, I managed to install it in an AppBuilder project and checking if the window.plugins.pinDialog object exists succeeded. Here are the steps I performed for this:
    1. I started by creating a new Blank AppBuilder project in Visual Studio. If you already have an existing project you would like to install the plugin in, you can use it. However, please make sure that any references of previous installations of the PinDialog plugin are removed. Also, I suggest you to delete the added by you lines in the Android config.xml file.
    2. Next, I downloaded the latest version of the PinDialog plugin (0.1.3) from here. I used the Download ZIP button.
    3. Went back to my project in the AppBuilder Extension for Visual Studio and from the context menu on the Plugins folder, I clicked Import Plugin.
    4. I passed the downloaded in step 2 archive and clicked Open. This resulted in adding all the plugin's files in the Solution Explorer, under the Plugins folder. At this stage, the plugin is already installed in the project and you can start writing code against it API. Further, as you have noted, it is even visualized in the Plugins page of the project's Properties.
    5. I continued, by adding the following if statement in the deviceready function of my app:
      onDeviceReady: function() {
          if (window.plugins.pinDialog) {
              alert("PinDialog plugin initialized!");
          else {
              alert("PinDialog plugin missing!");
      This assures that an alert will be thrown about the status of the pinDialog object, once the application runs.
    6. Finally, I build the project in the cloud as an application package and deployed it on actual device. Running the app there, produced an alert, stating: "PinDialog plugin initialized!"

    To assist you further, I have also attached my project so that you can try with it. I hope it helps.


    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

  3. Giancarlo
    Giancarlo avatar
    9 posts
    Member since:
    Jul 2015

    Posted 25 Aug 2015 in reply to Kaloyan Link to this post

    Thanks Kaloyan for the explanation and example. The plugin is detected when I build the app in release mode within Visual Studio but not when I build in debug mode. I think I read that in debug mode within Visual Studio builds the app as a companion app. Is that expected behavior?  Also, will 3rd party plugins be allowed in debug situations in future releases of App Builder?



  4. Kaloyan
    Kaloyan avatar
    878 posts

    Posted 28 Aug 2015 Link to this post

    Hello Giancarlo,

    AppBuilder doesn't build the applications as Companion apps for Debug mode and all custom Cordova plugins should work there just as in Release builds. This said, I would suggest you to check our documentation article about running app on actual devices as application packages (for remote or connected devices), as this is what you need to do. Please, note to change the section from the upper right corner of those pages according to the AppBuilder client you are using.

    Further, what you need to do in order to build your application in Debug mode as an application package is this:
    1. In the main menu bar, click RunBuild.
    2. Select a target platform (Android, iOS or Windows Phone) and select App Package.
    3. (Optional) Select the build configuration that you want to apply.
      By default, Debug is selected.

    I hope this helps.


    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

Back to Top