Template

Template file

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

(function (internalName) {
    var internalID = internalName;
    return {
        name: internalID,
        component: Vue.component(internalID, {
            props: [],
            data:, 
            mounted() {},
            activated() {},
            deactivated() {},
            methods: {},
            computed: {},
            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:

<span> {{$t('Contract loading')}}</span>

Example HTML template

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

Global Storage

Global storage contains the most important informations about OTRS and current CustomerPanel instance.

You can refer to its values by the keyword this.$store  and retrieve properties with  getters . Example of useful values:

[
	"account/getSessionId": "lkDT71THevxijoiKprX9LoHmehkoWu4emCa",
	"globalConfig/BACKEND_VERSION": "1.2.54",
	"globalConfig/FRONTEND_VERSION": "1.1.40",
	"globalConfig/OTRS_DEFAULT_LANG": "en",
	"globalConfig/OTRS_FQDN": "http://helpdesk.int.intalio.pl",
	"globalConfig/OTRS_ScriptAlias": "/otrs/",
	"globalConfig/OTRS_URL": "http://helpdesk.int.intalio.pl/otrs/",
]

These are very useful while working on your widgets. They allow you to connect to OTRS API .

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
     }
  })
}