Quickly manage lists with multiple fields in Kirby 3

Last update: May 17, 2022

Kirby Multilist

This plugin helps dealing with long lists with multiple fields.

multilist-screenshot


Overview

This plugin is completely free and published under the MIT license. However, if you are using it in a commercial project and want to help me keep up with maintenance, please consider making a donation of your choice or purchasing your license(s) through my affiliate link.

1. Installation

Download and copy this repository to /site/plugins/multilist

Alternatively, you can install it with composer: composer require sylvainjule/kirby-multilist


2. Setup

Use is as you would use a Structure :

multilist:
  label: Multilist example
  type: multilist
  fields:
    name:
      label: Item name
      type: text
    date:
      label: Release date
      type: date
    toggle:
      label: Listed?
      type: toggle

3. Supported fields

The field supports all inline field types:

  • text
  • url
  • email
  • select
  • multiselect
  • number
  • tel
  • tags
  • range
  • toggle
  • time
  • date

More complex fields (files, pages, blocks, layout, etc.) are not supported.


4. Field properties

You have access to a lot of the Structure field properties, with a few tweaks:

  • There is no columns property, instead you can directly set a width: x/x property on your inner fields.
  • There is no duplicate property.

5. Front-end usage

Use it as you would use a structure field, with either the ->toStructure() ou ->yaml() method.


6. Drawbacks

I have intended this field for websites where editors edit content on desktops. Due to the complex naure of the field, it doesn't have any mobile aternate view.


7. License

MIT

GitHub

https://github.com/sylvainjule/kirby-multilist
Comments
  • 1. Support for the hidden field

    The field works - it exists, can be changed, and is at least readonly, but it's still showing. Will you accept PR for hiding field of type hidden?

    (or, can you add it please?)

    Reviewed by adamkiss at 2021-04-29 21:50
  • 2. Add keyboard shortcuts

    • shift + enter to add new item
    • left & right when it makes sense
    • up & down when it makes sense

    left & right:

    • field type is number, select or multiselect
    • fields type is text, url, email and tel when:
      • left and caret is left
      • right and caret is right

    up & down:

    • field type is text, url, email or tel

    toggle doesn't seems to propagate the keyup event so we can't key-navigate when its focus.

    see #3

    Video showing the interaction:

    https://user-images.githubusercontent.com/60777/142996401-c0f3f396-bded-4828-886e-90e9bddc76a7.mp4

    When the PR with the hidden field support is merged this branch's code has to be adjusted to support it too by using columns instead of fields.

    Reviewed by mrflix at 2021-11-23 09:06
  • 3. Kirby 3.6 support

    Hey Sylvain! Thanks a lot for this great plugin. It's an essential to work fast with list content. I just tried it for the first time with Kirby 3.6 and unfortunately it's UI is broken:

    Kirby 3.5.x:

    Screenshot 2021-11-22 at 20 17 44

    Kirby 3.6.0:

    Screenshot 2021-11-22 at 20 17 15

    The table headers are very small, the drag-and-drop area is gone and the remove-button on the right is moved outside the field. I investigated and found the reason: the 38px height and width of all those elements was refactored into the variable --item-height: 38px. This variable is set on .k-structure-field.

    I fixed it locally by adding it to .k-multilist-table:

    .k-multilist-table {
        --item-height: 38px;
    }
    
    Reviewed by mrflix at 2021-11-22 19:33
  • 4. Keyboard shortcuts – movement and add a new row

    Hey Sylvain,

    great field, thank you - and just at the moment I was interested in such field!

    While working with it, I quickly grew frustrated with few things however - namely:

    • I can't add a new row with keyboard only
    • If I want to change a thing X rows up or down, I have to tab or shift-tab however many times it's needed, even though the other cell is straight up or whatever

    Would you be interested in accepting PR for keyboard shortcuts? I am not sure how hard it can be, but sometime next week I could try to add them. If you would accept it, what would the shortcuts be? I find myself reaching for ⌘ + arrows and ⌘ + enter for new row, but would also accept any other option.

    Reviewed by adamkiss at 2021-04-28 08:22
  • 5. Auto-sorting breaks the focus order – focus stays, data changes

    If you have the field set as sortable: false and sortBy: whatever however, as soon as you change the value of the field the multilist is sorted by, if the order of the data changes, the focus doesn't.

    • enter value at position 3
    • change the sortBy field to whatever resorts the content
    • data changes (your new field is now row 1)
    • focus stays on row 3

    https://user-images.githubusercontent.com/481362/116370196-74f0a780-a80a-11eb-9ddb-206fb7eaf11e.mp4

    Reviewed by adamkiss at 2021-04-28 08:18
A dependency-free Vue plugin for formatting and validating credit card form fields.

A dependency-free Vue plugin for formatting and validating credit card form fields.

Jul 21, 2022
Simple Vuex module to handle form fields and validations
Simple Vuex module to handle form fields and validations

vuex-module-validatable-state Simple Vuex module to handle form fields and validations. You can build a view model for your form, which runs valdation

Mar 31, 2022
Vue.js plugin that covers the Buefy form fields for Formly.

Vue.js plugin that covers the Buefy form fields for Formly. It lets you to validate input data in your forms. The plugin combine simplicity of the Formly form builder, lightness of the Buefy form fields and impeccability of the Bulma design.

Nov 16, 2020
Kirby Nuxt Starter Kit - Kirby's sample site – but rewritten headless with Nuxt 3

Kirby Nuxt Starter Kit Kirby's sample site – but rewritten headless with Nuxt 3! Explore the kit live » Kirby Nuxt Starterkit This repository is a por

Aug 10, 2022
Kirby block preview plugin to directly render block fields
Kirby block preview plugin to directly render block fields

Kirby Fields Block Kirby block preview plugin to directly render block fields, allowing for inline editing. Usage Block definition When creating a cus

Aug 10, 2022
vue-idb - Lists and huge lists management with IndexedDB (Dexie.js) only or automatically created and extendible vuex modules

vue-idb IndexedDB wrapper for Vuejs based on Dexie Install npm install vue-idb --save Usage import Vue from 'vue' import VueIdb from 'vue-idb' Vue.us

Jun 15, 2022
This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.
This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

This project allows each person to write down their goals. You can add multiple lists that you want to run. After you complete a goal from the list, you can delete it.

May 22, 2021
This Laravel Nova package allows you to manage media and media fields.
This Laravel Nova package allows you to manage media and media fields.

Nova Media Hub This Laravel Nova package allows you to manage media and media fields. Requirements php: >=8.0 laravel/nova: ^4.0 Features Media Hub UI

Aug 4, 2022
A table allowing to group your data by multiple fields for Vue.js

vue-grouped-table Usage Install npm install @acarat/vue-grouped-table Import the component import { GroupedTable } from "@acarat/vue-grouped-table"; U

May 21, 2020
A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap

vue-formly-bootstrap A plugin for Vue Formly which adds multiple form fields according to Twitter Bootstrap. Version 2 Note that this is version 2 of

Dec 31, 2020
Another validation form for the Vue. Validates input fields of multiple forms and displays errors

vue-coe-validator ✅ Another validation form for the Vue. Validates input fields of multiple forms and displays errors. Note: without any dependencies.

Jun 5, 2021
Download file Block for Kirby block editor
Download file Block for Kirby block editor

Download file Block for Kirby block editor How to dev Install parcel globaly npm install -g parcel-bundler Start watch process npm run dev Start buil

May 19, 2021
A new type of WYSIWYG editor for Kirby

A new type of WYSIWYG editor for Kirby

Jul 30, 2022
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.
A simple map & geolocation field, built on top of open-source services and Mapbox. Kirby 3 only.

Kirby Locator A simple map & geolocation field, built on top of open-source services and Mapbox. Overview This plugin is completely free and published

Jun 25, 2022
A Kirby 3 panel plugin to visualise the `site/logs` folder in the panel.
A Kirby 3 panel plugin to visualise the `site/logs` folder in the panel.

Kirby LogBook A Kirby 3 panel plugin to visualise the site/logs folder in the panel. Opinionated defaults to work best with the kirby-log plugin out-o

Jul 10, 2022
Localizer for Kirby helps to change every localized string within the panel – other plugins included!
Localizer for Kirby helps to change every localized string within the panel – other plugins included!

Localizer for Kirby – A plugin to override Panel and Plugin translations. Attention This plugin is still in Beta and is likely to change. If you find

May 26, 2022
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes
Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes

Kirby Mapnotator Annotate maps and generate GeoJSON in Kirby by drawing markers, paths and shapes. Overview This plugin is completely free and publish

Jun 5, 2022
icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.
icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

icons-ui is a package that allows multiple icon packages to be used in multiple frontend frameworks.

Jul 12, 2021
🦄 Vue components for modifying lists with the HTML5 drag & drop API.
🦄 Vue components for modifying lists with the HTML5 drag & drop API.

Vue components for modifying lists with the HTML5 drag & drop API. ?? Warning ?? Don't set index to the :key, it will cause dragging confusion. <vddl-

Jul 16, 2022
Vue.js 2 plugin allowing developers to create very custom accordion lists.
Vue.js 2 plugin allowing developers to create very custom accordion lists.

Vue Collapse Vue.js 2 plugin allowing developers to create very custom accordion lists. It is meant to be very flexible and easy to customize accordio

Oct 12, 2021