Highlight changed CMS fields

Is there a way to make it easy to see (e.g. by changing the colour of the field label, or adding a “*”) which CMS fields have been changed from their defaults? Specifically dropdown fields and toggle fields.

I’d find this useful when dealing with layouts/blocks that have many fields, e.g.:

Yes, you can simply add it to the description text:

  listFontsize:
    label: font size
    type: select
    default: " text-25"
    options:
      " text-25": "25px (Standard)"
      " text-30": "30px"

standard

You can also use this for toggle fields:

  textIndented:
    label: Text links einrĂĽcken
    type: toggle
    text:
      - "nein (Standard)"
      - "ja"
    default: false

You can of course also add an *

Ah, thanks. That would certainly work, but I was hoping for a way to more programatically achieve it so that I wouldn’t have to manually update every field, and also allow it to work with fields for plugins.

However, a programmatic solution also requires the definition of default values. The system must know from somewhere whether value A, B or C is the default value.

True, but my thinking was that the default is already set in the yml and if it isn’t then the first value becomes the initial value displayed in the dropdown.

But it sounds like there isn’t an easy way to achieve this without modifying the Vue components to update the fields.

As far as I know, the default value is always “null” or “false”. If you want to use your own value that was not previously defined (for example in a select field with 10 values), Kirby must know which of the 10 values is the default value, otherwise “null” or “false” is used.
You can of course specify a value with a query. But this must also be defined somewhere beforehand.

Perhaps someone here in the forum has a different approach.

There is no out-of-the box way to achieve this. You would have to extend the Vue components of each field you use. Then you could read the default value as defined in your blueprint (or the options if there is no default value), and then add styles as desired based on these values.

1 Like