htmlContainer

The htmlContainer is a form field control that can be used for setting up custom Vue component as a interactive html template.

The "Template" attribute is required in order to have the htmlContainer display the corresponding Vue Component.

eg. "contact-template".

Vue Components(Templates) can be defined externally, from the ClientLogic repository and can be used to build custom Vue Components 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
        }
    },
    computed: {
        fullName(){
            if(this.currentRecord.stamm_nr_nachname || this.currentRecord.vorname)
                return `${this.currentRecord.stamm_nr_nachname} ${this.currentRecord.vorname}`;
            else
                return '';
        }
    }
}
</script>

In a Custom Vue Component, the developer can implement computed properties, can define new methods, can create 

Vue components will be exported inside the custom index.js file:

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

The path for the index.js file is specified in the ClientLogic repository package.json file as a ENV variable, VUE_APP_TEMPLATE_PATH

eg: 

    "build:vue": "cross-env VUE_APP_TEMPLATE_PATH=../../../../../custom-webui/Template/index npm run build --prefix ../../Akioma/swat-webui/vue",

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

npm run build: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.

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