UD React component invoke method

Universal Dashboard UD Development
1

Hello guys,

I am currently developing a nice new UD component (release will be soon).
As I am not a React expert, not at all ;), can someone please help me or point me to a doc how to implement a invocation of a method within UD component.

something like reset(), …

I would like to invoke this method (optional using passed parameters and return the value to PS) using a PS script.

Thanks in advance,
kr Augustin

2

@adam @psDevUK maybe you can help me out here :slight_smile:
I really would like to finish this component

1 Like
3

You’ll want to use the universal-dashboard npm package. For example, here’s the button. When you use withComponentFeatures, it will automatically hook up the event handlers and you can just call them like other JS functions. Take a look at handleClick. The onClick method accepts parameters. Those will be passed into the event handler as $Body and $EventData.

import React from 'react'
import classNames from 'classnames'
import Button from '@material-ui/core/Button'
import UdMuIcon from './icon'
import { withComponentFeatures } from 'universal-dashboard'
import { makeStyles } from '@material-ui/core/styles'

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing.unit,
  },
  leftIcon: {
    marginRight: theme.spacing.unit,
  },
  rightIcon: {
    marginLeft: theme.spacing.unit,
  },
}))

const UdButton = props => {
  const classes = useStyles()

  const handleClick = () => {
    if (props.onClick == null) return
    props.onClick();
  }

  var icon = props.icon ? (
    <UdMuIcon
      {...props.icon}
      style={
        props.iconAlignment === 'left' ? { marginRight: 8 } : { marginLeft: 8 }
      }
    />
  ) : null

  return (
    <Button
      variant={props.variant}
      size={props.size}
      disabled={props.disabled}
      className={classNames(classes.button, 'ud-mu-button', props.className)}
      fullWidth={props.fullWidth}
      href={props.href}
      onClick={handleClick}
      style={{ ...props.style }}
      sx={{ bg: 'primary', color: 'text' }}
      id={props.id}
      color={props.color}
    >
      {props.iconAlignment === 'left' ? icon : null}
      {props.text}
      {props.iconAlignment === 'right' ? icon : null}
    </Button>
  )
}

export default withComponentFeatures(UdButton)

In the PS script, use register to subscribe to the UD event handler.


        [Parameter (Position = 7)]
        [Endpoint]$OnClick,

##-----

        if ($OnClick) {
            $OnClick.Register($Id, $PSCmdlet)
        }
1 Like
4

Thanks for the quick reply but I guess my request was a bit confusing or I dont understand your answer :wink:

I am not searching a way to invoke a PS script on a react event. Its the other way, I would like to invoke a react method using a PS command (e.g. Invoke-UDJavaScript).

kr

5

We currently only have static handlers for sending state down. You’d have to use something like Set-UDElement in order to change state on the element but we don’t have a great way to call methods.

If you’re looking for a way to refresh a component, look at Sync-UDElement as well.

6

Wouldn’t this be a cool feature because i guess you are doing something similar with set/clear/…

Is there any way to invoke a react method if a props changes?

Because i am thinking about a props.method. props.methodparameters and props.methodreturn and invoke the react method if the props.method changes. In PS using tge Set-UDElement in order to invoke and afterwards Get-UDElement in order to get the return values.

I guess I have to work around some async in UD :wink:

Hope you can help me here because I am a React noob.

7

You can use the useEffect hook for something like this. The idea is that you can pass an array of props to the useEffect call and then it will call the effect when those props change.

https://www.pluralsight.com/guides/prop-changes-in-react-component/

In the above post, that’s what they are doing here. The text variable is changing and then the effect and method as called.

React.useEffect(() => {
  if(!updateTimer.current) {
    setUpdate();
  }
}, [text]);
1 Like
8

I will have a look on this tomorrow and post the progress here :slight_smile: thanks adam

1 Like
9

Yo @augustin.ziegler sorry bit late to the party :balloon: my new job is keeping me rather busy…you got a link to this component? Like I see @adam has provided help but just thinking if you could send the npm link more than happy to contribute :+1: