[solved] Simple custom component - Textbox with endpoint (Aka search bar for cards / other)

Universal Dashboard Universal Dashboard Help
1

Hi, I am looking to create the simplest of component based on the custom component template and following Adam’s video on custom component here

I am trying to understand how to do a simple bidirecitonal binding to enable the following thing to happens:

  • A textbox is displayed on screen
  • User type in the textbox
  • Universal dashboard have an endpoint that react to it.

I feel it should be super simple but :

  • Events are not received in UD (or are they)

I looked at other JSX files such as UD-Checkbox / UD-Select but I am not quite able to apply that principle to my template.

I used the custom control template on IronmanSoftware repository here and was able to build my component and get it displayed in the dashboard (At last, something that I did properly)

Maybe someone can shine a light on this to help me get started ?

New-DudSearch -Text 'Hello World' -OnChange {New-UDInputAction -Toast 'Hello World'}

The PS1 function definition

New-DudSearch.ps1 
function New-DudSearch {
    param(
        [Parameter()]
        [string]$Id = (New-Guid).ToString(),
        [Parameter()]
        [string]$Text,
        [Parameter()]
        [ScriptBlock]$OnChange
    )
    End {
        if ($null -ne $OnChange) {
            $HasEndpoint = New-UDEndpoint -Endpoint $OnChange -Id $Id
        }

        @{
            assetId     = $AssetId 
            isPlugin    = $true 
            type        = "DudSearch"
            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
            HasEndpoint = $HasEndpoint
        }

    }
}

The JSX 

import React from 'react';

class DudSearch extends React.Component {

  onChanged(e) {
    if (this.props.onChange == null) {
      return
    }

    var val = e.target.text;

    UniversalDashboard.publish('element-event', {
      type: "clientEvent",
      eventId: this.props.onChange,
      eventName: 'onChange',
      eventData: val.toString()
    });
  }

  render() {
     return <input type="text" defaultValue={this.props.text}
  onChange={this.onChanged.bind(this)} />
  }
}

export default DudSearch

Edit: I figured out I needed to use DefaultValue to make the text editable.
I am still looking on how I can send the text value to UD.
I feel like I can’t be really far but I am missing something.

2

It works !
Here’s the current “thing” for reference intended to future JSX custom component maker.

In the UDPage

New-UDCard -Title 'Test' -Text '.'  -Id 'TestCard'

New-DudSearch -Id 'aac' -Text 'Hello World' -onChange {
    Set-UDElement -id 'TestCard' -Content {$EventData}
}
JSX 
import React from 'react';

class DudSearch extends React.Component {

  constructor() {
    super();

    this.state = {
      text: 0
    }
  }

  onChanged(e) {


    console.log('do validate');
    var val = e.target.value;
    console.log(val);
    UniversalDashboard.publish('element-event', {
      type: "clientEvent",
      eventId: this.props.id,
      eventName: 'onChange',
      eventData: val
    });
    this.setState({ text: e.target.value });

  }

 render() {
return <div>
  <input type="text" id={this.props.id}
  defaultValue={this.props.text}
    onChange={this.onChanged.bind(this)} />
</div>
}
}

export default DudSearch
PS1

function New-DudSearch {
param(
[Parameter()]
[string]$Id = (New-Guid).ToString(),
[Parameter()]
[string]$Text,
[Parameter()]
[ScriptBlock]$onChange
)
End {
if ($null -ne $onChange) {
$HasEndpoint = New-UDEndpoint -Endpoint $onChange -Id $Id
}

    @{
        assetId     = $AssetId 
        isPlugin    = $true 
        type        = "DudSearch"
        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
        HasEndpoint = $HasEndpoint
    }

}

}

This is just an unstyled text input that have an OnChange endpoint that is triggered every time the textbox content is modified.

3

It’s not ready for prime time yet but here’s a visual goodie.

I am interested in having a search bar that can filter not just grid but anything on the dashboard via custom definable filtering rule.

Ultimately, I am thinking of a bookmark manager where I can import my bookmark and search through them either by keyword or by tags using bracket to indicate them (ex: [Powershell] )

Current version is not smooth but when I complete this (Style / delay to avoid flickering / etc…) I will do a proper show off and provide a Github link.

ps1
DudSearch.ps1.gif1900×949 506 KB

This search bar (again WIP) allow me to filter UD-Cards containing quotes.
Since all the code is defined in an endpoint, you can techincally filter (or even do anything you want really) based on the text typed.