Custom UISchema data on Custom Control Render (Angular)

General
1

I have a custom Renderer Set that uses Angular as the binding mechanism, but renders the components with Bootstrap 5 style. This is the custom renderer I have for GroupLayout:

@Component({
  selector: 'GroupLayoutRenderer',
  template: `
    <div class="card mb-1" [style.display]="hidden ? 'none' : ''">
      <div class="card-body px-2 pb-1 pt-{{ label ? 1 : 2 }}">
        <label class="card-title ps-1 text-muted small" *ngIf="label">{{ label }}</label>
        <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema : path; trackBy: trackElement">
          <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
        </div>
      </div>
    </div>
  `,
  styles: [``],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class GroupLayoutRenderer extends LayoutRenderer<GroupLayout> {
  constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
    super(jsonFormsService, changeDetectionRef);
  }
}
export const GroupLayoutTester: RankedTester = rankWith(1, uiTypeIs('Group'));

So, I can use a UISchema, like, for example:

{ type: "Group", scope: "#/properties/args", elements: [ ... ]}

What I need is to set a custom value into the UISchema and recover it on the renderer, so I can make this component change based on that custom parameter. For example:

{ type: "Group", someCustomParam: "some value", ... }

I already know how to generate the custom UISchema, the question is: How to get the custom parameter in the Angular custom renderer?

Thanks,
Cheers.

2

Hi @gmarinelli ,

We typically use an options object in a UISchemaElement to hand in custom properties. For instance, the abstract JsonFormsAbstractControl from the angular package uses this to determine whether the description should always be shown. See here: jsonforms/packages/angular/src/library/abstract-control.ts at b20bc25d8d546077c519f17288b83ea6f2091c6d · eclipsesource/jsonforms · GitHub

For instance, define your Group like this:

{
  type: "Group",
  scope: "#/properties/args",
  options: {
    someCustomParam: "some value"
  }
}

As your renderer transitively extends JsonFormsBaseRenderer, you can access the UI schema via this.uischema and the options via this.uischema.options. See here for the uischema definition in the base renderer: jsonforms/packages/angular/src/library/base.renderer.ts at b20bc25d8d546077c519f17288b83ea6f2091c6d · eclipsesource/jsonforms · GitHub

Hope that helps and best regards,
Lucas