Page History

Image Added

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

The "Template" attribute is required in order to have the htmlContainer use it for displaying display the corresponding Vue template.eg. "contact-template"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 and can be used to build custom VueComponents 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: {
       mounted fullName(){
  {          console.log(this.$props);if(this.currentRecord.stamm_nr_nachname || this.currentRecord.vorname)
                return `${this.currentRecord.stamm_nr_nachname} ${this.currentRecord.vorname}`;
            else
            },    return computed:'';
{        },
fullName		isIconEnabled(){
            if(this.currentRecord.stamm_nr_nachname || && this.currentRecord.vornamebrs_versicherten_name)
                return `${this.currentRecord.stammbrs_nr_nachname} ${this.currentRecord.vorname}`;
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) {
 else
           if(this.isCustomStateEnabledIcon) {
               return 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:

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 can needs to be used from custom ClientLogic repository to rebuild the Template files:

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