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.


<template>
    <div >
        <header>
            <a @click="callAkiomaCode('$ akioma.test.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:

export { default as ContactTemplate } from './ContactTemplate';


Build script that can be used from custom ClientLogic repository to rebuild the Template files:

npm run build:templates


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.

(see example above, where callAkiomaCode is used to call the method defined in akioma.test.stamm.OpenVersicherter)