Skip to content

fix(jv-tools): update docs to show the new usage of 'useVisualize' hook. #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ecanchev-jaspersoft wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(jv-tools): update docs to show the new usage of 'useVisualize' hook. #27

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 15 additions & 29 deletions pages/tools/loading-vizjs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ type Authentication = {
```

### Sample of authentication in React application
In the following sample we will use the `useEffect` hook to load Visualize.js, authenticate with the JasperReports Server and store `VisualizeClient` instance in `vContainer` as `v` property:
In the following sample we will use the `useVisualize` custom hook to load Visualize.js, authenticate with the JasperReports Server and store `VisualizeClient` instance in `vContainer` as `v` property:
```typescript
const myAuth: Authentication = {
name: "joeuser",
Expand All @@ -51,36 +51,22 @@ In the following sample we will use the `useEffect` hook to load Visualize.js, a
locale: "en_US"
};

const [vContainer, setVContainer] = useState(
null as { v: VisualizeClient } | null,
);
const errorCallback = (errorCaught: Error | VisualizeGenericError | string) => {
console.log("check the error! ", errorCaught);
};

const vContainer = useVisualize(
{
server: "<JRS SERVER URL>",
visualizePath: "<URL TO VISUALIZE.JS>",
auth: myAuth,
},
{ errorCallback },
);

useEffect(() => {
const loadVisualize = visualizejsLoader(visualizeUrl);
console.log("Loading Visualize.js...");
loadVisualize()
.then((visualizeFactory: VisualizeFactory) => {
// Connecting to JRS.
console.log("Visualize.js loaded. Connecting to JasperReports Server...");
visualizeFactory(
{
auth: myAuth
},
(v: VisualizeClient) => {
console.log("Visualize client connected.");
setVContainer({ v });
},
(e: any) => {
console.log("Error connecting to JasperReports Server.");
console.log(String(e));
},
);
})
.catch((error: Error) => {
console.log("Error loading visualize.js: ", error);
});
}, []);
```
_Note_: for more info about the properties allowed in the useVisualize hook, refer to this
[section]({{site.baseurl}}/pages/tools/tools-breaking-changes#sample-values-for)

And now we will render input controls using `VisualizeClient` instance and `renderInputControls` function:
```typescript
Expand Down