Template

Template file

Template file is the backbone of the whole widget. It is built on the simple JavaScript function building individual VueInstance which is indivudually created for every user and saved to the database.

It is required to keep syntax excatly like this below for they system to properly work.

(function (internalName) {
    var internalID = internalName;
    return {
        name: internalID,
        // size: 'xs12 md12',
        component: Vue.component(internalID, {
            props: [],
            data:
                function () {
                    return {
                        moduleName: internalID,
                        contract_info: null,
                        contractLoading: true
                    }
                }, 
            mounted() {
                console.log("WIDGETTICKET_Contract loaded!")
                this.getContractInfo();

            },
            activated() {
                console.log("Module Y activated")
            },
            deactivated() {
                console.log("Module Y deactivated")
                // this.$destroy();
            },
            methods: {
                initialize() {

                },
                getContractInfo() {
                    axios.get(this.$store.getters["globalConfig/OTRS_URL"] + `customer.pl?Action=ContractWidget;Subaction=GetContractInfo;Tn=${this.$route.params.ticketNumber}`).then((response) => {
                        if (response.data.success === false) {
                            this.contract_info = null
                            this.contractLoading = false
                        } else {
                            this.contract_info = response.data.information
                            this.contractLoading = false
n                        }
                    })
                }
            },
            computed: {
                widgetTitle() {
                    return this.$t('Service information')
                },
                accountedTime() {
                    return this.contract_info["Remaining time"].accounted_time
                },
                subscriptionHoursAmount() {
                    return this.contract_info["Remaining time"].subscription_hours_amount
                },
                leftTime() {
                    return this.contract_info["Remaining time"].left_time
                },
                
                exceeded_text() {
                    let text = this.$t("left");
                    let color = "green"
                    if (this.contract_info["Remaining time"].exceeded) {
                        text = this.$t("exceeded")
                        color = "red"
                    }
                    return {text, color}
                },

                priorityKeys: function() {
                  var contract_information = this.contract_info

                   let keysSorted = Object.keys(contract_information).sort(function(a,b){
                    return contract_information[b]['priority']-contract_information[a]['priority']})
                   
                   return keysSorted
                }


            },
            // language=HTML
            template: `
            `
        }),
    }

}("CustomModuleName_DynamicID"));

Language support

To use predefined language strings, depending on the user's default language settings you can simply reference them in the template file like this:

 widgetTitle() {
     return this.$t('Widget name')
}

 or directly in the HTML template:

<v-flex xs12 md12>
                    <material-card
                            color="primary"
                            :title="widgetTitle"
                            style="margin-top:0px">
                        <v-list two-line v-if="contract_info !== null">
                            <v-list-tile v-for="key in priorityKeys">
                                <v-list-tile-content>
                                    <v-list-tile-title>
                                        <span v-if="contract_info[key].accounted_time">

                                            {{accountedTime}}{{$t('h')}}/{{subscriptionHoursAmount}}{{$t('h')}}

                                            <span :style="{color:exceeded_text.color, fontWeight:'bold'}">({{exceeded_text.text}} {{leftTime}} {{$t('h')}})</span>
                                        </span>
                                        <span v-else>{{contract_info[key].value}}</span>
                                    </v-list-tile-title>
                                    <v-list-tile-sub-title>
                                        {{$t(key)}}
                                    </v-list-tile-sub-title>
                                </v-list-tile-content>
                            </v-list-tile>
                        </v-list>
                        <div v-else-if="contractLoading == true" style="align-items: center">
                            <span> {{$t('Contract loading...'loading')}}</span>

Example HTML template:

                </divv-flex xs12 md12 d-flex>
                    <div v-elsematerial-card
                            style="margin-top:0px"
                            color="primary"
                            :title="widgetTitle">
                        <v-layout class="text-align:xs-center">
                            <spanv-flex xs12>
                                <v-rating
                                        v-model="rate"
                                        v-on:input="setMyRate"
                                        :style=length="{fontWeight:5"
                                        'bold'}:half-increments="false"
                                        hover
                                ></v-rating>
                                <v-card color="success" dark v-if="rate>0"><b>{{$t('NoYour service assigned'rate')}}: {{rate}}</b></v-card>
                                <v-card color="error" v-else>{{$t("You haven't rated this idea yet")}}</spanv-card>
                            </divv-flex>
                        </v-layout>
                    </material-card>
                </v-flex>