# @humany/widget-forms > Forms for Humany Widgets. Latest version **2.1.9-alpha.4** (published 2022-08-25) · SEE LICENSE IN LICENSE.txt license · 0 weekly downloads ## Install ```sh npm install @humany/widget-forms pnpm add @humany/widget-forms yarn add @humany/widget-forms bun add @humany/widget-forms ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.1.9-alpha.4 | | Published | 2022-08-25 | | First published | 2018-04-06 | | Weekly downloads | 0 | | License | SEE LICENSE IN LICENSE.txt | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 6.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Telia Company AB | | Maintainers | donami, bratn, anderslindvall, totte | | Keywords | humany, telia | ## Links - npm: https://www.npmjs.com/package/@humany/widget-forms - npm.io page: https://npm.io/package/@humany/widget-forms ## Dependencies (1) - [@telia-ace/widget-forms](https://npm.io/package/@telia-ace/widget-forms.md) ^1.0.20 ## Recent versions - 2.1.9-alpha.4 (latest) — 2022-08-25 - 1.1.11 (previous) — 2022-06-16 - 2.1.9-alpha.3 (next) — 2022-05-24 - 2.1.9-alpha.2 — 2022-05-24 - 2.1.9-alpha.1 — 2022-05-24 - 2.1.9-alpha.0 — 2022-05-24 - 2.1.8 — 2022-04-07 - 2.1.7 — 2022-03-03 - 2.1.6 — 2022-02-24 - 1.1.10 — 2022-02-24 - 1.1.9 — 2022-02-24 - 1.1.8 — 2022-01-25 - 2.1.5 — 2022-01-19 - 2.1.4 — 2021-11-29 - 2.1.3 — 2021-10-27 - … 108 more at https://npm.io/package/@humany/widget-forms/versions ## README # `@humany/widget-forms` This package contains utilities for creating form definitions for Humany widgets, used in different parts in the widget framework. The utilities are meant to be used together with other APIs, such as the [Conversation Platform API](https://www.npmjs.com/package/@humany/widget-conversation), and it does not have capabilities to render a UI completely on its own. ## FormBuilder The `FormBuilder` provides a convenient way to create and modify `Form` objects. Create an instance by using the `create()` factory as shown below. ```ts import { FormBuilder } from '@humany/widget-forms'; const builder = FormBuilder.create(); ``` ### `createComponent(info: ComponentInfo, createChildren?: ComponentFactory);` Creates a new component based on the provided `ComponentInfo` object and appends it to the current `Form`. ```ts builder.createComponent({ component: 'Text', type: 'string', name: 'model', }); ``` ### `ComponentInfo` Describes a component in a form. | Name | Type | Required | Description | | ----------- | ----------------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | `name` | `string` | Yes | The name of the component. | | `type` | `string` | Yes | The underlying type of the component. Can be `'string'`, `'number'`, `'boolean'`, `'array'`, or `'object'` for components with children. | | `component` | `string` | Yes | The UI component used to render the component. Can be any of the built-in UI components. | | `title` | `string` | No | The display name of the component. | | `evaluate` | `boolean` | No | Indicates whether changes to the component value should be evaluated. Default: `false`. | | `value` | `string`, `number`, `boolean` | No | The initial value of the component. | | `required` | `boolean` | No | Whether the component should be displayed as being required. Default: `false`. | | `items` | `Array` | No | Options for type `'array'` when multiple fixed options are available. | #### `OptionItem` One of a series of fixed options available for list och multi-select components. Name | Type | Required | Description -----|------|----------|------------ `label`|`string`|Yes|The text label to be displayed for the item. `value`|`string`|Yes|The value associated to the item. ### `ComponentFactory` = `(builder: FormBuilder) => void` A factory method for creating nested components such as fieldset. ### Built-in UI components | Name | Supported value types | Description | | ----------------- | --------------------- | ------------------------------------------- | | `Agreement` | `boolean` | Checkbox with associated link. | | `CheckboxList` | `string[]` | List of checboxes. | | `DropDownList` | `string[]` | List of select options. | | `Email` | `string` | Input with e-mail constraint. | | `GenericDiv` | N/A | Empty div used as placeholder when styling. | | `Number` | `number` | Input with number constraint. | | `Password` | `string` | Password input. | | `RadioButtonList` | `string[]` | List of radio buttons. | | `Text` | `string` | Input text. | | `Textarea` | `string` | Input textarea. | ### Creating simple components The following example shows construction of a form with two components, one for country and one for city. ```javascript const form = builder .createComponent({ component: 'Text', type: 'string', name: 'country', value: 'SE', }) .createComponent({ component: 'Text', type: 'string', name: 'city', value: 'Stockholm', }) .get(); ``` ### Creating nested components The following example shows construction of a form with nested components. The first component is a fieldset holding two child components; first and and last name. The second argument to the fieldset component is a `ComponentFactory` function that exposes a `FormBuilder` instance used to create the nested child components. ```ts const form = builder .createComponent( { component: 'Fieldset', type: 'object', name: 'name', }, (builder: FormBuilder) => { builder .createComponent({ component: 'Text', type: 'string', name: 'first-name', value: 'John', }) .createComponent({ component: 'Text', type: 'string', name: 'last-name', value: 'Doe', }); } ) .get(); ``` --- _Source: https://npm.io/package/@humany/widget-forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._