Page History

Image Added

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

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

Note: Use kebab-case in "Template" attribute for defining the name of the Component/Template to be used. It is a best practice instead, PascalCase will be converted to kebab-case automatically for the Vue component name.

Vue Components(Templates) can be defined externally, from the custom ClientLogic repository and can be used to build custom Vue Components that . After implementing and building the Vue components, they can be used as Template attribute valuesTemplates by seting up the Template attribute with the name of the component.

eg. "contact-template".

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

The template can also be adjusted as a normal Vue template based on your needs.

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

...

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

npm run build:vue

Watch script for vue template files:

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:

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

List of default available Vue Templates: