Globalizing Dashboard
Our sample projects and report templates can help you learn the basics of working with our products.A dashboard can be globalized at run time — switching a language reloads the localization file and sets the report's culture.
In React.
How it works. Choosing a language reloads the localization and re-cultures the report, so the whole dashboard adapts to the locale.
In React.
import { Viewer, Stimulsoft } from "stimulsoft-dashboards-js-react/viewer";
function App() {
const [report, setReport] = React.useState<Stimulsoft.Report.StiReport>();
function update(culture: string) {
Stimulsoft.Base.Localization.StiLocalization.setLocalizationFile("Localizations/" + culture.substring(0, 2) + ".xml");
var r = new Stimulsoft.Report.StiReport();
r.loadFile("Dashboards/Globalization.mrt");
r.culture = culture;
setReport(r);
}
React.useEffect(() => update("en-US"), []);
return (
<>
<select onChange={e => update(e.target.value)}>
<option value="en-US">English</option>
<option value="de-DE">Deutsch</option>
</select>
<Viewer report={report} />
</>
);
}StiLocalization.setLocalizationFile(path)— load the UI language for the chosen culture.report.culture— set the data/format culture so numbers and dates format correctly.
How it works. Choosing a language reloads the localization and re-cultures the report, so the whole dashboard adapts to the locale.