Buttons in Modals that opens other modals

Universal Dashboard Universal Dashboard Help
1

Hi! I have a dashboard that shows a UDGrid with all my Servers, including a custom button that will launch a modal with server info such as OS, CPU, RAM, etc. In that modal, I have other buttons to show, for example, services. This button will launch a new Modal and display all the services running in that machine. Now, how can a make it so I can “go back” to the previous modal, and so on. Every time a Modal opens, the “previous” one dissapears, so If I need to check another server, I have to “start over” from the initial grid. Does it make any sense to you?

2

I am assuming this is by design that the component modal will unmount when another model is loaded.
In fact I cannot think of any webpage where you can have multiple modals? Can you?

You cool to post code then could look at reworking it to give you what you want but not in a modal

3

Back in the day (C, C++ sdk) , windows programs could have modal & modeless dialog boxes. Modal by definition was 1 dialog box at a time. Modeless was as as many as you wanted.

Joe

4

Hi! I assumed it was by desing. This is a sample code to get the idea.

New-UDGrid -Title " AD Sites" -Headers @(“Site”,“Subnet”) -Properties @(“Site”,“Subnet”) -Endpoint {

$ADSites = [System.DirectoryServices.ActiveDirectory.Forest]::GetCurrentForest().Sites | Sort-Object Name                               
$ADSites | ForEach-Object {
                                
    $Site = $_.Name
    $Subnet = Get-ADReplicationSubnet -Filter {Site -eq $Site} | Select-Object -ExpandProperty Name

        [PSCustomObject]@{

            Site = $Site 
            Subnet = $Subnet
            MoreInfo = New-UDButton -Text "More Info" -OnClick {
            
                Show-UDModal -Header {New-UDHeading -Size 4 -Text "Domain Controllers in Site $Site"} -Content {
            
                    New-UDGrid -Title " Domain Controllers" -Headers @("Name","Server Info") -Properties @("Name","ServerInfo") -Endpoint {
                    
                        $DCsInSite = (Get-ADForest).Domains | %{ Get-ADDomainController -Filter * -Server $_ } | Where-Object {$_.Site -like "reconquista723"} | Select-Object -ExpandProperty Name  
                        $DCsInSite | ForEach-Object {
                    
                            [PSCustomObject]@{

                                Name = $_.Name
                                ServerInfo = New-UDButton -Text "Server Info" -OnClick {
                                
                                   Show-UDModal -Header {New-UDHeading -Size 4 -Text "Server Info"} -Content { 

                                   #### CUSTOM CODE ####

                                   }
                                
                                }

                            }
                    
                        } | Out-UDGridData

                    }
                
                }                                      
            
            }
                            
        }

    } | Out-UDGridData

}

Knowing this, whats the difference between Show-UDModal and New-UDModal??

Thanks!

5

I already do this in a similar inventory type dashboard to skip between PCs and installed software.
The function called in Modal1 takes a parameter (eg $serialNumber) to id the server, the function in Modal2 takes a parameter to id the software and a parameter to id the server I just clicked out of.
I’ve get a link on Modal2 to open Modal1 using the $serialNumber I passed in. (I also send a parameter of the systemName to Modal2 to customise the link without any further lookups)
I find it helps keep things tidy if you start your onClick with Hide-UDModal, then do your Show-UDModal.

gav

6

Hi OpsEng! Can you provide an example? Just to see if I understood correctly. Thanks!

7

Pseudo code of function:

Function Show-Client {
param($serialNumber,$backAppID,$backAppName)
	<client details>
	<grid containing installed apps>
		$gridData =@(
			ForEach ($row in $applicationList){
				[pscustomobject]@{'Application Name' = New-UDElement -Tag "b" -Attributes @{
						onClick = {
							Hide-UDModal
							Show-UDModal -Height 100% -Width 90% -Content { Show-Application -appID $row.ApplicationID -backSerial $serialNumber -backName $systemName	}
						}
					} -Content { New-UDHtml -Markup "<font color = #0000EE> $($row.ApplicationName )<font>" }
					"Version" = $row.Version
				}
			}
		)
	</grid contains installed apps>
	
	If ($backAppName) {
		New-UDButton -Text "Back to $backAppName" -onClick = {
			Hide-UDModal
			Show-UDModal -Height 100% -Width 100% -Content {
				Show-Application -appID $backAppID -backSerial $serialNumber -backName $systemName
			}
		}
	}
}

The back button is conditional on a backAppID being passed in. This would be present if I clicked through from the original page of PCs.
A similar function has a grid of PCs with that application installed. eg

Function Show-Application {
param($appID,$backSerial,$backName)

}

Just for giggles I’ve set the application modal to open from a fake html link and the back to open from a button.

gav

1 Like
8

Got it! Thanks a lot!

9

Hi @abarrozo

I did something similar with a New-UDchart.
I hope it helps:

New-UDChart -ArgumentList $DB_data  -Type HorizontalBar -Links @( 
                (New-UDLink -text "Today" -OnClick  (New-UDEndpoint -Endpoint {
                        Show-UDModal -Width '95%' -Content {  
                                $DB_data
                        }
                }))
         ) -Endpoint { $endpoint }

Warm Regards
MayLife

2 Likes