Hi everyone,
I’m working on a dashboard app where a button launches a parent modal containing a stepper component. Everything is working great up to Step 3, where the user enters a device serial number and clicks a “Lookup Device” button.
At that point, a child modal appears to show progress while a lookup script runs. Once the result is returned, the modal content is dynamically updated to reflect the outcome (e.g., success or error).
The issue I’m running into is with closing the child modal. If I use Hide-UDModal, it closes both the child and the parent modal—even though I only want to close the child.
Interestingly, if I remove the -Persistent flag from the child modal and click outside of it, it closes correctly and the parent remains visible, which makes me wonder: am I handling this wrong, or is this expected behavior with nested modals?
Here’s the relevant portion of Step 3:
# Layout for Step 3 with a textbox and a button next to it
New-UDElement -tag 'div' -Content { "Step 3 - Assign Device To Zone" }
New-UDElement -tag 'div' -Content { "" }
# Create a row with two columns
New-UDRow -Columns {
# First Column: Textbox for Device Serial Number
New-UdColumn -LargeSize 6 -Content {
New-UDTextbox -id 'txtDeviceSN' -Label 'Device Serial #' -Autofocus -Icon (New-UDIcon -Icon 'barcode') -MaximumLength 15 -Type Number
New-UDTextbox -id 'txtDeviceST' -Label 'Store Number'
}
# Second Column: Button with a magnifying glass icon
New-UdColumn -LargeSize 6 -Content {
New-UDButton -Icon (New-UDIcon -Icon 'search') -ShowLoading -OnClick {
Show-UDModal -Content {
New-UDDynamic -id DeviceStatusRegion -Content {
New-UDelement -Tag 'div' -id DeviceStatus -Attributes @{'align' = "center" } -Content {
New-UDTypography -Text "Looking up device..."
New-UDHtml -Markup '<br>'
New-UDProgress -Size large -Circular -ProgressColor Blue
}
}
} -Persistent
$serialNumber = (Get-UDElement -Id txtDeviceSN).Value
Show-UDToast -Message "TES: $serialNumber" -Duration 12000
$hhLookupObj = Invoke-PSUScript -Script 'Retail\Handhelds\Intune-GetDevice.ps1' -hhSerialNumber $serialNumber -TrustCertificate -Wait
if ($hhLookupObj -eq 404) {
Set-UDElement -id DeviceStatus -Content {
New-UDAlert -Title "Error encountered" -Text "No device was not found with the serial number: $serialNumber." -Severity Warning
}
} elseif ($hhLookupObj -eq 2) {
Set-UDElement -id DeviceStatus -Content {
New-UDAlert -Title "Error encountered" -Text "There were multiple devices detected with the serial number: $serialNumber. Please clean up Intune." -Severity Warning
}
} elseif ($hhLookupObj -eq -1) {
Set-UDElement -id DeviceStatus -Content {
New-UDAlert -Title "Error encountered" -Text "There was an issue connecting to Intune. Please try again later." -Severity Error
}
} else {
Set-UDElement -Id 'DeviceStatus' -Content {
New-UDHtml -Markup @"
<style>
.checkmark-circle {
width: 60px;
height: 60px;
display: block;
margin: 0 auto;
}
.checkmark-circle .circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 2;
stroke: #4caf50;
fill: none;
animation: stroke 0.5s ease-in-out forwards;
}
.checkmark-circle .check {
stroke-dasharray: 48;
stroke-dashoffset: 48;
stroke-width: 2;
stroke: #4caf50;
fill: none;
animation: stroke 0.3s 0.4s ease-in-out forwards;
}
@keyframes stroke {
to { stroke-dashoffset: 0; }
}
</style>
<svg class="checkmark-circle" viewBox="0 0 52 52">
<circle class="circle" cx="26" cy="26" r="25" />
<path class="check" d="M14 27l7 7 16-16" />
</svg>
<p style="text-align: center; color: #4caf50; font-size: 16px; margin-top: 10px;">Device found!</p>
"@
New-UDButton -Text 'Continue' -OnClick { Hide-UDModal } -Style @{ marginTop = '10px'; display = 'block'; marginLeft = 'auto'; marginRight = 'auto' }
}
}
} -Text 'Lookup Device'
}
}
Any guidance or best practices for handling nested modals cleanly would be greatly appreciated!
Thanks in advance!
Mike
Product: PowerShell Universal
Version: 5.5.2