Skip to content

@serenity-is/corelib / PropertyPanel

Class: PropertyPanel<TItem, P>

Defined in: src/ui/widgets/propertypanel.ts:14

A panel that hosts a PropertyGrid for editing an entity, providing load/save of the entity and its id, and deriving form options from the panel's type name.

Extends

Type Parameters

TItem

TItem

The entity type edited by the panel.

P

P

Widget props type.

Constructors

Constructor

new PropertyPanel<TItem, P>(props): PropertyPanel<TItem, P>

Defined in: src/ui/widgets/propertypanel.ts:25

Creates a property panel, initializing the property grid and loading the initial (empty) entity.

Parameters

props

WidgetProps<P>

Widget props forwarded to BasePanel.

Returns

PropertyPanel<TItem, P>

Overrides

BasePanel.constructor

Properties

domNode

readonly domNode: HTMLElement

Defined in: src/ui/widgets/widget.ts:24

The DOM node this widget is bound to.

Inherited from

BasePanel.domNode


idPrefix

readonly idPrefix: string

Defined in: src/ui/widgets/widget.ts:22

The id prefix used for this widget's child element ids.

Inherited from

BasePanel.idPrefix


isPanel

protected isPanel: boolean

Defined in: src/ui/widgets/basepanel.ts:56

Whether this panel is rendered as a panel.

Inherited from

BasePanel.isPanel


options

protected readonly options: WidgetProps<P>

Defined in: src/ui/widgets/widget.ts:18

The widget's options/props.

Inherited from

BasePanel.options


propertyGrid

protected propertyGrid: PropertyGrid

Defined in: src/ui/widgets/propertypanel.ts:159

The property grid hosted by this panel.


responsive

protected responsive: boolean

Defined in: src/ui/widgets/basepanel.ts:58

Whether this panel is responsive.

Inherited from

BasePanel.responsive


tabs

protected tabs: Fluent

Defined in: src/ui/widgets/basepanel.ts:50

The initialized tabs element, if the panel has a Tabs div.

Inherited from

BasePanel.tabs


toolbar

protected toolbar: Toolbar

Defined in: src/ui/widgets/basepanel.ts:52

The initialized toolbar, if the panel has a Toolbar div.

Inherited from

BasePanel.toolbar


uniqueName

readonly uniqueName: string

Defined in: src/ui/widgets/widget.ts:20

A unique name for this widget instance, used for event namespacing.

Inherited from

BasePanel.uniqueName


validator

protected validator: Validator

Defined in: src/ui/widgets/basepanel.ts:54

The form validator, if the panel has a Form element.

Inherited from

BasePanel.validator


[typeInfo]

static [typeInfo]: ClassTypeInfo<"Serenity.">

Defined in: src/ui/widgets/propertypanel.ts:15

Overrides

BasePanel.[typeInfo]


isComponent

readonly static isComponent: true = true

Defined in: src/ui/widgets/widget.ts:334

Inherited from

BasePanel.isComponent

Accessors

element

Get Signature

get element(): Fluent

Defined in: src/ui/widgets/widget.ts:82

Returns a Fluent(this.domNode) object

Returns

Fluent

Inherited from

BasePanel.element


entity

Get Signature

get entity(): TItem

Defined in: src/ui/widgets/propertypanel.ts:123

Gets the entity currently loaded in the panel.

Returns

TItem

Set Signature

set entity(value): void

Defined in: src/ui/widgets/propertypanel.ts:138

Sets the entity loaded in the panel.

Parameters
value

TItem

The entity to set; null is replaced with an empty object.

Returns

void


entityId

Get Signature

get entityId(): any

Defined in: src/ui/widgets/propertypanel.ts:130

Gets the id of the entity currently loaded in the panel.

Returns

any

Set Signature

set entityId(value): void

Defined in: src/ui/widgets/propertypanel.ts:146

Sets the id of the entity loaded in the panel.

Parameters
value

any

The entity id to set.

Returns

void


props

Get Signature

get props(): WidgetProps<P>

Defined in: src/ui/widgets/widget.ts:307

Returns the widget's props/options.

Returns

WidgetProps<P>

Inherited from

BasePanel.props

Methods

addCssClass()

protected addCssClass(): void

Defined in: src/ui/widgets/widget.ts:89

Adds the widget's CSS class to its DOM node.

Returns

void

Inherited from

BasePanel.addCssClass


addValidationRule()

Call Signature

addValidationRule(rule, uniqueName?): void

Defined in: src/ui/widgets/widget.ts:142

Adds a validation rule to the widget's DOM node.

Parameters
rule

(input) => string

The validation rule function, or a unique name when the two-argument overload is used.

uniqueName?

string

A unique name for the rule, or the rule function when the two-argument overload is used.

Returns

void

Inherited from

BasePanel.addValidationRule

Call Signature

addValidationRule(uniqueName, rule): void

Defined in: src/ui/widgets/widget.ts:143

Adds a validation rule to the widget's DOM node.

Parameters
uniqueName

string

A unique name for the rule, or the rule function when the two-argument overload is used.

rule

(input) => string

The validation rule function, or a unique name when the two-argument overload is used.

Returns

void

Inherited from

BasePanel.addValidationRule


afterRender()

protected afterRender(callback): void

Defined in: src/ui/widgets/widget.ts:228

Queues a callback to run after the widget's contents are rendered.

Parameters

callback

() => void

The callback to run after rendering.

Returns

void

Inherited from

BasePanel.afterRender


arrange()

arrange(): void

Defined in: src/ui/widgets/basepanel.ts:63

Triggers a layout event on all visible .require-layout elements.

Returns

void

Inherited from

BasePanel.arrange


byId()

protected byId<TElement>(id): Fluent<TElement>

Defined in: src/ui/widgets/widget.ts:154

Finds a child element by its prefix-relative id.

Type Parameters

TElement

TElement extends HTMLElement = HTMLElement

Parameters

id

string

The id relative to the widget's id prefix.

Returns

Fluent<TElement>

A Fluent wrapper for the matching element.

Inherited from

BasePanel.byId


change()

change(handler): void

Defined in: src/ui/widgets/widget.ts:179

Registers a change handler on the widget's DOM node.

Parameters

handler

(e) => void

The change event handler.

Returns

void

Inherited from

BasePanel.change


changeSelect2()

changeSelect2(handler): void

Defined in: src/ui/widgets/widget.ts:188

Registers a change handler that ignores changes originating from combobox setting values.

Parameters

handler

(e) => void

The change event handler.

Returns

void

Inherited from

BasePanel.changeSelect2


deferRender()

protected deferRender(): boolean

Defined in: src/ui/widgets/widget.ts:98

Determines whether rendering should be deferred until init is called.

Returns

boolean

True to defer rendering.

Inherited from

BasePanel.deferRender


destroy()

destroy(): void

Defined in: src/ui/widgets/propertypanel.ts:35

Destroys the property grid and validator, then delegates to the base destroy.

Returns

void

Overrides

BasePanel.destroy


findById()

protected findById<TElement>(id): TElement

Defined in: src/ui/widgets/widget.ts:163

Finds a child element by its prefix-relative id.

Type Parameters

TElement

TElement extends HTMLElement = HTMLElement

Parameters

id

string

The id relative to the widget's id prefix.

Returns

TElement

The matching element, or null if not found.

Inherited from

BasePanel.findById


getCssClass()

protected getCssClass(): string

Defined in: src/ui/widgets/widget.ts:106

Returns the CSS class(es) applied to the widget's DOM node.

Returns

string

The space-separated CSS class string.

Inherited from

BasePanel.getCssClass


getCustomAttribute()

protected getCustomAttribute<TAttr>(attrType, inherit): TAttr

Defined in: src/ui/widgets/widget.ts:220

Returns a custom attribute applied to the widget's type.

Type Parameters

TAttr

TAttr extends CustomAttribute

Parameters

attrType

(...args) => TAttr

The attribute type to look up.

inherit

boolean = true

Whether to search inherited types; defaults to true.

Returns

TAttr

The matching attribute, or null.

Inherited from

BasePanel.getCustomAttribute


getFormKey()

protected getFormKey(): string

Defined in: src/ui/widgets/propertypanel.ts:73

Returns the form key derived from the panel's type name, used to look up the form definition and local text prefix.

Returns

string

The form key (e.g. "MyPanel" for "MyModule.MyPanel").


getGridField()

getGridField(): Fluent

Defined in: src/ui/widgets/widget.ts:171

Returns the closest .field element containing the widget's DOM node.

Returns

Fluent

A Fluent wrapper for the grid field.

Inherited from

BasePanel.getGridField


getPropertyGridOptions()

protected getPropertyGridOptions(): PropertyGridOptions

Defined in: src/ui/widgets/propertypanel.ts:90

Returns the options used to configure the property grid.

Returns

PropertyGridOptions

The property grid options.


getPropertyItems()

protected getPropertyItems(): PropertyItem[]

Defined in: src/ui/widgets/propertypanel.ts:103

Returns the property items for the panel's form.

Returns

PropertyItem[]

The property items to render.


getSaveEntity()

protected getSaveEntity(): TItem

Defined in: src/ui/widgets/propertypanel.ts:112

Saves the current editor values into a new entity object.

Returns

TItem

The saved entity.


getToolbarButtons()

protected getToolbarButtons(): ToolButton[]

Defined in: src/ui/widgets/basepanel.ts:73

Returns the buttons to show in the panel toolbar.

Returns

ToolButton[]

Toolbar button definitions.

Inherited from

BasePanel.getToolbarButtons


getValidatorOptions()

protected getValidatorOptions(): any

Defined in: src/ui/widgets/basepanel.ts:81

Returns the options used to configure the form validator.

Returns

any

Validator options object.

Inherited from

BasePanel.getValidatorOptions


init()

init(): this

Defined in: src/ui/widgets/widget.ts:243

Initializes the widget, rendering its contents if rendering was deferred.

Returns

this

This widget instance.

Inherited from

BasePanel.init


initPropertyGrid()

protected initPropertyGrid(): void

Defined in: src/ui/widgets/propertypanel.ts:51

Initializes the property grid from the PropertyGrid div, if present.

Returns

void


initTabs()

protected initTabs(): void

Defined in: src/ui/widgets/basepanel.ts:88

Initializes the tabs from the Tabs div, if present.

Returns

void

Inherited from

BasePanel.initTabs


initToolbar()

protected initToolbar(): void

Defined in: src/ui/widgets/basepanel.ts:98

Initializes the toolbar from the Toolbar div, if present.

Returns

void

Inherited from

BasePanel.initToolbar


initValidator()

protected initValidator(): void

Defined in: src/ui/widgets/basepanel.ts:108

Initializes the form validator from the Form element, if present.

Returns

void

Inherited from

BasePanel.initValidator


internalRenderContents()

internalRenderContents(): void

Defined in: src/ui/widgets/widget.ts:266

Renders the widget's contents and runs any queued after-render callbacks.

Returns

void

Inherited from

BasePanel.internalRenderContents


legacyTemplateRender()

protected legacyTemplateRender(): boolean

Defined in: src/ui/widgets/widget.ts:291

Renders the widget from a legacy getTemplate string, if defined.

Returns

boolean

True if a legacy template was rendered.

Inherited from

BasePanel.legacyTemplateRender


loadInitialEntity()

protected loadInitialEntity(): void

Defined in: src/ui/widgets/propertypanel.ts:62

Loads an empty entity into the property grid.

Returns

void


render()

render(): any

Defined in: src/ui/widgets/widget.ts:253

Returns the main element for this widget or the document fragment. As widgets may get their elements from props unlike regular JSX widgets, this method should not be overridden. Override renderContents() instead.

Returns

any

Inherited from

BasePanel.render


renderContents()

protected renderContents(): any

Defined in: src/ui/widgets/widget.ts:281

Renders the widget's contents. Override this to provide custom content.

Returns

any

The rendered contents.

Inherited from

BasePanel.renderContents


resetValidation()

protected resetValidation(): void

Defined in: src/ui/widgets/basepanel.ts:119

Resets all validation state on the form validator, if present.

Returns

void

Inherited from

BasePanel.resetValidation


syncOrAsyncThen()

protected syncOrAsyncThen<T>(syncMethod, asyncMethod, then): void

Defined in: src/ui/widgets/widget.ts:318

Runs a method synchronously or asynchronously depending on the widget's useAsync flag, then invokes a continuation.

Type Parameters

T

T

Parameters

syncMethod

() => T

The synchronous method to run.

asyncMethod

() => PromiseLike<T>

The asynchronous method to run.

then

(v) => void

The continuation invoked with the result.

Returns

void

Inherited from

BasePanel.syncOrAsyncThen


useIdPrefix()

protected useIdPrefix(): IdPrefixType

Defined in: src/ui/widgets/widget.ts:329

Returns an id prefix helper for resolving child element ids.

Returns

IdPrefixType

An IdPrefixType proxy for this widget's id prefix.

Inherited from

BasePanel.useIdPrefix


validateBeforeSave()

protected validateBeforeSave(): boolean

Defined in: src/ui/widgets/propertypanel.ts:154

Validates the form before saving.

Returns

boolean

True if the form is valid.


validateForm()

protected validateForm(): boolean

Defined in: src/ui/widgets/basepanel.ts:129

Validates the form, returning whether it is valid.

Returns

boolean

True if there is no validator or the form is valid.

Inherited from

BasePanel.validateForm


create()

static create<TWidget, P>(params): TWidget

Defined in: src/ui/widgets/widget.ts:202

Creates a widget instance from the given params, appending its element to the container and invoking the init/init callbacks.

Type Parameters

TWidget

TWidget extends Widget<P>

P

P

Parameters

params

CreateWidgetParams<TWidget, P>

The widget creation params.

Returns

TWidget

The created widget instance.

Inherited from

BasePanel.create


createDefaultElement()

static createDefaultElement(): HTMLElement

Defined in: src/ui/widgets/widget.ts:75

Creates the default DOM element for a widget.

Returns

HTMLElement

A new div element.

Inherited from

BasePanel.createDefaultElement


getWidgetName()

static getWidgetName(type): string

Defined in: src/ui/widgets/widget.ts:131

Returns the widget name for a type, used for association and unique names.

Parameters

type

Function

The widget type.

Returns

string

The widget name.

Inherited from

BasePanel.getWidgetName


registerClass()

protected static registerClass<TypeName>(typeName, intfAndAttr?): ClassTypeInfo<TypeName>

Defined in: src/ui/widgets/widget.ts:342

Registers this type as a class with the given type name.

Type Parameters

TypeName

TypeName

Parameters

typeName

StringLiteral<TypeName>

The type name to register.

intfAndAttr?

(InterfaceType | AttributeSpecifier)[]

Optional interfaces and attributes.

Returns

ClassTypeInfo<TypeName>

The class type info.

Inherited from

BasePanel.registerClass


registerEditor()

protected static registerEditor<TypeName>(typeName, intfAndAttr?): EditorTypeInfo<TypeName>

Defined in: src/ui/widgets/widget.ts:357

Registers this type as an editor with the given type name.

Type Parameters

TypeName

TypeName

Parameters

typeName

StringLiteral<TypeName>

The type name to register.

intfAndAttr?

(InterfaceType | AttributeSpecifier)[]

Optional interfaces and attributes.

Returns

EditorTypeInfo<TypeName>

The editor type info.

Inherited from

BasePanel.registerEditor