New-UDSweetAlert

Universal Dashboard UD Development
1

Guess this is the first initial how to question…first off thanks for setting up this category @adam saves me bugging you and @AlonGvili on twitter :smile: so I was hoping to have published the sweetalert2 modal I got working but had some other circumstances preventing me. Anyways although I got it working when the modal pops up on the page it destroys other UD components, so this is the only visiable component on the page. I then done a reload on the ok button to then reload the page so the other elements are displayed again. However I could see possible users seeing this as a bug or annoying them the page is reloading. Here is the JSX

import React, { Component } from 'react';
import SweetAlert from 'react-sweetalert2';
class <%=$PLASTER_PARAM_ControlName%> extends React.Component {

  // state is for keeping control state before or after changes.
  state = {

    // the things you want to put in state.
    // text: this.props.text //un comment the line to use state insted props
  }

constructor(){
        super();
        this.state = {
            swal: {}
        }
  }
  render() {
       // These props are returned from PowerShell!
      // return <h1>{this.state.text}</h1> // un comment the line to render using value from state.

    return (
      <div id={this.props.id} style={{position: 'absolute','z-index': 1500}}>
      <SweetAlert show={true} type={this.props.types} title={this.props.title} text={this.props.text} footer={this.props.footer} showloading={this.props.showloading} position={this.props.position} timer={this.props.timer} showConfirmButton={true} showCancelButton={this.props.showCancelButton} confirmButtonText={this.props.confirmButtonText} cancelButtonText={this.props.cancelButtonText} showCloseButton={this.props.showCloseButton} onClose={() => {location.reload();}} />
    </div>
    );
          }
    }

export default <%=$PLASTER_PARAM_ControlName%>

Then this is the component.ps1 file:-
<#
.SYNOPSIS
Sample control for UniversalDashboard.
.DESCRIPTION
Sample control function for UniversalDashboard. This function must have an ID and return a hash table.
.PARAMETER Id
An id for the component default value will be generated by new-guid.
.EXAMPLE
PS C:>
Explanation of what the example does
.INPUTS
Inputs (if any)
.OUTPUTS
Output (if any)
.NOTES
General notes
#>
function <%=$PLASTER_PARAM_CommandName%> {
param(
[Parameter()]
[string]$Id = (New-Guid).ToString(),
[Parameter(Mandatory)]
[ValidateSet(“success”, “error”, “warning”, “info”, “question”)]
[string]$Type,
[Parameter()]
[string]$Title,
[Parameter()]
[string]$Text,
[Parameter()]
[string]$Footer = “”,
[Parameter()]
[bool]$ShowLoading = $false,
[Parameter()]
[ValidateSet(‘center’, ‘top’, ‘top-start’, ‘top-end’, ‘center-start’, ‘center-end’, ‘bottom’, ‘bottom-start’, ‘bottom-end’)]
[string]$Position = ‘center’,
[Parameter()]
[int]$Timer,
[Parameter()]
[string]$ConfirmButtonText = ‘OK’,
[Parameter()]
[string]$CancelButtonText = ‘Cancel’,
[Parameter()]
[bool]$CancelButton = $false,
[Parameter()]
[bool]$CloseButton = $true
)

    End {

        @{
            # 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              = "<%=$PLASTER_PARAM_ControlTypeName%>"
            # 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.
            text              = $Text
            types             = $Type
            title             = $Title
            footer            = $Footer
            showloading       = $ShowLoading
            position          = $Position
            timer             = $Timer
            confirmButtonText = $ConfirmButtonText
            showCancelButton  = $CancelButton
            cancelButtonText  = $CancelButtonText
            showCloseButton   = $CloseButton
        }

    }
}

Finally this is me calling it in a script:-
Import-Module -Name UniversalDashboard.Community
Import-Module “C:\UD\swa2\udsw\src\output\UniversalDashboard.udsw\UniversalDashboard.udsw.psd1”
Get-UDDashboard | Stop-UDDashboard
$Endpoint = New-UDEndpointInitialization -Module @(“C:\UD\swa2\udsw\src\output\UniversalDashboard.udsw\UniversalDashboard.udsw.psd1”)
Start-UDDashboard -Port 10005 -Dashboard (
New-UDDashboard -Title “Powershell UniversalDashboard” -Content {

        #new-udsw -type "success" -title "YES" -Text "this works!"
        #New-UDMuButton -Text "Click Me" -OnClick {
        New-UDInput -Title "User Data" -Endpoint {
            param($Name, [bool]$Yes)

            if ($Yes) {
                New-UDInputAction -Content { new-udsw -type "success" -title "$Name" -Text "you completed the form successfully!" }
            }
            else {
                New-UDInputAction -Content { new-udsw -type "error" -title "$Name" -Text "no you were supposed to tick YES!" -position "top" }
            }
        }
        #new-udsw -type "success" -title "YES" -Text "this works!" -position "bottom"
        # }
        #New-UDMuButton -Text 'Submit' -OnClick { new-udsw }
        #Show-UDToast -Title "hello" -Message "Horay" }
    } -EndpointInitialization $Endpoint
)
2

Definitely don’t want to reload the page on close. You need to update the component state.

import React, { Component } from 'react';
import SweetAlert from 'react-sweetalert2';
class <%=$PLASTER_PARAM_ControlName%> extends React.Component {

  // state is for keeping control state before or after changes.
  state = {

    // the things you want to put in state.
    // text: this.props.text //un comment the line to use state insted props
  }

constructor(){
        super();
        this.state = {
            swal: {},
            open: true
        }
  }
  render() {
       // These props are returned from PowerShell!
      // return <h1>{this.state.text}</h1> // un comment the line to render using value from state.

    return (
      <div id={this.props.id} style={{position: 'absolute','z-index': 1500}}>
      <SweetAlert show={this.state.open} type={this.props.types} title={this.props.title} text={this.props.text} footer={this.props.footer} showloading={this.props.showloading} position={this.props.position} timer={this.props.timer} showConfirmButton={true} showCancelButton={this.props.showCancelButton} confirmButtonText={this.props.confirmButtonText} cancelButtonText={this.props.cancelButtonText} showCloseButton={this.props.showCloseButton} onClose={() => {this.setState({open: false})}} />
    </div>
    );
          }
    }

export default <%=$PLASTER_PARAM_ControlName%>
1 Like
3

Kapow just like that batman @adam seriously man cannot thank you enough! I was messing about with z-index with my fingers and toes crossed…thanks for your help :smile:

1 Like