roberthovhannisyan / phonegap-plugin-listpicker

ListPicker Plugin for Cordova/PhoneGap (iOS and Android)

ListPicker

PhoneGap plugin to display a list picker dialog for Android and iOS.

Installation

Use the following command to install the plugin from npmjs repository with with Cordova CLI (requires cordova 5.0+) cordova plugin add cordova-plugin-listpicker

Installation - PhoneGap Build

Add the following line to config.xml: <gap:plugin name="cordova-plugin-listpicker" source="npm" />

Usage

// Prepare the picker configuration
var config = {
    title: "Select a Fruit", 
    items: [
        { text: "Orange", value: "orange" },
        { text: "Apple", value: "apple" },
        { text: "Watermelon", value: "watermelon" },
        { text: "Papaya", value: "papaya" },
        { text: "Banana", value: "banana" },
        { text: "Pear", value: "pear" }         
    ],
    selectedValue: "papaya",
    doneButtonLabel: "Done",
    cancelButtonLabel: "Cancel"
};

// Show the picker
window.plugins.listpicker.showPicker(config, 
    function(item) { 
        alert("You have selected " + item);
    },
    function() { 
        alert("You have cancelled");
    }
);

Screenshots

Licence

The MIT License

Copyright (c) 2014 Robert Hovhannisyan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Credits:

• iOS part inspired by

  TimCinel mgcrea [skywinder] (https://github.com/skywinder/ActionSheetPicker-3.0)

phonegap-plugin-listpicker's Issues

Crash in iOs

when there is an empty array for the list and when i tap on done button it gives an error like "'*** -[__NSArrayM objectAtIndex:]: index 0 beyond bounds for empty array'
*** First throw call stack:
libc++abi.dylib: terminating with uncaught exception of type NSException"

Clicking outside the modal should close it.

When you are using the native select element, when you click outside the modal is close.
I think that this should be the default behavior for this one too!

iOS - Add color options for the buttons

It would be really nice if you could add the ability to change the color of the cancel and done buttons for iOS.

Thanks for your awesome work!

Filtering log lists

Any plans to enable filtering of long lists of items?

Thx

Is it possible to make the dialog wider

On the iPad, is it Possible to make the dialog window wider to display more of the text?

Multiple values selection

Is there a way to allow multiple rows selection ?

manually calling cancel button function

Can someone tell
How do i call manually call cancel button function to close the list picker element..?

THREAD WARNING: ['ListPicker'] took '15.562988' ms. Plugin should use a background thread.

Hi,

This warning is appearing then the listpicker doesn't show. Instead it shows a 'done' that once hit shows the listpicker.

Any ideas?

Build error on cordova version ios 4.0.1

Hi,

An error occured when I build my app under ios with cordova version ios 4.0.1.
The solution is to remove the import file #import <Cordova/CDVDebug.h > into the ListPicker.m.

Could you solve this problem for the next version ?
Thanks.

CompileC build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/Objects-normal/i386/CDVConnection.o ServiceNav/Plugins/cordova-plugin-network-information/CDVConnection.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler
    cd /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios
    export LANG=en_US.US-ASCII
    export PATH="/Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/usr/bin:/Applications/Xcode.app/Contents/Developer/usr/bin:/Users/jdflaugergues/.nvm/versions/node/v5.9.0/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/apache-ant-1.9.4/bin"
    /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin/clang -x objective-c -arch i386 -fmessage-length=170 -fdiagnostics-show-note-include-stack -fmacro-backtrace-limit=0 -fcolor-diagnostics -std=c99 -fobjc-arc -fmodules -gmodules -fmodules-prune-interval=86400 -fmodules-prune-after=345600 -fbuild-session-file=/var/folders/r3/dt1_tm7n2ng4m7hs5_zm7lx90dq85b/C/org.llvm.clang/ModuleCache/Session.modulevalidation -fmodules-validate-once-per-build-session -Wno-trigraphs -fpascal-strings -O0 -Wno-missing-field-initializers -Wno-missing-prototypes -Wno-implicit-atomic-properties -Wno-arc-repeated-use-of-weak -Wduplicate-method-match -Wno-missing-braces -Wparentheses -Wswitch -Wunused-function -Wno-unused-label -Wno-unused-parameter -Wunused-variable -Wunused-value -Wempty-body -Wuninitialized -Wno-unknown-pragmas -Wno-shadow -Wno-four-char-constants -Wno-conversion -Wconstant-conversion -Wint-conversion -Wbool-conversion -Wenum-conversion -Wno-shorten-64-to-32 -Wpointer-sign -Wno-newline-eof -Wno-selector -Wno-strict-selector-match -Wundeclared-selector -Wno-deprecated-implementations -DDEBUG=1 -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iPhoneSimulator.platform/Developer/SDKs/iPhoneSimulator9.0.sdk -fasm-blocks -fstrict-aliasing -Wprotocol -Wdeprecated-declarations -mios-simulator-version-min=8.0 -g -fvisibility=hidden -Wno-sign-conversion -fobjc-abi-version=2 -fobjc-legacy-dispatch -iquote /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/ServiceNav-generated-files.hmap -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/ServiceNav-own-target-headers.hmap -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/ServiceNav-all-target-headers.hmap -iquote /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/ServiceNav-project-headers.hmap -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/emulator/include -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/emulator/usr/local/lib/include -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/UninstalledProducts/include -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/UninstalledProducts/iphonesimulator/include -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/emulator -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/DerivedSources/i386 -I/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/DerivedSources -F/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/emulator -include /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/sharedpch/ServiceNav-Prefix-aoakqnokwzpyvyelwdypfmxqkzgq/ServiceNav-Prefix.pch -MMD -MT dependencies -MF /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/Objects-normal/i386/CDVConnection.d --serialize-diagnostics /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/Objects-normal/i386/CDVConnection.dia -c /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/ServiceNav/Plugins/cordova-plugin-network-information/CDVConnection.m -o /Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/Objects-normal/i386/CDVConnection.o

** BUILD FAILED **


The following build commands failed:
        CompileC build/ServiceNav.build/Debug-iphonesimulator/ServiceNav.build/Objects-normal/i386/ListPicker.o ServiceNav/Plugins/cordova-plugin-listpicker/ListPicker.m normal i386 objective-c com.apple.compilers.llvm.clang.1_0.compiler
(1 failure)
ERROR building one of the platforms: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/cordova/build-debug.xcconfig,-project,ServiceNav.xcodeproj,ARCHS=i386,-target,ServiceNav,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/sharedpch
You may not have the required environment or OS to build this project
Error: Error code 65 for command: xcodebuild with args: -xcconfig,/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/cordova/build-debug.xcconfig,-project,ServiceNav.xcodeproj,ARCHS=i386,-target,ServiceNav,-configuration,Debug,-sdk,iphonesimulator,build,VALID_ARCHS=i386,CONFIGURATION_BUILD_DIR=/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/emulator,SHARED_PRECOMPS_DIR=/Users/jdflaugergues/workspace/git/mobile-application/platforms/ios/build/sharedpch

IOS Dark Mode Compatibility Issue - Dropdown items not visible

In IOS Dark Mode, the dropdown items are not visible. We can see poor visible text. In Light Mode its working fine. Any fix regarding this issue ?

How to make the listpicker visible in html page

I am new to phonegap. I am using build.phonegap.com. I have included the plugin and example script.

Placed config object in js file
var config = {
title: "Select a Fruit",
items: [
{ text: "Orange", value: "orange" },
{ text: "Apple", value: "apple" },
{ text: "Watermelon", value: "watermelon" },
{ text: "Papaya", value: "papaya" },
{ text: "Banana", value: "banana" },
{ text: "Pear", value: "pear" }
],
selectedValue: "papaya",
doneButtonLabel: "Done",
cancelButtonLabel: "Cancel"
};

And placed show picker script inside a div element like

<script> // Show the picker window.plugins.listpicker.showPicker(config, function(item) { alert("You have selected " + item); }, function() { alert("You have cancelled"); } ); </script>

But the listpicker is not visible in app page. Can you please help me in how to use with a use case example. Thanks in advance.

Dark theme compatibility issue in IOS

In IOS, if the dark theme is enabled, then the list picker text color style doesn't get change accordingly. As the default text, the color scheme is black, so in a dark theme, it doesn't visible.

Trigger the Holo design for Android

Sorry for the simple question, but Is there a way to trigger the holo design for android in line with your example screenshot in the docs? It appears that I am still getting the old dialog design though my min sdk is set at 19

<uses-sdk android:minSdkVersion="19" android:targetSdkVersion="22" />

Wrong link to install plugin

The link shown here is wrong and does not work to install the plugin for use in a cordova project. The working command with the correct link is following:
$ cordova plugin add cordova-plugin-listpicker

plugins.cordova.io will be deprecated in the near future

according to this
http://phonegap.com/blog/2015/05/26/npm-plugins-available/
http://cordova.apache.org/announcements/2015/04/21/plugins-release-and-move-to-npm.html

so...your plugin should be move to npm in the future...

some issue feedback to you

Android is totally work (Android 4.4)

but in ios 8 (ipad mini)
https://raw.githubusercontent.com/roberthovhannisyan/PhoneGap-Plugin-ListPicker/23f46f26017814b183e7ddb1208779b4addb85d3/screenshots/iphone1.png
when I press the "Done" button，"nothing happened"...
not like "Android" will feedback and trigger the "item" callback

Android styling - not consistent with documentation

I see this when running the plug-in.

Could you shed some light on why the styling isn't being applied?

Is there any plugin which will display list picker inline

Is there any plugin which will display ios list picker inline in document/page ?. Not as a modal popup.

Displaying listview text of the selected item

I am using month and monthindex in list view
items: [
{ text: "January", value: "1" },
{ text: "February", value: "2" }, and so on

alert("You have selected " + item); - displays the value of the selected index.
But how do i get the text of the selected index.
for example when i select jan, i want both the values Jan and 1 to be displayed. pl help

not building with cordova-ios 4.0.1

all detail right here
dpa99c/cordova-diagnostic-plugin#27
this is why "cordova-plugin-listpicker" also have this error too

developer should be follow this in [email protected]
http://cordova.apache.org/announcements/2015/12/08/cordova-ios-4.0.0.html

Get Value of Selected Item

The plugin automatically returns the text of the selected item, but for the life of me I can't seem to figure out how to get the value of the selected item. I'm looking primarily to get the text for display to the end user, but then the value of the selected index to be passed onto the next command.

How can this be achieved using this plugin? Information populated to the list needs to be dynamic as it's specified from the previous JSON query in the code, and the selection needs to be passed to the following code. How do you get the value of the item selected?

Crash on iOS

Hi !

The ListPicker crashes my app on iOS 9.2.1 right at invocation of the window.plugins.listpicker.showPicker method with the following error:

'NSInvalidArgumentException', reason: '-[__NSCFNumber isEqualToString:]: unrecognized selector sent to instance 0x15dae700'
*** First throw call stack:
(0x259ee2eb 0x251badff 0x259f3ab5 0x259f170f 0x25920c88 0xa549b 0xa5f53 0xbd433 0xbcd2f 0x2620a567 0x259b1257 0x259b0e47 0x259af1af 0x25901bb9 0x259019ad 0x26b7baf9 0x29bedfb5 0x9d5c3 0x255b4873)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb) 

Any idea about what's happening?

Thanks !

Provide ability for multiple columns

It would be a great enhancement to support having multiple rows in the picker. A dev could provide an object in the config with arrays for each column.

Android: Radio-Buttons and Dialog

Hey,
first of all: really nice work - thanks a lot. :)

Nevertheless I have a single suggestion:
I think, that the usability of the ListPicker on Android is a little inconsistent. Normally (as you know it from the web) Radio-Buttons are used with an submit button, like the doneButton you are actually suggesting. On Android instead klicking a list-item is not only checking it, but also choosing it.

Therefore in my opinion there are two, slightly more consistent alternatives:

1. Use Radio-Buttons and Provide the done- and cancel-Button as well.
2. Just don't show Radio-Buttons (like in this screenshot: https://github.com/kidino/phonegap-alertdialoglist-plugin)

I would prefer Option 2) - But then you have to think about how to highlight the default-option ;)

How to populate dynamic content in the list picker

I have an array which is created at run time. I want to use this array as the list.

venue_array=(["NGS","NGS"],["VMl","VM"],["KGS","KGS"],["BVB","BVB"]);

var config = { title: "Select a Venue", items: venue_array, selectedValue: "NGS", doneButtonLabel: "Done", cancelButtonLabel: "Cancel" };