...
| Code Block | ||||
|---|---|---|---|---|
| ||||
<template>
<div >
<header>
<a @click="callAkiomaCode('$ akioma.testvueTemplates.stamm.OpenVersicherterLaunchDetailsWindow(eventSource); ')"><h3>{{fullName}}</h3></a>
</header>
</div>
</template>
<script>
import mixinAkioma from '@/mixins/mixinGlobalAkiomaglobal-akioma';
export default {
mixins: [ mixinAkioma ],
props: {
dataSource:{
type: Object
},
datasourceNamespace: {
type: Object
},
currentRecord: {
type: Object
},
controller: {
type:Object
}
},
computed: {
fullName(){
if(this.currentRecord.stamm_nr_nachname || this.currentRecord.vorname)
return `${this.currentRecord.stamm_nr_nachname} ${this.currentRecord.vorname}`;
else
return '';
},
isIconEnabled(){
if(this.currentRecord && this.currentRecord.brs_versicherten_name)
return this.currentRecord.brs_versicherten_name.includes('Terence');
return false;
},
isCustomStateEnabledIcon(){
if(this.isIconEnabled) {
const customState = this.getCustomState('icon-display');
if(customState)
return true;
}
return false;
}
},
methods: {
openConditional (eventSource) {
if(this.isCustomStateEnabledIcon) {
this.callAkiomaCode('$ akioma.vueTemplates.LaunchDetailsWindow(eventSource); ');
}
}
}
}
</script> |
In a Custom Vue Component, the developer can implement computed properties, can define new methods, can add watchers and use data component state.
...
Build script that needs to be used from custom ClientLogic repository to rebuild the Template files:
| Code Block |
|---|
npm run build:vue |
Watch script for vue template files:
| Code Block |
|---|
npm run watch:vue |
This will compile the Vue single component files and can be used in a htmlContainer as the Template attribute.
...
List of default available Vue Mixins:
| Vue Mixins |
|---|
| @/mixins/mixinGlobalAkioma |
(see example above, where callAkiomaCode is used to call the method defined in akioma.test.stamm.OpenVersicherter)
...