How do I open different reports in the Vue viewer?

[Tadej Dombrowski]

Hi

I added StimulsoftViewer to my Vue 3 app, and it works with one report. How can I switch between several reports, for example when the user selects one from a list?
Thanks!

[Lech Kulikowski]

Hello,

Pass the report name through the properties prop. The server reads it in the GetReport action and loads the matching template. The sample controller does this:

Code: Select all

var json = Encoding.UTF8.GetString(Convert.FromBase64String(Request.Form["properties"]));
var reportName = JObject.Parse(json)["reportName"]?.ToString();

var report = StiReport.CreateNewReport();
report.Load(StiVueHelper.MapPath(this, $"Reports/{reportName}"));
return StiVueViewer.GetReportResult(this, report);

On the client, change the prop when the user selects another report:

Code: Select all

<script setup lang="ts">
import { ref } from 'vue';
import { StimulsoftViewer } from 'stimulsoft-viewer-vue';

const properties = ref({ reportName: 'MasterDetail.mrt' });
</script>

<template>
  <select @change="properties = { reportName: $event.target.value }">
    <option>MasterDetail.mrt</option>
    <option>Variables.mrt</option>
  </select>

  <StimulsoftViewer request-url="/Viewer/{action}" action="InitViewer"
                    :properties="properties" height="100vh" />
</template>

Replace the whole properties object (don't change a field inside it). The viewer reloads when the reference changes.

Also, you can find more samples here:
https://www.stimulsoft.com/en/samples/reports-vue/net60

Thank you.