Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

How to localize pivottable in a vue project

Answered
shuwei asked on September 25, 2020

we ‘ve tried to use the flexmonster plugin in  a vue project.
we could not localize in pivottable.

<template>
<div>
<h3 class="page-title">Simple Usage Example</h3>
<Pivot
ref="pivottable"
toolbar
:localization = "localization"
_v-bind:licenseKey="'Z7NI-XCEA02-6O6M67-2R1F4K'"
:beforetoolbarcreated="customizeToolbar"
:globle="ggloble"
></Pivot>
</div>
</template>
...
data(){
return{
localization: '@/assets/localizition/zh.json',
ggloble:{
localization: '@/assets/localizition/zh.json',
},
....
Thanks!
 

1 answer

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster September 28, 2020

Hello,
 
Thank you for reaching out to us.
 
Please note that for a particular report, the localization property needs to be specified within the corresponding report object. Here is an example:

<template>
  <div>
    <Pivot
      ref="pivottable"
      v-bind:report="report"
    ></Pivot>
  </div>
</template>

...

data: function () {
  return {
    report: {
      "dataSource": {
        ...
      },
      "localization": "URL to the localization file"
    }
  }
}

 
To preset localization for all reports, set the localization property in the global object. Here is an example:

<template>
  <div>
    <Pivot
      ref="pivottable"
      v-bind:global="global"
    ></Pivot>
  </div>
</template>

...

data: function () {
  return {
    global: {
      "localization": "URL to the localization file"
    }
  }
}

 
Also, we want to draw your attention to the fact that Vue does not upload additional files of the project to the server (including localization JSON files). It means the local path can not be used in this case.
Instead, we suggest initializing the property with an inline JSON object taken from an appropriate localization file:

data: function () {
  return {
    global: {
      "localization": {
        "fieldsList": {
          "flatHierarchyBox": "选择和重排列",
          "hierarchyBox": "拖拽大小",
          "filterBox": "删除并重排报表筛选",
          ...
        }
      }
    }
  }
}

 
Another approach is to use our CDN as a localization provider:

data: function () {
  return {
    global: {
      "localization": "<https://cdn.flexmonster.com/loc/zh.json>"
    }
  }
}

 
More information about localizing Flexmonster can be found in our documentation.
 
Please let us know if it works for you.
Do not hesitate to contact us in case further questions arise.
 
Kind regards,
Illia

Please login or Register to Submit Answer