Description
The Livingdocs Editor can be customized by using your own components. Components are referenced by name in configurations. For Livingdocs to pick up your components, you need to register them first. Livingdocs provides an API to register custom components written in VueJS. They are always register with a certain type. The supported types are:
- metadataPlugin
- includeParamsSidebarForm
- dashboardCard
- searchFilter
- liDocumentListCardExtension
- tableDashboardCell
Depending on the type
, you will get different props
defined on your component. Please see below for details.
To register a custom component to be used in the result list of a custom dashboard, you would call the API like this:
const liEditor = require('@livingdocs/editor')()
liEditor.vueComponentRegistry.registerComponent({
// type needs to be a valid type
type: 'type',
name: 'myComponent',
component: require('path/to/your/vue/component.vue').default
})
As you can see, Vue Single File Components are supported.
Types
metadataPlugin
A metadataPlugin
is used to render a metadata plugin UI in the Metadata Form.
These are the props
which are provided to your vue component:
props: {
value: {
// type is depending on the metadata plugin
// you should be specific here in your component
type: [Object, String, Array, Number, Boolean],
required: true
},
disabled: {
type: Boolean,
default: false
},
id: {
type: String,
required: true
},
handle: {
type: String,
required: true
},
config: {
type: Object,
required: true
},
uiConfig: {
type: Object,
required: true
},
// a reactive read-only object with keys for every
// metadata property on the document/media library entry
metadataProperties: {
type: Object,
required: true
},
// holding a video or image or file property when the metadata form
// is loaded in the media library, empty object otherwise
entities: {
type: Object,
required: true
},
// only given if configured
dataProvider: {
type: Object,
default: undefined
}
}
searchFilter
A searchFilter
registers a Vue component as filter for the search UI.
These are the props
which are provided to your vue component:
props: {
filter: {
type: Object,
default: () => {}
}
},
A full example can be seen here
includeParamsSidebarForm
A includeParamsSidebarForm
is used to render a form to manipulate params
for doc-include
s. This Guide shows you how to use such a component.
This component needs to take exactly one prop named params
. It will contain an object with the params for the doc-include
.
props: {
params: {
type: Object,
required: true
}
}
The component needs to emit a CustomEvent to tell Livingdocs when the params have changed. You can do this in a change event handler for example:
const event = new CustomEvent('update:params', {
detail: this.paramsDraft,
bubbles: true
})
this.$el.dispatchEvent(event)
dashboardCard
A dashboardCard
is used to render a single search result in a dashboard.
These are the props
which are provided to your Vue component:
props: {
result: {
type: Object,
required: true
},
options: {
type: Object,
required: true
},
contextMenuActions: {
type: Array,
required: true
},
cardActions: {
type: Object,
required: true
}
}
searchFilter
A searchFilter
registers a Vue component as filter for the search UI.
These are the props
which are provided to your Vue component:
props: {
filter: {
type: Object,
default: () => {}
}
},
A full example can be seen here
liDocumentListCardExtension
A liDocumentListCardExtension
registers a Vue component that can be configured to be displayed on liDocumentListCard
dashboard cards.
here
These are the props
which are provided to your Vue component:
props: {
options: {
type: Object
}
},
The options
object looks like this:
{
column: '', // either empty (when in search column) or 'inbox', 'published', 'inline-list-edit`
listId: 1,
documentId: 2
}
Valid inject
:
authedHttp
tableDashboardCell
Added in:release-2022-03
A tableDashboardCell
registers a Vue component that can be configured to be displayed in a tableDashboard
column.
These are the props
which are provided to your Vue component:
props: {
// Instance of the Document model
document: {
type: Object,
required: true
},
// Custom options provided through `componentOptions` in the dashboard config
options: {
type: Object,
required: true
}
}