PinDialog plugin not loading

[Giancarlo]

Hi,

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>
<feature name="PinDialog">
    <param name="android-package" value="hu.dpal.phonegap.plugins.PinDialog" />
</feature>

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

"hu.dpal.phonegap.plugins.PinDialog@0.1.3"

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:

https://blog.nraboy.com/2015/07/using-a-pin-dialog-in-your-ionic-framework-mobile-app/

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.

Thanks!

[Kaloyan]

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() {
       app.receivedEvent('deviceready');
       navigator.splashscreen.hide();
   
       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.

Regards,
Kaloyan
Telerik

 

 

[Giancarlo]

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?

Thanks,

Giancarlo

[Kaloyan]

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 Run → Build.
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.

Regards,
Kaloyan
Telerik