How to use @hpcc-js/form - 10 common examples
To help you get started, we’ve selected a few @hpcc-js/form examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hpcc-systems / Visualization / demos / dashy / src / dashPOC.ts View on Github 
new marshaller.FormField().fieldID("filter_state")
])
;
}
namespace viz {
export const table1 = new marshaller.VizChartPanel()
.id("table1")
.title("Table 1")
.widget(new Table())
;
export const cp_8 = new marshaller.VizChartPanel()
.id("cp_8")
.title("Element 8")
.widget(new FieldForm()
.validate(false)
.allowEmptyRequest(true))
;
}
// Dashboard Elements (Controller) ---
const table1 = new marshaller.Element(ec)
.id("table1")
.pipeline([
data.Ins002_dsOutput1_Ins002_dsOutput1_View_table1,
new marshaller.Filters(ec).conditions([{ viewID: "e_8", mappings: [{ remoteFieldID: "filter_state", localFieldID: "state", condition: "==", nullable: true }] }])
])
.mappings(new marshaller.Mappings().transformations([]))
.chartPanel(viz.table1)
.on("selectionChanged", () => {render(callback?): this {
const context = this;
const isVisible = this._popup.popupState();
Button.prototype.render.call(context, function (widget) {
const popupParentWidgetBBox = context._popupParentWidget.getBBox();
const bbox = widget.getBBox();
context._popup
.left(bbox.x - popupParentWidgetBBox.x + bbox.width - context._popup.width())
.top(bbox.y - popupParentWidgetBBox.y + bbox.height)
.visible(isVisible && context.autoClose() ? false : isVisible) // hack: closes the form when submit is clicked ---
.popupState(isVisible && context.autoClose() ? false : isVisible)
.render()
;
if (callback) {
callback(widget);
}
});
return this;
}.value(true),
new Button()
.name("button-test")
.value("Button Test")
]),
new TextArea()
.minHeight(64)
.rows(10)
.name("textarea-test")
.label("Textarea Test")
.value("Textarea Text")
,
new ColorInput()
.name("color-input-test")
.label("Color Input Test"),
new Slider()
.columns(data.Slider.simple.columns)
.data(data.Slider.simple.data)
]
));
break;
case Input:
break;
case InputRange:
break;
case OnOff:
break;
case Range:
break;
case Select:
break;
case TextArea:case Radio:
break;
case CheckBox:
break;
case FieldForm:
render(new FieldForm()
.fields([
new Database.Field().id("fname").label("First Name"),
new Database.Field().id("lname").label("Last Name"),
new Database.Field().id("age").label("Age")
])
.data([["Joe", "Bloggs", 42]])
);
break;
case Form:
render(new Form()
.inputs([
new Input()
.name("textbox-test")
.label("Alphanumeric")
.type("text")
.validate("^[A-Za-z0-9]+$")
.value("SomeString123"),
new InputRange()
.name("textbox-range-test")
.label("Range")
.value(["SomeString001", "SomeString100"]),
new Input()
.name("number-test")
.label("Number Test")
.type("number")
.validate("\\d+"));
break;
case Form:
render(new Form()
.inputs([
new Input()
.name("textbox-test")
.label("Alphanumeric")
.type("text")
.validate("^[A-Za-z0-9]+$")
.value("SomeString123"),
new InputRange()
.name("textbox-range-test")
.label("Range")
.value(["SomeString001", "SomeString100"]),
new Input()
.name("number-test")
.label("Number Test")
.type("number")
.validate("\\d+")
.value(123),
new Select()
.name("select-test")
.label("Select Test")
.selectOptions(["A", "B", "C"])
.value("B"),
new WidgetArray()
.content([
new Input()
.name("textbox-test")
.label("Only Alpha")
.type("text")describe(`${item.prototype.constructor.name}`, () => {
if (item.prototype instanceof Class) {
classDef("form", item);
}
if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case Button:
render(new Button()
.name("button-test")
.value("Button Test")
);
break;
case ColorInput:
break;
case Radio:
break;
case CheckBox:
break;
case FieldForm:
render(new FieldForm()
.fields([
new Database.Field().id("fname").label("First Name"),
new Database.Field().id("lname").label("Last Name"),
new Database.Field().id("age").label("Age")if (item.prototype instanceof HTMLWidget || item.prototype instanceof SVGWidget) {
switch (item.prototype.constructor) {
case Button:
render(new Button()
.name("button-test")
.value("Button Test")
);
break;
case ColorInput:
break;
case Radio:
break;
case CheckBox:
break;
case FieldForm:
render(new FieldForm()
.fields([
new Database.Field().id("fname").label("First Name"),
new Database.Field().id("lname").label("Last Name"),
new Database.Field().id("age").label("Age")
])
.data([["Joe", "Bloggs", 42]])
);
break;
case Form:
render(new Form()
.inputs([
new Input()
.name("textbox-test")
.label("Alphanumeric")
.type("text")
.validate("^[A-Za-z0-9]+$").validate("\\d+")
.value(123),
new Select()
.name("select-test")
.label("Select Test")
.selectOptions(["A", "B", "C"])
.value("B"),
new WidgetArray()
.content([
new Input()
.name("textbox-test")
.label("Only Alpha")
.type("text")
.validate("^[A-Za-z]+$")
.value("SomeString"),
new CheckBox()
.name("checkbox-test")
.label("Checkbox Test")
.value(true),
new Radio()
.name("radio-test")
.label("Radio Test")
.value(true),
new Button()
.name("button-test")
.value("Button Test")
]),
new TextArea()
.minHeight(64)
.rows(10)
.name("textarea-test")
.label("Textarea Test")new Radio()
.name("radio-test")
.label("Radio Test")
.value(true),
new Button()
.name("button-test")
.value("Button Test")
]),
new TextArea()
.minHeight(64)
.rows(10)
.name("textarea-test")
.label("Textarea Test")
.value("Textarea Text")
,
new ColorInput()
.name("color-input-test")
.label("Color Input Test"),
new Slider()
.columns(data.Slider.simple.columns)
.data(data.Slider.simple.data)
]
));
break;
case Input:
break;
case InputRange:
break;
case OnOff:
break;
case Range:
break;new Database.Field().id("lname").label("Last Name"),
new Database.Field().id("age").label("Age")
])
.data([["Joe", "Bloggs", 42]])
);
break;
case Form:
render(new Form()
.inputs([
new Input()
.name("textbox-test")
.label("Alphanumeric")
.type("text")
.validate("^[A-Za-z0-9]+$")
.value("SomeString123"),
new InputRange()
.name("textbox-range-test")
.label("Range")
.value(["SomeString001", "SomeString100"]),
new Input()
.name("number-test")
.label("Number Test")
.type("number")
.validate("\\d+")
.value(123),
new Select()
.name("select-test")
.label("Select Test")
.selectOptions(["A", "B", "C"])
.value("B"),
new WidgetArray()
.content([
