Now we have "--" and no UI when field value is null.
#How to make visible custom display extension when field value is null?
spare wraith
wet wedge
What exactly do you mean? the interface shows -- for null because there is no data to show
spare wraith
I am adding inline editing interface, and I need to handle @click event on something, but when value is null my custom component does not mount
wet wedge
ah interesting, im not sure actually
Seems to not be possible at this time, Displays are intended to render data in a list/table not to do inline interaction so unless there's data in the cell it does not render unneeded components 😬 https://github.com/directus/directus/blob/f834605a13be19ef43119cf73ffcc8e2d8dccf3f/app/src/views/private/components/render-display.vue#L2
The easy workaround for this would be to set a default value for the fields you'd like to use this interactive display for
spare wraith
Like an empty string? hm
wet wedge
anything that is not null or undefined should work judging from the code. maybe an empty string will work opr you may have to go with -- or perhaps spaces could work too
raven vault
@spare wraith i've also build a custom display for inline editing. The part that I can't seem to figure out is how to get a reference to the id of the row, directus only passes in the value of the field, as I need this id to update the row. Would you mind sharing how you solved it ?
spare wraith
There are three props to the extension "type": "display"
raven vault
Thanks a lot for the reply @spare wraith , I tried it now but I only get the "String" value, i.e the name of the field and collection and not the actual objects, how can I specify to Directus that it should pass in the object and not the name only?
Here is how my display config looks like
`import { defineDisplay } from '@directus/extensions-sdk';
import DisplayComponent from './display.vue';
export default defineDisplay({
id: 'live_lookup',
name: 'Live Lookup',
icon: 'backup_table',
description: 'Do a live lookup to a relational table',
component: DisplayComponent,
options: [
{
field: 'main_field',
name: 'Field name of this lookup',
type: 'string',
meta: {
interface: 'system-input-translated-string',
width: 'full',
options: {
placeholder: 'The remote collection to lookup',
},
},
}
],
types: ['string'],
});`