Dropdown select 2 finger tap

Hi Im running a dashboard on blackberry access so it can be used on a mobile device over the intranet

Dashboard works fine on blackberry work on android but on ios the drop down select only recognizes when i tap a selection with 2 fingers. Tapping a selection with 1 finger will select the option above or below the option im actually trying to choose

Ive tested with basic udselect no styling or css or any other elements on the dashboard and its the same

Other sites (not created with ud) drop downs work as expected

Any ideas?

Hi @Srichman0128 personally I would look at filing this as a bug, if you have tried the select control on it’s own with no modification then it should work as expected…not actually tried any of my dashboards on a smart phone yet…however there is always more than one way to do stuff as they say…have you tried either of the select components I did out of interest?

multi select:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSelector

single select:- https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDSingleSelector

I know it is not a solution, but this maybe the workaround you need until someone can give you an official answer, or fix the potential bug…

very nice component

the single select version suits my needs and when testing it seems to work as expected with a single finger tap in blackberry access on ios, so as you said may be a bug

so now ill try updating my code to work with the single select component

basically for the onchange of the original udselect i would grab the value of the select and depending on the value after clicking a button a specific command would be run

or after the onchange and depending on the value a command would run

if you find time can you post some code showing how i would accomplish this with your component, ill keep messing around with your example code

much appreciated this forum has been very helpful my boss will be happy that i got this working on ios :slight_smile:

1 Like

Thanks for the appreciation. I put a lot of time into building the components, so always good to get some feedback…I got a readme here:- https://github.com/psDevUK/UD-Field this is using the multi select but the exact same principals apply for the single select.

 $Processes = Get-Process
                $hash = @()
                foreach ($item in $Processes) {

                    $hash += @{
                        value = $item.Name
                        label = $item.Id
                    }
                }
                New-UDSelector -id  "selector1" -Options {
                    $hash
                } -PlaceHolder "Select running processes..."

Make an empty hash pass in the values to that hash making sure you have a unique id and a label (name) value. The I do a button to retrieve the values an on the onclick bit I do something like:-

     function Get-UDSelectorValue {
                        param($SelectorId)
                        $value = (((Get-UDElement -Id $SelectorId).Attributes.selectedOption | Select-Object Root -ErrorAction SilentlyContinue) | ConvertTo-Json -Depth 2 | ConvertFrom-Json | Select-Object -ExpandProperty Root -ErrorAction SilentlyContinue) | Select-Object -First 1
                        if (!$value) {
                            $val = ((Get-UDElement -Id $SelectorId).Attributes.selectedOption | ConvertTo-Json -Depth 1 | ConvertFrom-Json | Select-Object -ExpandProperty SyncRoot) | Select-Object -ExpandProperty SyncRoot
                            $length = $val.length
                            $i = 0
                            Do {
                                if (($i % 2) -eq 0) {
                                    $value += "$($val[$i])" + ","
                                }
                                $i++
                            }
                            While ($i -le $length)
                            $value = $value.TrimEnd(",")
                        }
                        return $value
                    }
                    $Selected = (Get-UDSelectorValue -SelectorId 'selector1') -replace ",''"
                    if (($Selected) -notmatch "\A'" ) {
                        $Selected = "$Selected"
                    }
                    $Session:Selected = $Selected
                    Show-UDToast -Message "You selected $Session:Selected" -Duration 4000 -Position topLeft

Have a look through that readme and even give me another download by downloading that component as well…It should hopefully make enough sense, it’s not a great demo but all I could think of at the time.
I use the multi select for a lot of my dashboards, and can hold 5,000+ items in it and works well. Glad this works on all platforms :grin: as I only test my components on my windows laptop. If using the built in select

P.S this component does not have an -onchange param associated with it, so the selection can only be determined by a button click

ok got it working for getting the select values thanks

is adding an onchange possible or something you have in mind for a future update

im a novice in js and no experience in react but id be willing to take a crack at it if possible

I’m no expert myself and didn’t see the onchange as an available option in the documentation to add it in. I have a few custom components that use the onchange as it was documented with the component I was building.
I’m sure if you knew enough on React and JS you could implement it. You have my blessing if you wish to try

@Srichman0128 I have an plan…I see the onchange is not bound to the function, as this is built-in the JSX file I did use it I just had a look…anyways I just posted an example here:- New Multi or Single Select Component for UniversalDashboard on how to set the default value…so my friend…I am thinking if you look at the example you will see I am using an empty column to display the default value…so this got me thinking you could use that same technique to check if a value has been selected, and if it matches X,Y or Z do A,B and C actions…if you get me? this will be the equivlent to an onchange if you have something looking for changes every x amount of seconds, in my example 2 seconds…so this would be my approach to get a scriptblock to fire on a given change :+1:

Would this approach allow a scriptblock to run if an option is selected without looking for changes on a time interval

This is a timed approach, as I am already using the onchange within the JSX and not the PS function.
It has to be a timed approach to check for the changes. I personally don’t see this as an issue…but I cannot think of a better solution at the moment, as this would allow you to achieve running a script when the value changes.

i was able to simulate an onchange when the selection changes by adding an endpoint to the selector. I took the opportunity to familiarize myself with creating a custom component using the info on Adam’s youtube video, on this forum and your blog and created the singleselector again. Ended up just needing to add the code in commented below to your code for the singleselector which allows the endpoint to be checked when the selection changes so you can run ud scriptblock when selection changes. After changes in component files below you would be able to add an endpoint to the component in your dashboard file to simulate an onchange when selection changes. Thanks for all the info, much appreciated

jsx file
handleChange = selectedOption => {
this.setState({ selectedOption });

//adding endpoint to component handlechange
if (this.props.hasEndpoint){

  UniversalDashboard.get(`/api/internal/component/element/${this.props.id}`)

}

};

ps1 file

function New-UDRSelect {

    param(

        [Parameter()]

        [string]$Value,

        [Parameter()]

        [string]$onChange,

        [Parameter()]

        [array]$Options,

        [Parameter()]

        [string]$Id = (New-Guid).ToString(),


         //adding endpoint to component 
        [Parameter()]

        [scriptblock]$Endpoint

       

    )

     

    End {

       //adding endpoint to compent
        if ($null -ne $Endpoint) {

            $HasEndpoint = New-UDEndpoint -Endpoint $Endpoint -Id $Id

            }

        @{

            # The AssetID of the main JS File

            assetId = $AssetId 

            # Tell UD this is a plugin

            isPlugin = $true 

            # This ID must be the same as the one used in the JavaScript to register the control with UD

            type = "UD-RSelect"

            # An ID is mandatory 

            id = $Id

            # This is where you can put any other properties. They are passed to the React control's props

            # The keys are case-sensitive in JS. 

           value = $Value

           onchange = $onChange

           options = $Options

           **hasEndpoint = $HasEndpoint**

           

        }

    }

}
1 Like