...
The htmlContainer is a form field control that can be used for setting up custom Vue component as a an interactive html template.
...
Note: Use kebab-case in "Template" attribute names as for defining the name of the Component/Template to be used. It is a best practice instead of PascalCase. , PascalCase will be converted to kebab-case automatically for the Vue component name.
...
| 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 create 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.
...
In the custom Vue component the developer can use the akioma vue mixin for helper methods. callAkiomaCode is available in this mixin and can be applied on different events(click, mouseenter...) and using the vue events in templates.
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)
List of default available Vue Templates:
...