Show not working.

[LorenDorez]

I have added this to the view and call

page.getViewById("myfilter").show();

but nothing happens in them emulator. any ideas? I can pull all properties from the filter picker but it just never shows

[davecoffin]

You'll need to share more code than that. Where did you put it in your xml?

[LorenDorez]

here is the xml

<Page navigatingTo="onNavigatingTo" 
    xmlns:df="nativescript-pro-ui/dataform"
    xmlns:ui="nativescript-filterable-listpicker"
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar class="action-bar">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="navigateBack"></NavigationButton>
        <Label class="action-bar-title" text="Citation"></Label>
    </ActionBar>
    <StackLayout>
      <Button text="Choose type..." class="m-t-0" tap="showFilter" />
                <ui:FilterableListpicker id="myfilter" blur="dark" hintText="Type to filter..." source="{{ listitems }}" cancel="{{cancelFilterableList}}" itemTapped="{{itemTapped}}" />

        <Label text="{{ subdivision === null ? property.Name : property.Name + ' > ' + subdivision.Name }}" class="t-19 p-5 text-center bg-orange" />
        <ScrollView>
            <StackLayout id="frmCitation">
                <Label text="Property Id" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.PropertyId }}" class="m-t-0" />

                <Label text="Subdivision Id" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.SubdivisionId }}" class="m-t-0" />

                <Label text="License Plate" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.LicensePlateNumber }}" class="m-t-0" />

                <Label text="Address" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.AddressId }}" class="m-t-0" />

                <Label text="Violation Type" class="p-l-5 font-weight-bold" />
                <Button text="Choose type..." class="m-t-0" tap="showFilter" />

                <Label text="Violation" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.PropertyViolationId }}" class="m-t-0" />

                <Label text="Violation Workflow Step" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.PropertyViolationWorkflowId }}" class="m-t-0" />

                <Label text="Patrol Date" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.PatrolDate }}" class="m-t-0" />

                <Label text="Make" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.Vehicle.VehicleMakeId }}" class="m-t-0" />

                <Label text="Color" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.Vehicle.VehicleColorId }}" class="m-t-0" />

                <Label text="Is Repeat Offender" class="p-l-5 font-weight-bold" />
                <Switch checked="{{ citation.IsRepeatOffender }}" class="m-t-0" />

                <Label text="Is Valid" class="p-l-5 font-weight-bold" />
                <Switch checked="{{ citation.IsValid }}" class="m-t-0" />

                <Label text="Invalid Reason" class="p-l-5 font-weight-bold" />
                <TextView text="{{ citation.InvalidReason }}" class="m-t-0 m-l-10 m-r-10" />

                <Label text="Permit #" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.PermitNumber }}" class="m-t-0" />

                <Label text="Comments" class="p-l-5 font-weight-bold" />
                <TextView text="{{ citation.Comments }}" class="m-t-0 m-l-10 m-r-10" />

                <Label text="Created Date" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.CreatedDate }}" class="m-t-0" />

                <Label text="Created User Id" class="p-l-5 font-weight-bold" />
                <TextField text="{{ citation.CreatedUserId }}" class="m-t-0" />
            </StackLayout>
        </ScrollView>
    </StackLayout>
</Page>

[LorenDorez]

I even tried a simple test as follows

XML

<Page navigatingTo="onNavigatingTo" 
    xmlns:df="nativescript-pro-ui/dataform" 
    xmlns:ui="nativescript-filterable-listpicker" 
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar class="action-bar">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="navigateBack"></NavigationButton>
        <Label class="action-bar-title" text="Citation"></Label>
    </ActionBar>
    <GridLayout>
        <ui:FilterableListpicker id="myfilter" blur="dark" hintText="Type to filter..." source="{{ listitems }}" cancel="{{cancelFilterableList}}" itemTapped="{{itemTapped}}" />
        <StackLayout>
            <Label text="{{ name }}" class="t-19 p-5 text-center bg-orange" />>
            <Button text="Choose type..." class="m-t-0" tap="showFilter" />
        </StackLayout>
    </GridLayout>
</Page>

JS

const frameModule = require("ui/frame");
const citationViewModel = require("./citation-view-model");

let page = null;
let viewModel = null;

function onNavigatingTo(args) {
    if (args.isBackNavigation) {
        return;
    }

    viewModel = new citationViewModel();

        page = args.object;
        page.bindingContext = viewModel;
}

function showFilter() {
    console.log("** SHow Filter ");
    const lf = page.getViewById("myfilter");
    try {
    lf.show();
    }
    catch(error) {
        console.log(error);
    }
}
function itemTapped(args) {
    alert(args.selectedItem + ' was tapped!')
}

function cancelFilterableList() {
    // this gets called if the user cancels the modal. 
}

exports.navigateBack = global.oversii.events.navigateBack;
exports.onNavigatingTo = onNavigatingTo;
exports.showFilter = showFilter;
exports.itemTapped = itemTapped;
exports.cancelFilterableList = cancelFilterableList;

View Model

const observableModule = require("data/observable");
//const observableArray = require("data/observable-array").ObservableArray;

function citationViewModel() {
    const viewModel = observableModule.fromObject({
        listitems: ["A# .NET","A# (Axiom)","A-0 System","A+","A++","ABAP","ABC","ABC ALGOL","ABSET","ABSYS","ACC","Accent","Ace DASL (Distributed Application Specification Language)","ACL2","ACT-III","Action!","ActionScript","Ada","Adenine","Agda","Agilent VEE","Agora","AIMMS","Aldor","Alef","ALF","ALGOL 58","ALGOL 60","ALGOL 68","ALGOL W","Alice","Alma-0","AmbientTalk","Amiga E","AMOS","AMPL","AngelScript","APL","App Inventor for Android's visual block language","AppleScript","APT","Arc","ARexx","Argus","AspectJ","Assembly language","ATS","Ateji PX","AutoHotkey","Autocoder","AutoIt","AutoLISP / Visual LISP","Averest","AWK","Axum","Active Server Pages","B","Babbage","Bash","BASIC","bc","BCPL","BeanShell","Batch (Windows/Dos)","Bertrand","BETA","Bistro","BLISS","Blockly","BlooP","Boo","Boomerang","BPEL","Business Basic","C","C--","C/AL","Caché ObjectScript","C Shell (csh)","Caml","Cayenne","CDuce","Cecil","Cesil","Céu","Ceylon","CFEngine","CFML","Cg","Ch","Chapel","Charity","Charm","CHILL","CHIP-8","chomski","ChucK","Cilk","Citrine","Claire","Clarion","Clean","Clipper","CLIPS","CLIST","Clojure","CLU","CMS-2","Cobra","CODE","CoffeeScript","ColdFusion","COMAL","COMIT","COMPASS","Component Pascal","COMTRAN","Converge","Cool","Coq","Coral 66","CorVision","COWSEL","CPL","Cryptol","Crystal","Csound","CSP","CUDA","Curl","Curry","Cybil","Cyclone","Cython","Dart","DataFlex","Datalog","DATATRIEVE","dBase","dc","DCL","Delphi","DinkC","DIBOL","Dog","Draco","DRAKON","Dylan","DYNAMO","Ease","Easy PL/I","EASYTRIEVE PLUS","ECMAScript","Edinburgh IMP","EGL","Eiffel","ELAN","Elixir","Elm","Emacs Lisp","Emerald","Epigram","EPL (Easy Programming Language)","Erlang","es","Escher","ESPOL","Esterel","Etoys","Euclid","Euler","Euphoria","EusLisp Robot Programming Language","EXEC 2","Executable UML","F#","F*","Factor","Falcon","Fantom","FAUST","FFP","Fjölnir","FL","Flavors","Flex","FlooP","FLOW-MATIC","FOCAL","FOCUS","FOIL","FORMAC","@Formula","Forth","Fortress","FoxBase","FoxPro","FP","Franz Lisp","Frege","F-Script","Game Maker Language","GameMonkey Script","GAMS","GAP","G-code","GDScript","Genie","GDL","GJ","GEORGE","GLSL","GNU E","GM","Go","Go!","GOAL","Gödel","Golo","GOM (Good Old Mad)","Google Apps Script","Gosu","GOTRAN","GPSS","GraphTalk","GRASS","Groovy","Hack","HAGGIS","HAL/S","Halide (programming language)","Hamilton C shell","Harbour","Hartmann pipelines","Haskell","Haxe","Hermes","High Level Assembly","HLSL","Hop","Hopscotch","Hope","Hugo","Hume","HyperTalk","IBM Basic assembly language","IBM HAScript","IBM Informix-4GL","IBM RPG","ICI","Icon","Id","IDL","Idris","IMP","Inform","INTERLISP","Io","Ioke","IPL","IPTSCRAE","ISLISP","ISPF","ISWIM","J#","J++","JADE","JAL","Janus (concurrent constraint programming language)","Janus (time-reversible computing programming language)","JASS","Java","JavaScript","JCL","JEAN","Join Java","JOSS","Joule","JOVIAL","Joy","JScript","JScript .NET","JavaFX Script","Julia","Jython","Kaleidoscope","Karel","Karel++","KEE","Kixtart","Klerer-May System","KIF","Kojo","Kotlin","KRC","KRL","KRYPTON","ksh","Kodu","LabVIEW","Ladder","Lagoona","LANSA","Lasso","LaTeX","Lava","LC-3","Leda","Legoscript","LIL","LilyPond","Limbo","Limnor","LINC","Lingo","LIS","LISA","Lisaac","Lite-C","Lithe","Little b","Logo","Logtalk","LotusScript","LPC","LSE","LSL","LiveCode","LiveScript","Lua","Lucid","Lustre","LYaPAS","Lynx","M2001","M4","M#","Machine code","MAD/I","Magik","Magma","make","Maude system","Maple","Mary","MASM Microsoft Assembly x86","MATH-MATIC","Mathematica","MATLAB","Maya (MEL)","MDL","Mercury","Mesa","Metafont","MetaQuotes Language (MQL4/MQL5)","MHEG-5 (Interactive TV programming language)","Microcode","MicroScript","MIIS","Milk (programming language)","MIMIC","Mirah","Miranda","MIVA Script","ML","Model 204","Modelica","Modula","Modula-2","Modula-3","Mohol","MOO","Mortran","Mouse","MPD","Mathcad","IL","MSL","MUMPS","MuPAD","NASM","Napier88","Neko","Nemerle","nesC","NESL","Net.Data","NetLogo","NetRexx","NewLISP","NEWP","Newspeak","NewtonScript","NGL","Nial","Nice","Nim","NPL","NSIS","Nu","NWScript","NXT-G","o:XML","Oak","Oberon","OBJ2","Object Lisp","ObjectLOGO","Object REXX","Object Pascal","Objective-C","Objective-J","Obliq","OCaml","occam","occam-π","Octave","OmniMark","Onyx","Opa","Opal","OpenCL","OpenEdge ABL","OPL","OpenVera","OPS5","OptimJ","Orc","ORCA/Modula-2","Oriel","Orwell","Oxygene","Oz","P","P#","ParaSail (programming language)","PARI/GP","","PCASTL","PCF","PEARL","PeopleCode","Perl","PDL","Perl 6","Pharo","PHP","Pico","Picolisp","Pict","Pike","PIKT","PILOT","Pipelines","Pizza","PL-11","PL/0","PL/B","PL/C","PL/M","PL/P","PL/SQL","PL360","PLANC","Plankalkül","Planner","PLEX","PLEXIL","Plus","POP-11","POP-2","PostScript","PortablE","Powerhouse","PowerShell","PPL","Processing","Processing.js","Prograph","PROIV","Prolog","PROMAL","Promela","PROSE modeling language","PROTEL","ProvideX","Pro*C","Pure","Pure Data","Python","Q (equational programming language)","Q (programming language from Kx Systems)","Qalb","QBasic","QtScript","QuakeC","QPL","R++","Racket","RAPID","Rapira","Ratfiv","Ratfor","rc","REBOL","Red","Redcode","REFAL","Reia","REXX","Ring","Rlab","ROOP","RPG","RPL","RSL","RTL/2","Ruby","RuneScript","Rust","S2","S3","S-Lang","S-PLUS","SA-C","SabreTalk","SAIL","SALSA","SAM76","SAS","SASL","Sather","Sawzall","SBL","Scala","Scheme","Scilab","Scratch","Script.NET","Sed","Seed7","Self","SenseTalk","SequenceL","SETL","SIMPOL","SIGNAL","SiMPLE","SIMSCRIPT","Simula","Simulink","Singularity","SISAL","SLIP","SMALL","Smalltalk","Small Basic","SML","Strongtalk","Snap!","Snowball","SOL","Solidity","SPARK","Speedcode","SPIN","SP/k","SPS","SQR","Squeak","Squirrel","SR","S/SL","Stackless Python","Starlogo","Strand","Stata","Stateflow","Subtext","SuperCollider","SuperTalk","Swift (Apple programming language)","Swift (parallel scripting language)","SYMPL","SyncCharts","SystemVerilo","TACL","TACPOL","TADS","TAL","Tcl","Tea","TECO","TELCOMP","TeX","TEX","TIE","Timber","Tom","TOM","Toi","Topspeed","TPU","Trac","TTM","T-SQL","Transcript","TTCN","Turing","TUTOR","TXL","TypeScript","Ubercode","UCSD Pascal","Umple","Unicon","Uniface","UNITY","Unix shell","UnrealScript","Vala","Verilog","VHDL","Visual Basic","Visual Basic .NET","Visual DataFlex","Visual DialogScript","Visual Fortran","Visual FoxPro","Visual J++","Visual J#","Visual Objects","Visual Prolog","VSXu","vvvv","WATFIV, WATFOR","WebDNA","WebQL","Whiley","Windows PowerShell","Winbatch","Wolfram Language","Wyvern","X10","XBL","xHarbour","XL","Xojo","XOTcl","XPL","XPL0","XQuery","XSB","XSharp","ath","Xtend","X++","Yorick","YQL","Yoix","Z notation","Zeno","ZOPL","Zsh","ZPL"],
        name: "testing filterList"
    });
    return viewModel;
}

module.exports = citationViewModel;

[davecoffin]

Using your simple test code, it works for me. One thing you are definitely doing wrong in your XML code above is you are putting it in a stacklayout. Another thing to note is that when you are using GridLayouts to layer things, the thing you want to be on top needs to be AFTER the other layout code. For example:

<GridLayout>
    <Label text="I AM ON BOTTOM"></Label>
    <Label text="I AM ON TOP"></Label>
</GridLayout>

Try using this XML, it uses a gridlayout which will layer it properly, and its placed below your other layout code:

<Page navigatingTo="onNavigatingTo" 
    xmlns:df="nativescript-pro-ui/dataform"
    xmlns:ui="nativescript-filterable-listpicker"
    xmlns="http://www.nativescript.org/tns.xsd">
    <ActionBar class="action-bar">
        <NavigationButton text="Go Back" android.systemIcon="ic_menu_back" tap="navigateBack"></NavigationButton>
        <Label class="action-bar-title" text="Citation"></Label>
    </ActionBar>
    <GridLayout>        
        <StackLayout>
            <Button text="Choose type..." class="m-t-0" tap="showFilter" />
            <Label text="{{ subdivision === null ? property.Name : property.Name + ' > ' + subdivision.Name }}" class="t-19 p-5 text-center bg-orange" />
            <ScrollView>
                <StackLayout id="frmCitation">
                    <Label text="Property Id" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.PropertyId }}" class="m-t-0" />

                    <Label text="Subdivision Id" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.SubdivisionId }}" class="m-t-0" />

                    <Label text="License Plate" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.LicensePlateNumber }}" class="m-t-0" />

                    <Label text="Address" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.AddressId }}" class="m-t-0" />

                    <Label text="Violation Type" class="p-l-5 font-weight-bold" />
                    <Button text="Choose type..." class="m-t-0" tap="showFilter" />

                    <Label text="Violation" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.PropertyViolationId }}" class="m-t-0" />

                    <Label text="Violation Workflow Step" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.PropertyViolationWorkflowId }}" class="m-t-0" />

                    <Label text="Patrol Date" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.PatrolDate }}" class="m-t-0" />

                    <Label text="Make" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.Vehicle.VehicleMakeId }}" class="m-t-0" />

                    <Label text="Color" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.Vehicle.VehicleColorId }}" class="m-t-0" />

                    <Label text="Is Repeat Offender" class="p-l-5 font-weight-bold" />
                    <Switch checked="{{ citation.IsRepeatOffender }}" class="m-t-0" />

                    <Label text="Is Valid" class="p-l-5 font-weight-bold" />
                    <Switch checked="{{ citation.IsValid }}" class="m-t-0" />

                    <Label text="Invalid Reason" class="p-l-5 font-weight-bold" />
                    <TextView text="{{ citation.InvalidReason }}" class="m-t-0 m-l-10 m-r-10" />

                    <Label text="Permit #" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.PermitNumber }}" class="m-t-0" />

                    <Label text="Comments" class="p-l-5 font-weight-bold" />
                    <TextView text="{{ citation.Comments }}" class="m-t-0 m-l-10 m-r-10" />

                    <Label text="Created Date" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.CreatedDate }}" class="m-t-0" />

                    <Label text="Created User Id" class="p-l-5 font-weight-bold" />
                    <TextField text="{{ citation.CreatedUserId }}" class="m-t-0" />
                </StackLayout>
            </ScrollView>
        </StackLayout>
        <ui:FilterableListpicker id="myfilter" blur="dark" hintText="Type to filter..." source="{{ listitems }}" cancel="{{cancelFilterableList}}" itemTapped="{{itemTapped}}" />
    </GridLayout>
</Page>

[LorenDorez]

It still not showing up. Ill have to create a new project and see if it shows there. Maybe there another plugin or something causing a conflict

[davecoffin]

Is your project in a public repo? If not share a zip with me and I’ll figure it out

[LorenDorez]

@davecoffin Can you give me your email ill send a Zip. Im going to try and track it down this week

[davecoffin]

dave@davecoffin.com

[davecoffin]

Share the zip of the project with me

[davecoffin]

What does your home-page.js look like? In the file you shared above page isnt declared anywhere. You need to have access to the page object to use getViewById...

[LorenDorez]

I found some issues with it some im fixing those and will test again.

[davecoffin]

Maybe this will help: https://play.nativescript.org/?template=play-tsc&id=ZuLMaT

Thats basically the same thing thats included in the demo project in the plugin. Run that and youll see it working, and you can base your code off that.

[LorenDorez]

@davecoffin Here is th ample project uploaded to my Google Drive.

https://drive.google.com/file/d/1dk3CPxgoOV4V65uJnXEjIT4m2Nxnqkye/view?usp=sharing

[davecoffin]

I can look at this tomorrow, in the meantime did you look at the playground app?

[LorenDorez]

Ill look at the playground now. im not too familiar with Type script yet

[LorenDorez]

I get the following error when i try to build/run in VS Code

PS F:\GLSS\NativeScript_Tests\NSPlayground-FilterbleListPicker> tns build android Executing before-prepare hook from F:\GLSS\NativeScript_Tests\NSPlayground-FilterbleListPicker\hooks\before-prepare\nativescript-dev-typescript.js Found peer TypeScript 2.4.2 app/nativescript-filterable-listpicker/references.d.ts(1,22): error TS6053: File 'F:/GLSS/NativeScript/_Tests/NSPlayground-FilterbleListPicker/app/nativescript-filterable-listpicker/node_modules/tns-platform-declarations/ios.d.ts' not found.

app/nativescript-filterable-listpicker/references.d.ts(2,22): error TS6053: File 'F:/GLSS/NativeScript/_Tests/NSPlayground-FilterbleListPicker/app/nativescript-filterable-listpicker/node_modules/tns-platform-declarations/android.d.ts' not found.

[LorenDorez]

@davecoffin I think i found the issue. You set the visibility for the custom UI component to collapse but only set it to visible for iOS. I am running on android. when i add this call after the show it works

frame.topmost().getViewById('myfilter').show();
frame.topmost().getViewById('myfilter').visbility = "visible";

[davecoffin]

I'll look into this, that shouldn't be necessary.

[arcovoltaico]

I got the same problem, because I put on my Angular the import and register code on app.component , but the right place for me was the component of the html/xml where I added the markup.

[LorenDorez]

@davecoffin any update on why i need to call

frame.topmost().getViewById('myfilter').visbility = "visible";

From what i can see the show only set the visbility if its iOS but when you initalizing the plugin you set the visibility for both android and iOS hence why i need to call the above code

[davecoffin]

I'll try and look into this today.

[LorenDorez]

@davecoffin please let me know as soon as you can. As i would like to use this plugin over nother one im using right now

[dhabierre]

@arcovoltaico : same issue here, the show() method does nothing. I've moved section "import registerElement / registerElement call" in the component but nothing more...

But it seems to be OK with visibility attribute:

<ui:FilterableListpicker #categoryFilter [source]="categoriesNames" visibility="visible"...

[priyangamani]

show() method is not working in android.I tried with visiblity also.It won't work.Any suggestion

[LorenDorez]

you must do it like this

viewModel.page.getViewById("ListFilter").show();
viewModel.page.getViewById("ListFilter").visibility = "visible";

[davecoffin]

Fixed with 1.0.5