New UI Flat Widget

English Forum Software-Development
1

Hi,
I’m trying to show a new UI Flat Widget in live view following this tutorial:

Create a new module [Live-View]

  1. Copy an existing Module e.g. FixActivePower and paste it inside the Live-View.

/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower
/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower2

  1. Change the @Component selector

/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower2/flat/flat.ts
@Component({
selector: “Controller_Ess_FixActivePower2”,
templateUrl: “./flat.html”,
standalone: false,
})

  1. and use it inside LiveComponent.

/openems-develop/ui/src/app/edge/live/live.component.html
<ion-col size=“12” *ngSwitchCase=“‘Controller.Ess.FixActivePower’” size-lg=“6” class=“ion-no-padding”>
<Controller_Ess_FixActivePower [componentId]=“widget.componentId”></Controller_Ess_FixActivePower>

          <ion-col size="12" *ngSwitchCase="'Controller.Ess.FixActivePower2'" size-lg="6" class="ion-no-padding">
            <Controller_Ess_FixActivePower2 [componentId]="widget.componentId"></Controller_Ess_FixActivePower2>
          </ion-col>
  1. Rename the Module

/openems-develop/ui/src/app/edge/live/Controller/Ess/FixActivePower2/Ess_FixActivePower2.ts
export class Controller_Ess_FixActivePower2 { }

  1. and import it in LiveModule under imports.

/openems-develop/ui/src/app/edge/live/live.module.ts
import { Controller_Ess_FixActivePower } from “./Controller/Ess/FixActivePower/Ess_FixActivePower”;
import { Controller_Ess_FixActivePower2 } from “./Controller/Ess/FixActivePower2/Ess_FixActivePower2”;
@NgModule({
imports: [
Controller_Ess_FixActivePower,
Controller_Ess_FixActivePower2,

  1. To be able to see the module in action, you need to create a new switchCase Statement with your controllers factoryId.

/openems-develop/ui/src/app/edge/live/live.component.html
<ion-col size=“12” *ngSwitchCase=“‘Controller.Ess.FixActivePower2’” size-lg=“6” class=“ion-no-padding”>
<Controller_Ess_FixActivePower2 [componentId]=“widget.componentId”></Controller_Ess_FixActivePower2>

The Live and History View are designed to show UI-Widgets dependent on the EdgeConfig, except of widgets listed in Common.
If you implemented a controller or component, that is part of an EdgeConfig, you have to use the factoryId as a switchCase statement.
7) If thats not the case, go into widget.ts and add a identifier to the classes array inside parseWidgets().

/openems-develop/ui/src/app/shared/type/widget.ts
“Controller.Ess.FixActivePower”,
“Controller.Ess.FixActivePower2”,

but I can’t see the new widget

Someone may help me?

Thanks

2

Hi there,

nice to hear that youre trying out to build a ui widget, did you look into your edgeConfig if it includes a component with the factoryId “Controller.Ess.FixActivePower2”.

warm regards

lukas

1 Like