When I add an object field as a field to a structure field, there’s no visualisation in the panel UI:
It’s visualised as {...}. Is this expected? Can this be adjusted?
When you open the item; it’s like this:
Yes, this is expected. It seems difficult to put all the attributes of the object on a single line. But you can show this custom preview however you want:
- Field previews | Kirby CMS
- GitHub - sylvainjule/kirby-previews: Add some missing structure previews. Kirby 3 only. (related plugin but not for object field
Sorry for reopening this thread, but I am having a real hard time to preview the objects inside my structure field:
columns:
settingsNav:
width: 1/1
sections:
nav:
type: fields
fields:
navHeader:
type: structure
label: Header
fields:
linkObject:
type: object
label: Link Objekt
fields:
link:
type: link
label: Link
required: true
linkText:
type: text
label: Text
i try to preview the content of linkText. How can I do this? The provided link does not include an example of an object nor is the blueprint behind the structure field visible…
Thanks
Ps. BTW I am on Kirby 4
1 Like
Same problem for me… (K4)
I’m trying to add a preview of the object field but my plugin seems to not be taken in account.
My yaml configuration
type: group
fields:
menuItem: fields/link
attributes: fields/attributes
which include the link field blueprint
label: field.link.label
type: object
empty: no-link-yet
fields:
label:
label: field.link.label.label
type: text
width: 1/3
link:
label: field.link.link.label
type: link
width: 2/3
newTab:
label: field.link.newTab.label
type: toggle
default: false
My basic JS plugin
panel.plugin("project/extended", {
// fields: {
// myfield: {
// ...
// }
// },
components: {
"k-menuitem-field-preview": {
props: {
value: String,
column: Object,
field: Object
},
template: "<p>Your preview code goes here</p>"
}
}
})
The naming for the component is wrong, must be the type of the field, here object, not the name you give it in your blueprint.
Thank you Texnixe 
My basic custom preview works : I have my label field value shown, but I can’t figure out how to have a link preview instead of page://uuid…
I did some digging around this too a few months ago. I’ve settled on this: GitHub - bvdputte/kirby-linkobject
Maybe you can use as inspiration?
It works now
To have a link preview I can simply use the template of a link component.
Thank you.
I am really close now - here is my blueprint:
navHeader:
width: 1/2
type: structure
label: Header
fields:
linkObject:
type: object
label: Link Objekt
fields:
link:
type: link
label: Link
required: true
options:
- page
- url
width: 1/2
linkText:
type: text
label: Text
width: 2/6
target:
label: Neues Fenster?
type: toggle
width: 1/6
anchorToggle:
type: toggle
label: Anker Link?
width: 1/6
anchor:
type: link
label: Anker
width: 5/6
when:
anchorToggle: true
options:
- anchor
classnames:
label: CSS Klassen
type: text
here is my plugin:
panel.plugin("test/field-methods", {
fields: {
linkObject: {
extends: "k-object-field",
},
},
components: {
"k-object-field-preview": {
props: {
value: String,
column: Object,
field: Object,
},
computed: {
preview() {
if (!this.value) {
return null;
}
let preview = "";
if (this.value.link) {
if (this.value.link.startsWith("http")) {
preview += "🌐 ";
} else if (this.value.link.startsWith("page://")) {
preview += "📄 ";
} else if (this.value.link.startsWith("file://")) {
preview += "📎 ";
} else if (this.value.link.startsWith("tel:")) {
preview += "📞 ";
} else if (this.value.link.startsWith("mailto:")) {
preview += "✉️ ";
}
}
if (this.value.linktext) {
preview += this.value.linktext;
} else if (this.value.link && this.value.link.startsWith("page://")) {
preview += this.value.pageTitle
? this.value.pageTitle
: this.value.link;
} else if (this.value.link) {
preview += this.value.link;
}
if (this.value.target) {
preview += " ↗️";
}
if (this.value.anchortoggle && this.value.anchor) {
preview += ` #${this.value.anchor}`;
}
return preview;
},
},
template: `
<div class="k-object-field-preview">
{{ preview }}
</div>
`,
},
},
});
The only thing that is missing is a fallback to the page title if no text is provided.
