Button accesss to current element

I’m working on a homeserver project, a page for users of my Plex media server to vote on bad movies to be cleared from my library.

I’ve got the data stored in a mysql db, which I pull and store in an array then create a unique UDCard for each movie with the details,etc. I’ve put a button on each card to vote, at which point i want it to take and record the vote and update the movie entry in the mysql db with a new vote number.

I’ve also got a button that i want to redirect and open a search for the trailer on youtube, incase someone needs a refresher.

The problem i’m running into is that while the cards are all unique to the movie, the buttons don’t have data associated with the card they are nested in. If know i can use get-udelement in design and pull up the info of any of the cards i want, but is there a method within my code to make each button tied to the data of the card it is a part of? If someone clicks vote, it should take the unique ID of the movie, and then invoke a query to update the sql table with a new vote count. If the button to search for the trailer is hit, it should open up to a search of that movie trailer (instead it comes up to the same search results for the last video in the array).

Can you post your code or create generic example so i can take a look ?

Here is the foreach that creates the card for each row of the data from the DB. I’ve shifted where I assign the unique ID at, using the imdbID as it.

    foreach($movie in $SqlMovieData){
    New-UDCard -Content {
        New-UDRow -Columns {
            New-UDColumn -Content {
                New-UDImage -Url $movie.PosterURL -Height 250 -Width 150
            }
            New-UDColumn -Id $movie.imdbID -Content {
                $searchterm = $movie.Title.replace(' ','+').replace(':','%3A')
                $searchURL = ('https://www.youtube.com/results?search_query=' + $searchterm + "+trailer")
                New-UDHeading -Text $movie.Title -Size 3 -Color white
                New-UDParagraph -Text ("Rating: " + $movie.Rating) -Color white
                New-UDParagraph -Text ("Release Date: " + $movie.Released) -Color white
                New-UDParagraph -Text $movie.Summary -Color white
                New-UDButton -Text "Lookup trailer" -OnClick {
                    New-UDEndpoint -Endpoint {
                        Invoke-UDRedirect -OpenInNewWindow -Url $ArguementList[0]
                    } -ArgumentList @($searchURL)
                }
                New-UDButton -Text "Vote to remove" -OnClick {
                    $id = $movie.imdbID
                    $sqllookup = Invoke-SqlQuery -ConnectionName 'homedata' -Query "select imdbID,votecount from homedata.PlexData where imdbID = $id"
                    if($sqllookup -ne $null){
                        $sqllookup.votecount++
                        $votecount = $sqllookup.votecount
                        #Invoke-SqlQuery -ConnectionName 'homedata' -query "update homedata.PlexData set votecount = $votecount where imdbID = $id"
                    }
                    Show-UDToast -Message "Vote has been counted! $id " -MessageSize 20
                }
            }
        }
    }
}

Add your value as a member of $Movie then put that in the Onclick block instead.

Add-Member -InputObject $movie -MemberType NoteProperty -Name 'SearchUrl' -Value $searchURL

Then

  New-UDButton -Text "Lookup trailer" -OnClick {
        Invoke-UDRedirect -OpenInNewWindow -Url $Movie.SearchUrl
 } 

Each element will be bound to the correct value.

1 Like

I like this idea, simple and to the point.

Tried it, didn’t work. By the time the button is hit for any entry on the page, $movie is a null value after creating all of the UDcards and content for the page. At best, there is a chance it would have the very last movie in the array as the data referenced and the button would use that. In the test i just ran a minute ago, no luck though.

ok. can you give me some movie data so i can run and test your code, if you want you can create a secret gist with your dashboard code and send me the link so i can test.

Hmmm, for me it worked (2.5.2) but since I didn’t have a database to pull the data out of, I used a prepopulated hashtable as source.

If $SqlMovieData is $null by the time you try to access it, you might want to try to store it into $Cache:SqlMovieData then accessing that cached value into the onclick.

Movie data
 $SqlMovieData = @(
        @{
            'imdID'     = 'https://www.imdb.com/title/tt4566758'#
            'title'     = 'Mulan'
            'summary'   = @'
A young Chinese maiden disguises herself as a male warrior in order to save her father. A live-action feature film based on Disney's 'Mulan.'
'@
            'posterURL' = 'https://m.media-amazon.com/images/M/MV5BZWM3N2Q2YWYtZDUxMS00Yjc1LWE2ZWEtNTE1YmU1MmJhZTliXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SY1000_SX675_AL_.jpg'
            'Released'  = '2020'
            'Rating'    = '--'
        },
        @{
            'imdID'     = 'https://www.imdb.com/title/tt0137523'#
            'title'     = 'Fight Club'
            'summary'   = @'
A young Caucasian Butler disguises himself as a soap businessman in order to save his father. A live-action feature film based on Disney's 'Fight Club.'
'@
            'posterURL' = 'https://m.media-amazon.com/images/M/MV5BMjJmYTNkNmItYjYyZC00MGUxLWJhNWMtZDY4Nzc1MDAwMzU5XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SY1000_CR0,0,676,1000_AL_.jpg'
            'Released'  = '1999'
            'Rating'    = '8.8/10'
        }
    )
Complete UDPage for reference

New-UDPage -Url ‘/Movies’ -Endpoint {
$SqlMovieData = @(
@{
‘imdID’ = ‘https://www.imdb.com/title/tt4566758’#
‘title’ = ‘Mulan’
‘summary’ = @’
A young Chinese maiden disguises herself as a male warrior in order to save her father. A live-action feature film based on Disney’s ‘Mulan.’
‘@
‘posterURL’ = ‘https://m.media-amazon.com/images/M/MV5BZWM3N2Q2YWYtZDUxMS00Yjc1LWE2ZWEtNTE1YmU1MmJhZTliXkEyXkFqcGdeQXVyMTkxNjUyNQ@@.V1_SY1000_SX675_AL.jpg’
‘Released’ = ‘2020’
‘Rating’ = ‘–’
},
@{
‘imdID’ = ‘https://www.imdb.com/title/tt0137523’#
‘title’ = ‘Fight Club’
‘summary’ = @’
A young Caucasian Butler disguises himself as a soap businessman in order to save his father. A live-action feature film based on Disney’s ‘Fight Club.’
'@
‘posterURL’ = ‘https://m.media-amazon.com/images/M/MV5BMjJmYTNkNmItYjYyZC00MGUxLWJhNWMtZDY4Nzc1MDAwMzU5XkEyXkFqcGdeQXVyNzkwMjQ5NzM@.V1_SY1000_CR0,0,676,1000_AL.jpg’
‘Released’ = ‘1999’
‘Rating’ = ‘8.8/10’
}
)

foreach ($movie in $SqlMovieData) {
    New-UDCard -Content {
        New-UDRow -Columns {
            New-UDColumn -Content {
                New-UDImage -Url $movie.PosterURL -Height 250 -Width 150
            }#
            New-UDColumn -Id $movie.imdbID -Content {
                $searchterm = $movie.Title.replace(' ', '+').replace(':', '%3A')
                $searchURL = ('https://www.youtube.com/results?search_query=' + $searchterm + "+trailer")
                Add-Member -InputObject $movie -MemberType NoteProperty -Name 'SearchUrl' -Value $searchURL
                New-UDHeading -Text $movie.Title -Size 3 -Color white
                New-UDParagraph -Text ("Rating: " + $movie.Rating) -Color white
                New-UDParagraph -Text ("Release Date: " + $movie.Released) -Color white
                New-UDParagraph -Text $movie.Summary -Color white
                New-UDButton -Text "Lookup trailer" -OnClick {
                    Invoke-UDRedirect -OpenInNewWindow -Url $Movie.SearchUrl
                }
                New-UDButton -Text "Vote to remove" -OnClick {
                    $id = $movie.imdbID
                    $sqllookup = Invoke-SqlQuery -ConnectionName 'homedata' -Query "select imdbID,votecount from homedata.PlexData where imdbID = $id"
                    if ($sqllookup -ne $null) {
                        $sqllookup.votecount++
                        $votecount = $sqllookup.votecount
                        #Invoke-SqlQuery -ConnectionName 'homedata' -query "update homedata.PlexData set votecount = $votecount where imdbID = $id"
                    }
                    Show-UDToast -Message "Vote has been counted! $id " -MessageSize 20
                }
            }
        }
    }
} 

}

I attempted the changes you higlighted, but had no luck. I had issues with my sql queries command when i change from -content to -endpoint for the page. Cache: prefix did nothing otherwise.

As for an example of the data, itfranck got it pretty close with a couple adjustments. here you go.

$SqlMovieData = @(
@{
‘imdID’ = ‘4566758’#
‘title’ = ‘Mulan’
‘summary’ = @’
A young Chinese maiden disguises herself as a male warrior in order to save her father. A live-action feature film based on Disney’s ‘Mulan.’
‘@
‘posterURL’ = ‘https://m.media-amazon.com/images/M/MV5BZWM3N2Q2YWYtZDUxMS00Yjc1LWE2ZWEtNTE1YmU1MmJhZTliXkEyXkFqcGdeQXVyMTkxNjUyNQ@@._V1_SY1000_SX675_AL_.jpg
‘Released’ = ‘2020’
‘Rating’ = ‘G’
},
@{
‘imdID’ = ‘0137523’#
‘title’ = ‘Fight Club’
‘summary’ = @’
A young Caucasian Butler disguises himself as a soap businessman in order to save his father. A live-action feature film based on Disney’s ‘Fight Club.’
'@
‘posterURL’ = ‘https://m.media-amazon.com/images/M/MV5BMjJmYTNkNmItYjYyZC00MGUxLWJhNWMtZDY4Nzc1MDAwMzU5XkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SY1000_CR0,0,676,1000_AL_.jpg
‘Released’ = ‘1999’
‘Rating’ = ‘G’
}
)

Dont forget this part
.GetNewClosure()
In his code example

Actually, I just edited the sample in my previous post.

  1. .GetNewClosure() is actually not required. This was a leftover from another attempt using the original $SearchURL assignment but this did not work.

  2. In my previous edit, I had $Cache:SearchUrl in the New-UDRedirect action instead of $Movie.SearchUrl

Previous iteration of what I had published did produce $null
Current version does work.

Will try and test this locally as well.

I actually had a plex demo UD I setup previously that would simply show stats/currently playing - really interested in this use case to allow people to request / vote on titles. Very Cool!

so setting the variable to $cache.searchurl slightly helped. Instead of a null value now it’s just the value of the last movie on the list of the array, for every youtube search button on the whole page (in my case, every single link opens to search for the Zootopia trailer).

@leeberg When I get a finished setup done i’ll be more than happy to properly upload to github and share it. I am designing it as a way to have my dad regularly go through and help cleanup all the junk he has watched that I won’t ever watch. If you want stats on Playing,etc. that’s all built right into Plex dashboard now.