Creating React Component for Perspective

Module Development
1

Hello all,

I am not an expert on how to create a module even in React. I want to create this React Select component - Material-UI as a module. I am debugging and importing my gateway but I can't see it on the perspective page. For that link, I created .tsx file and I am importing it into my 'Image.tsx' like below.

import React from 'react';
import ControlledOpenSelect from './ControlledOpenSelect'

import {
    Component,
    ComponentMeta,
    ComponentProps,
    PComponent,
    PropertyTree,
    SizeObject
} from '@inductiveautomation/perspective-client';


// The 'key' or 'id' for this component type.  Component must be registered with this EXACT key in the Java side as well
// as on the client side.  In the client, this is done in the index file where we import and register through the
// ComponentRegistry provided by the perspective-client API.
export const COMPONENT_TYPE = "rad.display.image";


// This is the shape of the properties we get from the perspective 'props' property tree.
export interface ImageProps {
    url: string;   // the url of the image this component should display
}

export class Image extends Component<ComponentProps<ImageProps>, any> {
    render() {

        const { props: {url }, emit } = this.props;
        // Read the 'url' property provided by the perspective gateway via the component 'props'.

        // Note that the topmost piece of dom requires the application of an element reference, events, style and
        // className as shown below otherwise the layout won't work, or any events configured will fail. See render
        // of MessengerComponent in Messenger.tsx for more details.
        return (
            <div {...emit()}>
                <ControlledOpenSelect/>
                
            </div>
        );
    }
}


// This is the actual thing that gets registered with the component registry.
export class ImageMeta implements ComponentMeta {

    getComponentType(): string {
        return COMPONENT_TYPE;
    }

    // the class or React Type that this component provides
    getViewComponent(): PComponent {
        return Image;
    }

    getDefaultSize(): SizeObject {
        return ({
            width: 360,
            height: 360
        });
    }

    // Invoked when an update to the PropertyTree has occurred,
    // effectively mapping the state of the tree to component props.
    getPropsReducer(tree: PropertyTree): ImageProps {
        return {
            url: tree.readString("url", "")
        };
    }
}

Just all want is seeing a react component on perspective page.

Thanks in advance.

2

Can you use the component? Is it visible in the component panel in the designer. If not than its a configuration error somewhere.
Is it invisible or showing an error?
if invisible, then you probably have not setup the size inside ContralledOpenSelect.
i advice you give it a width and hight of 100% as the emit() props will size the div above with the props of ignition

1 Like
3

you are the best ! Finally it works!

1 Like