Custom List Field

Plugins
1

Hey Kirby Friends,

I made a small custom list field that I would like to share with you. You can find it on GitHub.

My idea behind this field was to offer an easy way to maintain an dynamic amount of text fields.

Here is a blueprint example:

fields:
  ...
  fruits:
    label: Give Me Fruits
    type: list
    placeholder: Add a new fruit

Have a look at the resulting panel field:

list field demo

The content will be YAML-structured. Inside the template, the field therefore has to be decoded as an array using $page->fruits()->yaml().

----

Fruits: 

- Lemons
- Apples
- Banana
- Oranges

I hope you like it. If you have any suggestions for the extension, let me know.

Tim

22 Likes
2

I like the idea! Thanks for the plugin - I will try it soon. :smile:

3

A worthy addition, easier to re-order than a basic Markdown list, simpler and faster to edit than a structure field.

4

Looks really great! Might even be a candidate for a core field. What do you think?

8 Likes
5

It also crossed my mind immediately.

I wonder if removing an item by deleting its content is intuitive enough for most people, or if a dedicated icon would be better understood? In this case I’d move the drag icon to the left and put the remove icon to the right. That’s my only little gripe :smile:

6

I’m glad to see that you like it. @bastianallgeier If you would like to integrate it to the core, just go ahead :gift:

@Malvese yeah I thought of this as well. On the other hand, two icons both left and right would take a lot of the light weight character of this field. Hm, hard to decide for the best way to go here.

7

I agree. This may solve some of the issues with nested structure fields. A list field within a structure field would solve a usability issue I’m dealing with right now for Shopkit :slight_smile:

8

Perhaps use a lighter up-down arrow, instead of a 4 directions one, if the list can only be reordered vertically?

Another option is showing the delete button only when the mouse is above the field. A bit less obvious, but still discoverable.

1 Like
9

I like the delete button. The four-way arrow is more universal symbol for “move”, so I’d keep it.

10

What is the difference with this field type compared to a textarea with a list? In a textarea we can sort, edit and delete as well.

- List item 1 
- List item 2
- List item 3
1 Like
11

@jenstornell: yes, of course you can sort, edit and delete a normal list within an textarea field as well. I think the idea here is to have a separate list field which you can sort by dragging and dropping, so as to make handling easier. I don’t know how often you would need such an isolated list, however. Usually, I would put such a list within surrounding text.

As for more complex lists with headlines and paragraphs, which tend to get broken easily using markdown, I would opt for a standard structure field, anyway.

12

I originally created this plugin in connection with a survey tool in which the user could manage different answer options per question. To delete, rearrange and create these answer options it was more intuitive to have them separated in single input fields per option rather then one single text area where the user had to use a markdown syntax to get the required list. I could have done this with a structure field instead but this felt a bit clumsy as I just needed a single input field per answer.

This field lets you handle lists more from a data perspective rather then from a content’s point of view. I would use it to manage the ingredients for recipes on a cooking site but would stick with a markdown list when I write the step by step instructions for cooking the meal.

1 Like
13

Thanks @texnixe and @timoetting. It might be good to have in the core, I have not desided what I think about it yet.

I just keep thinking, what if we continue to have HTML elements as core fields, what will the future bring? These fields?

  • H1
  • H2
  • Paragraph
  • Blockquote
  • Image
  • Strong
  • Link

For my point of view, I hope most of the above never will be core fields.

14

I totally agree (despite the image field, which could arguably have a place as an core field [but that’s another topic] ). But as I said, the use case I have in mind for the list field isn’t a mere representation of the HTML list equivalent.

15

There should be a delete button. Or this there any other way to get rid of an list item?

16

There is no such thing as a delete button yet. @Malvese suggested a solution that I would like to adopt as soon as I find the time. By now, you can delete items by simply using the backspace key to remove the content of the specific line. Empty lines are automatically removed.

1 Like
17

Haha … okay … that solution is really simple. My bad :smile:

18

Well, you just proofed that this feature is a bit too hidden and that a delete button should be implemented :wink:

1 Like
19

Yep. Always be prepared for the most stupid possible user :smile:

20

look really good and clear :grinning: