Form - Look & Feel
- PIPEFORCE
Licenses | ENTERPRISE, CORPORATE |
Since | VERSION 6.0 |
Introduction
The appearance attributes allow you to change the look and feel of your form elements like color, height, weight or borders for example.
To do so, you need to add those look & feel attributes to the field in the form configuration. For example:
{
"title": "Person",
"description": "A person form", ...
"layout": {
"items": [
{
"field": "firstName",
"bgColor": "red",
"icon":"face"
},
...
]
}
}
This would change the look and feel of the form like this:
Types
By default the field type is detected from the JSON Schema so there is no requirement to change this. But you can customize it using these type attributes, if required.
Type | Description |
|---|---|
| Hides the input since it is sensitive data. |
| Renders the field using the browsers native email widget (depends on the browser whether this is supported). |
| Renders the field using the browser native search widget |
| Renders the field using the browser native url widget |
| Renders the field using the browser native phone widget |
| Renders the field using the browser native textarea widget |
Attributes
These are are the attributes you can set to change the appearance of a field:
Name | Value | Description |
|---|---|---|
| One of the color names of the default palette. See below. | Changes the background color of an element. For example |
| One of the color names of the default palette. See below. | Changes the color of the element label and its border. |
| Integer. For example | Sets the fixed height of the element. (use |
| The name of the material icon. | Shows an icon in the element. See the material icons for a reference of available icon names: https://material.io/resources/icons |
| Integer. For example | Sets the fixed width of an element. (use |
|
| Makes an element read only so no value can be set there. |
| Example: |  |
| Example: | |
| Example: | The field automatically grows while user is typing more text. |
| Example: | Shows a suffix for example |
| Example: | Shows a prefix for example |
Default color palette
In order to change the color of an element use one of the color names from these default palettes.
Material icons
Below you can find a preview of icons. To get the full list and name of all possible icons go to https://material.io/resources/icons and search for the icon you need.