Static CMS
Star StaticJsCMS/static-cms on GitHub
v4.3.0DocsExamplesDemoCommunity

List

  • Name: list
  • UI: The list widget contains a repeatable child widget, with controls for adding, deleting, and re-ordering the repeated widgets. If no 'fields' or 'types' are provided, the list widget defaults to a text input for entering comma-separated values.
  • Data type: List of widget values

The list widget allows you to create a repeatable item in the UI which saves as a list of widget values. You can choose any widget as a child of a list widget—even other lists.

Widget Options

For common options, see Common widget options.

NameTypeDefaultDescription
defaultstring[ <default from the child fields> ]Optional. The default values for fields. Also accepts an array of items
allow_addbooleantrueOptional. false - Hides the button to add additional items. Ignored if both fields and types are not defined
collapsedbooleantrueOptional. true - The list and entries collapse by default. Ignored if both fields and types are not defined
summarystringOptional. The label displayed on collapsed entries. Can use Template Transformations. Ignored for single field lists.
label_singularstringlabelOptional. The text to show on the add button
fieldslist of widgets[]Optional. A nested list of multiple widget fields to be included in each repeatable iteration
minnumberOptional. Minimum number of items in the list
maxnumberOptional. Maximum number of items in the list
add_to_topbooleanfalseOptional.
  • true - New entries will be added to the top of the list
  • false - New entries will be added to the bottom of the list
Ignored if both fields and types are not defined
typeslist of object widgetsOptional. A nested list of object widgets representing the available types for items in the list. Takes priority over fields.
type_keystring'type'Optional. The name of the individual field that will be added to every item in list representing the name of the object widget that item belongs to. Ignored if types is not defined
delimiterstring','Optional. The delimiter to use when entering a delimiter separated list. Ignored if fields or types are defined

Examples

Basic

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

Allow Additions

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
allow_add: false
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

Default Value

name: galleryImages
label: Gallery
widget: list
fields:
  - name: src
    label: Source
    widget: string
  - name: alt
    label: Alt Text
    widget: string
default:
  - src: /img/tennis.jpg
    alt: Tennis
  - src: /img/footbar.jpg
    alt: Football

Start Collapsed

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
collapsed: false
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

Min and Max

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
min: 1
max: 3
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

Add To Top

name: testimonials
label: Testimonials
widget: list
summary: '{{fields.quote}} - {{fields.author.name}}'
add_to_top: true
fields:
  - name: quote
    label: Quote
    widget: string
    default: Everything is awesome!
  - name: author
    label: Author
    widget: object
    fields:
      - name: name
        label: Name
        widget: string
        default: Emmet
      - name: avatar
        label: Avatar
        widget: image
        default: /img/emmet.jpg

Delimiter Separated List

name: tags
label: Tags
widget: list
delimiter: ';' # Default: ','
default:
  - 'tag-1'
  - 'tag-2'

Singleton List (List of Strings)

name: sections
label: Home Section
widget: list
default:
  - 'tag-1'
  - 'tag-2'
fields:
  - name: tag
    label: Tag
    widget: string

Typed List

name: sections
label: Home Section
widget: list
types:
  - name: carousel
    label: Carousel
    widget: object
    summary: '{{fields.header}}'
    fields:
      - name: header
        label: Header
        widget: string
        default: Image Gallery
      - name: template
        label: Template
        widget: string
        default: carousel.html
      - name: images
        label: Images
        widget: list
        fields:
          - name: image
            label: Image
            widget: image
  - name: spotlight
    label: Spotlight
    widget: object
    fields:
      - name: header
        label: Header
        widget: string
        default: Spotlight
      - name: template
        label: Template
        widget: string
        default: spotlight.html
      - name: text
        label: Text
        widget: text
        default: Hello World