In the new simple react template, can I use a react component as a modal template?
like this:
client.interface.trigger("showModal", {
title: "Sample Modal",
template: reactComponent
})
In the new simple react template, can I use a react component as a modal template?
like this:
client.interface.trigger("showModal", {
title: "Sample Modal",
template: reactComponent
})
Hey @Matheus_Nunes,
Yes, you can use a react component as a template, but you cannot refer the component name as a template as the template would require a .html
instead you can use the instance API like shown below
in that case the template will be index.html
since it’s a Single Page app, the component is rendered dynamically based on the location
For eg
App.js will be
import React, { useState, useEffect } from "react";
import "./App.css";
import HelloUser from "./components/HelloUser";
import Modal from "./components/Modal";
const App = () => {
const [loaded, setLoaded] = useState(false);
const [child, setChild] = useState(<h3>App is loading</h3>);
useEffect(() => {
const script = document.createElement("script");
script.src = "https://static.freshdev.io/fdk/2.0/assets/fresh_client.js";
script.addEventListener("load", () => setLoaded(true));
script.defer = true;
document.head.appendChild(script);
}, []);
useEffect(() => {
if (!loaded) return;
app.initialized().then((client) => {
client.instance.context().then(function (data) {
let location = data.location;
if (location === "ticket_sidebar") {
setChild(<HelloUser client={client} />);
}
if (location === "modal") {
setChild(<Modal client={client} />);
}
});
});
}, [loaded]);
return <div>{child}</div>;
};
export default App;
Note:- the above sinppet is long, please use the scroll bar inside the snippet to view the full snippet
and your client.interface.trigger will be
client.interface.trigger("showModal", {
title: "Sample Modal",
template: "index.html"
})
Let us know if you need anymore help/guidance on this.
Hope this helps!
Stay Safe
Nice, that worked.
Thank you.
I had a problem using this solution, sometimes the function app.initialized() do not reach the resolve and the modal window stay showing the element used to initialize the child. This happens randomly, sometimes the modal is loaded normally.
Hey @Matheus_Nunes,
Could you please share a screen grab of this issue?, so we could investigate this further?
Hi
After testing a few things I thought of a guess as to what was causing the error that I mentioned in the previous comment.
In fact the problem was not in the return of the app.initialized function, putting a log inside the function that executes the setLoaded when the fresh_client script is loaded I saw that it is not executed sometimes, disabling the cache I noticed that the problem does not occur, so I assumed the problem was that when the browser sees that the script has already been loaded in the app view in the sidebar, he doesn’t load it again and the loaded state is not updated in the sidebar view. So I removed the addition of the script in useEffect, downloaded the script into the project and included it at the beginning of the App component. So I didn’t have the problem anymore. I don’t know if my guess is correct.
I couldn’t exemplify the occurrence of the problem in screen images.
Thanks for your attention.
Hi Matheus, Can you share where you moved it and when you mean download it and save to project?