First custom component - Component not registered

Universal Dashboard UD Development
1

Hello,

started to create my first custom component and getting the following error:

Component not registered: ud-semantic-breadcrumb

Does anyone have an idea what I have done wrong?

src\Components\breadcrumb.jsx

import React from "react";
import { Breadcrumb } from 'semantic-ui-react';

export default class UDSemanticBreadcrumb extends Component {
  render() {
    //for testing
    return (
      <h1>{this.props.id}</h1>
    )
  }
}

src\Components\index.js

import UDSemanticBreadcrumb from './breadcrumb';
UniversalDashboard.register("ud-semantic-breadcrumb", UDSemanticBreadcrumb);

src\Scripts\New-UDSemanticBreadcrump.ps1

@{
    # 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 = "ud-semantic-breadcrumb"
    # An ID is mandatory 
    id = $Id

    sections = $Sections
    divider = $Devider
}

PS: I havent uploaded this project to github yet
PS: more information about this project is coming

2

in your psm1 file do this


# The main index.js bundle
$IndexJs = Get-ChildItem "$PSScriptRoot\jsfiles\index.*.bundle.js"

# Any other JS files in the bundle
$JsFiles = Get-ChildItem "$PSScriptRoot\jsfiles\*.js"

# Source maps to make it easier to debug in the browser
$Maps = Get-ChildItem "$PSScriptRoot\jsfiles\*.map"

# Css files
$Css = Get-ChildItem "$PSScriptRoot\jsfiles\*.css"

# Less files
$Less = Get-ChildItem "$PSScriptRoot\jsfiles\*.less"

# Register the main script and get the AssetID
# $AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterScript($IndexJs.FullName)
$AssetId = [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($IndexJs.FullName)
[UniversalDashboard.Services.AssetService]::Instance.RegisterFramework("Antd", $AssetId)

# Register all the other scripts. We don't care about the asset ID. They will be loaded by the main JS file.
foreach ($item in $JsFiles) {
    [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($item.FullName) | Out-Null
}

# Register all the source map files so we can make debugging easier.
foreach ($item in $Maps) {
    [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($item.FullName) | Out-Null
}

# Register all the source map files so we can make debugging easier.
foreach ($item in $Css) {
    [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($item.FullName) | Out-Null
}

# Register all the source map files so we can make debugging easier.
foreach ($item in $Less) {
    [UniversalDashboard.Services.AssetService]::Instance.RegisterAsset($item.FullName) | Out-Null
}

Get-ChildItem (Join-Path $PSScriptRoot "Scripts") -File -Filter "*.ps1" | ForEach-Object {
    . $_.FullName
}
3

@AlonGvili

I missed [UniversalDashboard.Services.AssetService]::Instance.RegisterFramework
Thanks for the quick support.

4

@AlonGvili maybe you can help me to understand the difference between both ways implementing a custom component:

const AntdButton = props => {

export default class UDButton extends React.Component {

5

Currently I am starting with this:

import React from "react";
import { Breadcrumb } from 'semantic-ui-react';

export default class UDSemanticBreadcrumb extends React.Component {
  render() {
    return (
      <h1>{this.props.id}</h1>
    );
  }
}
6

all the components in udantd are functions and those function life cycle and using the new react hooks

and the ud components using the “old” classes

7

Long story short … I should start implementing with the new “function” way :slight_smile:

Thanks

8

Hello @augustin.ziegler well I not seen this on the marketplace, and thought this would be a good idea. I have not used the exact version you were looking at, but one year later, there is now a component for this. :grinning: I just pushed this to the powershell gallery now, but I did create a repository for a change here:-

1 Like
9

Thanks a lot, I started doing this component but never finished :slight_smile:

1 Like