How to use oracle Data Adapter with react
Posted: Fri Sep 30, 2022 9:31 am
Hello,
I have a webservice with asp net core where I created the data adapter like in the example showed in this link https://github.com/stimulsoft/Samples-J ... 0Databases.
This works if I create a page inside the asp net core project with the following code:
The problem is that I have an external app with electron + react and I want to connect the data adapter there, I've tried the following code:
With this code I get the following error when trying to connect:
https://imgur.com/a/lrvSNzY
How can I add a data adapter with react js?
I have a webservice with asp net core where I created the data adapter like in the example showed in this link https://github.com/stimulsoft/Samples-J ... 0Databases.
This works if I create a page inside the asp net core project with the following code:
Code: Select all
@page
@model Example.Pages.IndexModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="favicon.ico" />
<title>Stimulsoft Reports.JS - ASP.NET Demo</title>
<!-- Stimusloft Reports.JS -->
<script src="Scripts/stimulsoft.reports.js" type="text/javascript"></script>
<script src="Scripts/stimulsoft.viewer.js" type="text/javascript"></script>
<script src="Scripts/stimulsoft.designer.js" type="text/javascript"></script>
<script src="Scripts/stimulsoft.blockly.editor.js" type="text/javascript"></script>
</head>
<body onload="onLoad()">
<script type="text/javascript">
function onLoad() {
StiOptions.WebServer.encryptData = false;
StiOptions.WebServer.url = "/DataAdapters";
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
var designer = new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false);
designer.renderHtml("content");
designer.report = new Stimulsoft.Report.StiReport();
}
</script>
<div id="content"></div>
</body>
</html>
Code: Select all
import React, { useEffect } from "react";
import useStateRef from "../../utils/Hooks/use-state-ref/useStateRef";
import { StiOptions } from "stimulsoft-reports-js/Scripts/stimulsoft.designer";
interface IPropsReportViewer {
report: string;
}
interface IPropsReportDesigner {
report?: string;
}
export function ReportDesigner(props: IPropsReportDesigner) {
let Stimulsoft: any;
const win: any = window;
const [designer, setDesigner, designerRef] = useStateRef(null);
useEffect(() => {
Stimulsoft = win.Stimulsoft;
StiOptions.WebServer.encryptData = false;
StiOptions.WebServer.url = "https://192.168.0.1:44366/DataAdapters";
var report = Stimulsoft.Report.StiReport.createNewReport();
var options = new Stimulsoft.Designer.StiDesignerOptions();
options.appearance.fullScreenMode = true;
setDesigner(
new Stimulsoft.Designer.StiDesigner(options, "StiDesigner", false)
);
designerRef.current.report = report;
designerRef.current.renderHtml("designerContent");
}, []);
return <div id="designerContent"></div>;
}
https://imgur.com/a/lrvSNzY
How can I add a data adapter with react js?