htmlContainer

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.

Sample Vue Component (custom template)

<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:

Importer for Vue components

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

Page tree

htmlContainer