Creating or-custom-component

[RRR]

Dears,
please recommend the steps to create or-custom-component, as trial i want to create simple Hello world panel in or-asset-viewer (then to adjust it further to my needs).
the steps that i do:

1. in file ui/component/or-asset-viewer/src/index.ts

import “@openremote/or-custom-component”;

export interface PanelConfig {
type: “info” | “setup” | “history” | “group” | “survey” | “survey-results” | “linkedUsers” | “alarm.linkedAlarms” | “custom-component”;
…
}

…
if (panelConfig.type === “ifc-viewer”) {
// Empty panel which just shows “hello world”
return html<or-custom-component></or-custom-component>;
}

2. ui/component/or-custom-component/package.json -copied from other or-component
3. ui/component/or-custom-component/tsconfig.json -copied from other or-component
4. ui/component/or-custom-component/rspack.config.js -copied from other or-component
5. ui/component/or-custom-component/src/index.ts

import { LitElement, html } from ‘lit’;
import { customElement } from ‘lit/decorators.js’;
import { customComponentStyles } from ‘./style’;

@customElement(‘or-custom-component’)
export class OrCustomComponent extends LitElement {
static styles = customComponentStyles;

render() {
return html <div class="hello-world">Hello World!</div> ;
}
}

6. ui/component/or-custom-component/src/style.ts

import {css, unsafeCSS} from “lit”;
import {DefaultColor1, DefaultColor2, DefaultColor3, DefaultColor4, DefaultColor5, DefaultColor6, DefaultHeaderHeight} from “@openremote/core”;

export const customComponentStyles= css`
:host {
display: block;
contain: content;
–or-custom-component-font-size: 14px;
–or-custom-component-background-color: var(–or-app-color2, ${unsafeCSS(DefaultColor2)});
…

please advise the next steps? i tried different options but

./gradlew clean installDist

in root directory fails with error:

ERROR in …/…/component/or-asset-viewer/lib/index.js 77:0-35
Module not found: Error: Can’t resolve ‘@openremote/or-custom-component’ in ‘C:\Users.…\ui\component\or-asset-viewer\lib’

[martin.peeters]

Hi!

Did you add @openremote/or-custom-component as a dependency of or-asset-viewer ?
It seems no component or app has defined you’re using (or depending on) that component.

[RRR]

Hi,
Yes exactly i want to have a new panel within asset-viewer.
Pls advise the right steps

[martin.peeters]

Have you included @openremote/or-custom-component in the package.json file
of the or-asset-viewer component?

It should look something like this:

  "dependencies": {
    ...
    "@openremote/or-attribute-history": "workspace:*",
    "@openremote/or-attribute-input": "workspace:*",
    "@openremote/or-chart": "workspace:*",
    "@openremote/or-custom-component": "workspace:*",
    ...
  },

If this doesn’t work, please share everything you’ve attempted, and all the logs you can find.
Because, this is a small context to work with haha