Layout - PanelBuilder
Layout.PanelBuilderDefine a UI Flex container from a
Stream within a LayoutBuilder, to display multiple other visuals in a nested flex layout.Example
// use a StructType stream
const stream = Stream(
"My Stream",
StructType({
string: StringType,
date: DateTimeType,
float: FloatType,
integer: IntegerType,
boolean: BooleanType,
}),
);
// create a tab in a layout containing a form and a table
const layout = new LayoutBuilder("My Layout")
.panel('column', builder => builder
.form(50, "My Form", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
.integer("Integer", fields => fields.integer)
.boolean("Boolean", fields => fields.boolean)
.float("Float", fields => fields.float)
)
.table(50, "My Table", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
.integer("Integer", fields => fields.integer)
.boolean("Boolean", fields => fields.boolean)
.float("Float", fields => fields.float)
)
)
.toTemplate()
Layout
calendar
▸ calendar(percentage
, name
, def
):
PanelBuilder
Create a
LayoutBuilder to display in the UI from a CalendarBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | - |
name | string | - |
def | (panel : CalendarBuilder ) => CalendarFinalizer <Record , DictType > | the CalendarBuilder to embed. |
Returns
PanelBuilder
Remarks
A Form is editable when defined from a writable
Stream, such as produced by a SourceBuilderExample
// use a StructType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
label: StringType,
start: DateTimeType,
end: DateTimeType,
})
)
);
// create a form in a layout
const layout = new LayoutBuilder("My Layout")
.panel('row', builder => builder
.planner(100, "calendar", builder => builder
.fromStream(stream.outputStream())
.calendar({
label: (fields) => fields.label,
start: (fields) => fields.start,
end: (fields) => fields.end,
})
)
)
.toTemplate()
form
▸ form(percentage
, name
, def
):
PanelBuilder
Add a
FormBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the FormBuilder |
name | string | the name for the FormBuilder |
def | (panel : FormBuilder ) => FormFinalizer <Record , StructType , Record > | the FormBuilder |
Returns
PanelBuilder
Example
// use a StructType stream
const stream = Stream(
"My Stream",
StructType({
string: StringType,
date: DateTimeType,
})
);
// add a form to a tab
const layout = new LayoutBuilder("My Layout")
.panel('row', builder => builder
.form(100, "My Form", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
)
)
.toTemplate()
layout
▸ layout(percentage
, def
):
PanelBuilder
Add a
LayoutBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the LayoutBuilder |
def | FlatLayoutFinalizer | the LayoutBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
string: StringType,
date: DateTimeType,
})
)
);
// create a layout containing a form
const layout = new LayoutBuilder("My Layout")
.form("My Form", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
)
.toTemplate()
// create a layout with a panel, containing the layout
const layout = new LayoutBuilder("My Layout")
.panel('column', builder => builder
.layout(100, layout)
)
.toTemplate()
panel
▸ panel(percentage
, orientation
, def
):
PanelBuilder
Add a nested
PanelBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the PanelBuilder |
orientation | "row" | "column" | - |
def | (panel : PanelBuilder ) => PanelBuilder | the PanelBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
string: StringType,
date: DateTimeType,
})
)
);
// add a form to a tab
const layout = new LayoutBuilder("My Layout")
.panel('column', builder => builder
.panel(100, 'row', builder => builder
.table(100, "My Table", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
.showKey(false)
)
)
)
.toTemplate()
pivot
▸ pivot(percentage
, name
, def
):
PanelBuilder
Add a
UploadBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the UploadBuilder |
name | string | the name for the UploadBuilder |
def | (panel : PivotBuilder ) => PivotFinalizer | the UploadBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
BlobType,
);
// add a form to a tab
const layout = new LayoutBuilder("My Layout")
.panel('column', builder => builder
.upload(100, "My Upload", builder => builder
.fromStream(stream)
.inputs()
)
)
.toTemplate()
tab
▸ tab(percentage
, def
):
PanelBuilder
Add a
TabBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the TabBuilder |
def | (panel : TabBuilder ) => TabBuilder | the TabBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
string: StringType,
date: DateTimeType,
})
)
);
// add a form to a tab
const layout = new LayoutBuilder("My Layout")
.panel('column', builder => builder
.tab(100, 'row', builder => builder
.table("My Table", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
.showKey(false)
)
.table("My Other Table", builder => builder
.fromStream(stream)
.columns()
)
)
)
.toTemplate()
table
▸ table(percentage
, name
, def
):
PanelBuilder
Add a
TableBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the TableBuilder |
name | string | the name for the TableBuilder |
def | (panel : TableBuilder ) => TableFinalizer | the TableBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
string: StringType,
date: DateTimeType,
})
)
);
// add a table to a tab
const layout = new LayoutBuilder("My Layout")
.panel('row', builder => builder
.table(100, "My Table", builder => builder
.fromStream(stream)
.date("Date", fields => fields.date)
.string("String", fields => fields.string)
.showKey(false)
)
)
.toTemplate()
timeline
▸ timeline(percentage
, name
, def
):
PanelBuilder
Create a
LayoutBuilder to display in the UI from a TimelineBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | - |
name | string | - |
def | (panel : TimelineBuilder ) => TimelineFinalizer <Record , DictType , Record > | the TimelineBuilder to embed. |
Returns
PanelBuilder
Remarks
A Form is editable when defined from a writable
Stream, such as produced by a SourceBuilderExample
// use a StructType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
label: StringType,
start: DateTimeType,
end: DateTimeType,
})
)
);
// create a form in a layout
const layout = new LayoutBuilder("My Layout")
.panel('row', builder => builder
.planner(100, "calendar", builder => builder
.fromStream(stream.outputStream())
.calendar({
label: (fields) => fields.label,
start: (fields) => fields.start,
end: (fields) => fields.end,
})
)
)
.toTemplate()
upload
▸ upload(percentage
, name
, def
):
PanelBuilder
Add a
UploadBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the UploadBuilder |
name | string | the name for the UploadBuilder |
def | (panel : UploadBuilder ) => UploadFinalizer | the UploadBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
BlobType,
);
// add a form to a tab
const layout = new LayoutBuilder("My Layout")
.panel('column', builder => builder
.upload(100, "My Upload", builder => builder
.fromStream(stream)
.inputs()
)
)
.toTemplate()
vega
▸ vega(percentage
, name
, def
):
PanelBuilder
Add a
VegaBuilder to a PanelBuilder within a LayoutBuilder.Parameters
Name | Type | Description |
---|---|---|
percentage | number | the percentage of the parent for the VegaBuilder |
name | string | the name for the VegaBuilder |
def | (panel : VegaBuilder ) => VegaVisualFinalizer | the VegaBuilder |
Returns
PanelBuilder
Example
// use a DictType stream
const stream = Stream(
"My Stream",
DictType(
StringType,
StructType({
string: StringType,
date: DateTimeType,
})
)
);
// add a vega to a tab
const layout = new LayoutBuilder("My Layout")
.panel('row', builder => builder
.vega(100, "My Scatter", builder => builder
.fromStream(stream)
.scatter({
x: (fields) => fields.date,
y: (fields) => fields.integer,
color: (fields) => fields.string,
size: (fields) => fields.float,
})
)
)
.toTemplate()