htmlContainer

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

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

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. After implementing and building the Vue components, they can be used as Templates by seting up the Template attribute with the name of the component.

eg. "contact-template".

Sample Vue Component (custom template)

<template>
    <div >
        <header>
            <a @click="callAkiomaCode('$ akioma.vueTemplates.LaunchDetailsWindow(eventSource); ')"><h3>{{fullName}}</h3></a>
        </header>
    </div>
</template>


<script>

import mixinAkioma from '@/mixins/global-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:

Importer for Vue components

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:

package.json

    "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

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:

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:

Vue Templates
contact-template

Page tree

htmlContainer