Engineer Field v0.8 and v0.9 🎉

The engineer field is born: https://github.com/jenstornell/field-engineer

The big benefit is that there is no modal which by itself has many benefits:

  • You see everything, all the time.
  • No back and forth jumping between adding and viewing.
  • Copy paste things between the fields more simple.
  • Edit the data in across the table/items.

Planned: Unlimited nesting

style: table

style: items

I added some extra data. A textarea and some checkboxes:

What do you think?

13 Likes

I love it. This makes a lot of sense.

For style: table, where do you click to edit the rest of the fields? (long text, check it)

Thanks! :slight_smile:

I’m not sure what you mean. If you use style:table with a long text you need to scroll down a bit to edit the other fields. I think style:items is a better fit for long vertical fields.

Do I understand you correctly? Do you have another idea in mind?

I just added a screenshot of a “long” text. It pushes down the next row naturally.

(The UI here is a bit different, but the function is the same)

I guess my question is, how does style: table handle an entry with 10 fields?

Now I understand what you mean.

It’s like any html table. It will try to squeeze the fields in as good as it can. Ten fields/columns is probably too much for style:table. The fields are listed directly in Engineer, without the entry layer (that the structure field uses).

It could be possible to add a new feature to make an overflow-x: scroll if it’s a common need, with many fields in one row. Then the table would be scrollable left/right.

Okay, that makes sense. I originally thought your first two screenshots were showing the exact same data.

I should have thought of that. I have now added a sentence that says that there are some extra fields in the style:items example. I wanted to show that style: items is better suited for many fields, because you can add grids like width: 1/2 etc.

Sorry for the confusion.

I’ve started working on a new much bigger version, but in the meantime I release a minor version that just fixes some of the major bugs: https://github.com/jenstornell/field-engineer

Changelog

  • Fixed bug with th position
  • Fixed bug with table sort jumping
  • Fixed bug with checkboxes option: children
  • Fixed bug with textarea autosize after adding new item
  • Fixed bug frontend crasch. Only run plugin in the panel

What do you want to see first in the next release of the plugin?

  • Duplicate/clone field
  • Unlimited nesting
  • More than one kind of fieldset, just like the Kirby Builder
  • Switch to compact view (called entry in the structure field)
  • All of it

0 voters

Haha, none of the above, but validation :innocent:

It already have html5 validation. If you for example use type: number and write letters, it will prevent you from saving and the browser will tooltip you on which field is wrong.

Is it html5 validation you mean, or is it javascript validation you have in mind?

I actually mean using Kirby’s validation methods…

Ahh, that’s a tricky one, because I run everything on the client side. Maybe I will figure something out, but I don’t think it will be the in the next version. :neutral_face:

Version rc-0.4 released! :tada:

After much hard work it’s finally here, a new version of Kirby Engineer.

It’s a complete rewrite from 0.3 and you can create really complex field structures with this version.

Supports:

  • Nesting
  • Fieldsets
  • Inline editing
  • Sorting
  • Cloning

It’s now also possible to buy licenses, but be sure to try before you buy.

Nesting (unlimted)

Fieldsets (or fields)

Sorting (drag and drop or arrows)

If you are experience any issues, please report them on Github (not in this forum). It makes it much easier to keep track of them.

Much more information on how to use this plugin is provided at Kirby Engineer. :tada:

2 Likes

Version 0.5 released! :tada:

Download from Github https://github.com/jenstornell/field-engineer

From the changelog:

A quick example of how it looks like with plugins

In this example I show:

In case you want to try this setup, here is the blueprint for it. Just be sure to install the required fields first.

fields:
  my_engineer:
    type: engineer
    fieldsets:
      hero_images:
        label: Hero + Images
        fields:
          hero:
            label: Hero
            type: hero
            width: 1/3
          images:
            label: Images
            type: images
            width: 2/3
      switch_quickselect:
        label: Switch + Quickselect
        fields:
          switch:
            label: Switch
            type: switch
            width: 1/2
          quickselect:
            label: Quickselect
            type: quickselect
            options: images
            width: 1/2
1 Like

Version 0.6 - Grid :tada:

Github: https://github.com/jenstornell/field-engineer

This release has a name and it’s called “Grid”.

The main reason for that is because sub engineer field now have support for width like width: 1/3.

From the changelog:

  • Feature - Blueprint option to choose which buttons to use.
  • Feature - Blueprint option width can now be set to engineer fields.
  • Improved the dropdown arrow position.
  • Improved the trash icon to look like the Panel trash icon.
  • Improved the action button bar ui.
  • Improved “Add the first entry” with icons to show if it’s containing fields or fieldsets.
  • Removed labels from the action buttons to save space for small fields.
  • Removed border for Kirby Images. The css is now handled by Kirby Images instead.
  • Field Kirby date field works with Engineer.
  • Field Kirby time field works with Engineer.
  • Field Kirby country field works with Engineer.
  • Field Kirby decimal field works with Engineer.
  • Docs - Separated field plugins that works “out of the box” from the “supported” ones.
  • Docs - Troubleshooting steps added.

Blueprint

The above example as blueprint. Be aware, you need to install the Hero field plugin for it to work because that field is used in the example this time.

fields:
  my_engineer:
    type: engineer
    fields:
      wrapper:
        label: Wrapper
        type: engineer
        width: 1/4
        fields:
          hero:
            type: hero
          text:
            label: Time
            type: time
4 Likes

Version 0.7

Github: https://github.com/jenstornell/field-engineer

Delete warning

It might be a nag to answer the question “Do you really want to delete this entry?”, but it’s much safer, especially for people with butterfingers. It’s especially important for the Engineer field because removing an item will remove every sub item as well.

I clicked an item and on the trash icon (that will hide on delete):

I clicked on the parent and the trash icon. In this case the children will be removed as well:

It’s much easier now when you have the visual preview of what will be deleted.

Tests

If engineer.debug is enabled in the config it will register a set of blueprints that can be used for debugging. For you as a user it can be used as a inspiration to get started. So far there is just one blueprint and it will list all fields. Be aware that it only works for Kirby 2.5.2 because of a bug.

Breaking changes

  • engineer.label.fallback is no longer available or needed.
  • width from the previous version has been changed to rowWidth to not collide with the native width.

From the changelog:

  • Feature - Delete warning message.
  • Feature - Delete area preview.
  • Breaking change - The width option for rows is renamed rowWidth instead. It will make it more future proof and prevent collisions with width on the root of the engineer field.
  • Breaking change - The option engineer.label.fallback is removed. No good reason for a label fallback.
  • Bug fixes - Minor issues.
  • Docs - Because of some recent Panel bugs I pushed the requirement to Kirby 2.5.2.

I was about to include support for the list field, but a last minute DOM bug with that field prevented me from support it with this release.

5 Likes

Version 0.8 and 0.9 - Style table is back

Github: https://github.com/jenstornell/field-engineer

After my vacation I’m back with a new version of this plugin.

Screenshots

Maybe I will remove the repeated labels in a later version, but for now they are still around a while longer.

This is how it looks like when you have saved the data. Just a nice table:

v0.9

  • Feature - style: table reimplemented.
  • Enhancement - Removed some html classes that was not needed for table labels.
  • Bug fix - Fixed error if table fieldset could not be found.
  • Bug fix - Engineer blueprints are now only registered if engineer.debug is on.
  • Bug fix - style: table label issue fixed. Thanks Dreytac.

v0.8

  • Test - Blueprint panel-fields.yml that tests all supported native fields built into the Panel.
  • Test - Blueprint supported-fields.yml that tests custom made fields that are supported by Engineer.
  • Test - Blueprint working-fields.yml that tests custom made fields that should work out of the box.
  • Test - Blueprint grid.yml that tests width, rowWidth and buttons on multiple levels.
  • Test - Blueprint nesting.yml that tests nesting on multiple levels.
  • Test - Blueprint fieldsets.yml that tests fields, fieldsets and empty sets on multiple levels.
  • Test - Blueprint options.yml that tests field options default, icon, readonly, help, placeholder and required.
  • Enhancement - It’s now possible to click outside a field to hide the action bar.
2 Likes

Hi!

I’m getting the following error in the backend-panel:

Parse error: syntax error, unexpected 'default' (T_DEFAULT), expecting identifier (T_STRING) in *X*/site/plugins/field-engineer/lib/presentation-array.php on line 52

Kirby Version: 2.5.8

Blueprint-code:

title: Projekt

pages: false

options: 
  template: false  
  status: true
  url: false
  delete: true
  preview: false

files:
  type: 
    - image
    - video
        
fields:
  my_engineer:
    type: engineer
    fields:
      first:
        label: Text
        type: text
      second:
        label: Image
        type: image

This also happens if there’s no field-engineer-call in the blueprint-code.

Do you have any advice?

Thanks!

@teh You are probably using a PHP version < 7, see plugin requirements.

Thanks, I’ll check that.