The htmlContainer is a form field control that can be used for setting up custom Vue component as a template for the control.
The "Template" attribute is required in order to have the htmlContainer use it for displaying the Vue template.
eg. "contact-template".
Vue Components(Templates) can be defined externally from the ClientLogic repository and can be used to build custom VueComponents that can be used as Template attribute values.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<template>
<div >
<header>
<a @click="callAkiomaCode('$ akioma.osiv.stamm.OpenVersicherter(eventSource); ')"><h3>{{fullName}}</h3></a>
</header>
</div>
</template>
<script>
import mixinAkioma from '@/mixins/mixinGlobalAkioma';
export default {
mixins: [ mixinAkioma ],
props: {
dataSource:{
type: Object
},
datasourceNamespace: {
type: Object
},
currentRecord: {
type: Object
},
controller: {
type:Object
}
},
mounted() {
console.log(this.$props);
},
computed: {
fullName(){
if(this.currentRecord.stamm_nr_nachname || this.currentRecord.vorname)
return `${this.currentRecord.stamm_nr_nachname} ${this.currentRecord.vorname}`;
else
return '';
}
}
}
</script> |
Vue components will be exported inside the custom index.js file:
| Code Block | ||||
|---|---|---|---|---|
| ||||
export { default as ContactTemplate } from './ContactTemplate'; |
Build script that can be used from custom ClientLogic repository to rebuild the Template files:
| Code Block |
|---|
npm run build:templates |