Form¶

Columns¶

• Add as many columns as you need by clicking the Add columns button in the Form header.

  • Columns are adjustable in the properties pane where you can change order, alignment, and responsive behavior.

• Remove columns by clicking the column, then the delete Remove columns.

Sections¶

• Add Sections by highlighting the Form component and clicking Add section.

  • Sections are adjustable in the properties pane where you can turn section titles on/off and edit section titles.

• Remove Sections by clicking the section, then clicking delete Remove section.

Fields and rows¶

Add fields to sections by highlighting the section, clicking Add, and selecting Model fields from the dropdown menu.

• Add a field you want end users to read, edit, or both from the model associated with the Form component, Javascript templates, images, or column sets.

• Adding a field will generate a row.

  • Once a row is created, you can add additional fields to that row by clicking the row border, then clicking Add.

• Rows have no configurable properties. When a row is selected, the Properties Pane will be blank.

Buttons and images¶

Add a button group to a section by highlighting the section, clicking Add fields and selecting Button Group from the dropdown menu.

• This inserts a button group directly into the Form at the selected location.
• When you add buttons to the Form component, these buttons have their own properties. All Form button properties are the same as those for Ink Button Set buttons.

Add an image to a section by highlighting the section, clicking Add fields and selecting Image from the dropdown menu.

• This inserts an image directly into the Form at the selected location.
• When you add an image to the Form component, the image has its own properties. All Form image properties are the same as those for Ink Image components.

Column sets¶

Add column sets to a section by highlighting the section, clicking Add fields and selecting Add column set from the dropdown menu.

• Add as many columns within the column set as you need by clicking the Add columns button in the column set header.

  • Columns are adjustable in the properties pane where you can change order, alignment, and responsive behavior.

• Remove columns by clicking the column, then the delete Remove columns.

Use a character counter in string and textarea fields¶

A character counter helps end users know when they are approaching the content limit for text entry fields and encourages them to make input more succinct. Skuid property Show length counter adds a counter for string fields and the larger textarea fields:

1. Click the string or textarea field within the component.
2. In the Field Properties pane, check Show length counter.

When editing the field, end users will now see a character countdown (“25/ 128”) that indicates the number of characters used (the first number) and how many total characters are allowed (the second number).

Note

• The counter is enabled by default for standard textarea fields.
• The counter is not available for Salesforce rich text area type fields.

Form properties¶

Column properties¶

• Division behavior: Determines how the column will size itself in relation to other columns within the Form component.

  • Flexible width: Flexible width columns take up as much room as is available; when the screen size shrinks they also size down to their minimum width before wrapping within the Form component.

    • Flex ratio: This sets the size of this column relative to other columns. For example, if there are two columns in a Form component, and the flex ratio for each is 1, they will each take up ½ of the Form. If one has a flex ratio of 2, and the other has a flex ratio of 1, the first one occupies ⅔ of the Form, and the second one occupies ⅓ of it.
    • Minimum width: Sets the lower limit for the column’s width. This can be specified using px, em, rem, %, vh, or vw measurements.

    Note

    Make sure the column’s minimum width is at least as wide as its contents!

  • Fit to content: This sizes the column to fit the width of the content within the Form component.

  • Specified width: Sets a fixed width for the column.

    • Width: Sets the width of the column. This can be specified using px, em, rem, %, vh, or vw measurements.

• Vertical align: Adjusts vertical alignment to top, center, or bottom of the column.

• Change order: Adjusts the order in which columns appear from left to right.

Section properties¶

• Show section heading: Toggle section title text at the top of a section.
• Section heading: Update text that appears in section header.

Field properties¶

Once fields are added to the Form component, each field has a specific set of properties. These properties vary, depending upon the field type. Click on the field within the Form to reveal and edit its properties.

Template fields¶

In addition to adding Fields from the Add Fields drop down on the component, it’s possible to add a Template. This creates a field on the table which can be configured from the Field Properties tab.

Template fields provide a way to display arbitrary text or HTML alongside field data. Other fields may be included within a template field through the use of merge syntax.

A basic template field for a full name may look like this:

{{FirstName}} {{LastName}}

It is also possible to update any fields included within a template field at runtime by double-clicking the Template field within the component.

For additional information, see Using Fields.