Sample code for using react in custom installation page

There’s a way to use React to build a custom instalation page? I did not found informations about this in documentation.

2 Likes

@Matheus_Nunes,
Yeah it is possible as like in the app rendering,
you can use assets folder inside config to store your .js and .css and include it in the iparams.html,

Hope it helps :slight_smile:
kindly let us know if you need any example for this

Thanks

2 Likes

Can someone create a sample app for the same?

3 Likes

This is something that is possible to have as a learning resource.

Thanks for pointing this out, we now know this could be of help.

Converting this as a feedback item so that it could be tracked and be closed when the resource is made live.

3 Likes

Do we have a sample yet?
Is it possible to use Vue single page app in custom installation page?

1 Like

Hey All,

Apologies for the delay,

The VUE and the REACT support we introduced natively in the FDK does not support the use of the same framework in the custom installation page,

Although there are a couple of workarounds we can do to support this, please allow us some time, so we can try out all the approaches and come up with a sample app of the best approach.

Stay Safe :slight_smile:

Any updates regarding this?

Hi @samuelpares
Did you manage to solve it for Vue? Am on the hunt for something similar for react.

I didn’t. @velmurugan said they would look for a workaround, but I heard nothing until now.

Fair enough. Did spend yesterday morning trying to create a React config app for it, only bad results. :smiley:

Hey @Saif, could you check please if there is some progress in this topic?
@velmurugan was going to provide us some way to use react in custom installation page, but we didn’t hear from him anymore.

As some apps demands a lot of configuration, being able to use react would be very helpful.

2 Likes

Ok, So I tried to make it work with CDN, and this is what I could accomplish:

<!DOCTYPE html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script
      src="https://unpkg.com/react@18/umd/react.development.js"
      crossorigin
    ></script>
    <script
      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
      crossorigin
    ></script>
    <script src="{{{appclient}}}"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      type="module"
      src="https://unpkg.com/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/@freshworks/crayons@v4/dist/crayons/crayons.js"
    ></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function FreshdeskAuth({ client, done }) {
        const { useRef } = React;

        const initialValues = {
          domain: "",
          apiKey: "",
        };
        const formRef = useRef(null);

        const onFormValidate = async (values) => {
          let result = {};
          if (!values.domain) result.domain = "Domain is required";
          if (!values.apiKey) result.apiKey = "API key is required";
          return result;
        };

        const onFormSubmit = async (e) => {
          const { values, isValid, errors } = await formRef.current.doSubmit(e);

          // const validation = await onFormValidate(values);
          // if (Object.keys(validation).length) {
          //   await formRef.current.setFieldErrors(validation);
          //   return;
          // }

          window.iparams.auth = {
            domain: values.domain,
            apiKey: values.apiKey,
          };
          done();
        };

        return (
          <div>
            <fw-form
              ref={formRef}
              initialValues={initialValues}
              validate={onFormValidate}
            >
              <fw-form-control
                type="TEXT"
                name="domain"
                required
                label="Domain"
                id="domain"
              >
                <div slot="input-prefix" style={{ color: "grey" }}>
                  https://
                </div>
                <div slot="input-suffix" style={{ color: "grey" }}>
                  .freshdesk.com
                </div>
              </fw-form-control>
              <fw-form-control
                type="TEXT"
                name="apiKey"
                required
                label="API Key"
                id="apiKey"
              ></fw-form-control>
            </fw-form>
            <fw-button onClick={onFormSubmit}>Submit</fw-button>
          </div>
        );
      }

      const TestPage = () => {
        return <p>teste page</p>;
      };

      const App = () => {
        const { useState, useEffect } = React;

        const [loaded, setLoaded] = useState(false);
        const [page, setPage] = useState(<h3>App is loading</h3>);

        useEffect(() => {
          const script = document.createElement("script");
          script.src = "{{{appclient}}}";
          script.addEventListener("load", () => setLoaded(true));
          script.defer = true;
          document.head.appendChild(script);
        }, []);

        useEffect(() => {
          if (!loaded) return;
          app.initialized().then((client) => {
            setPage(<FreshdeskAuth client={client} done={done} />);
          });
        }, [loaded]);

        const done = () => {
          setPage(<TestPage />);
        };

        return <div>{page}</div>;
      };

      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
    <script>
      window.iparams = {
        auth: null,
      };

      function postConfigs() {
        return window.iparams;
      }

      function validate() {
        console.log(window.iparams);
        return true;
      }
      function getConfigs(configs) {
        console.log(configs);
      }
    </script>
  </body>
</html>

I packed the app and installed on my test account and it worked.
Perhaps someone can help from now:

  • I tried to create each component in a file, but could not make it work. Is it possible?
  • The validate in crayons form is not working, it’s not being called on submit. I had to make validation on the submit event. What’s wrong?
    • Would be possible to use yup via cdn? I tried and could not make it work.
2 Likes

Hey guys!
I managed to solve the separation of components in files.
I uploaded the code to github, any feedback if it’s a good approach is welcomed.

2 Likes

Great work Samuel! A true hero to the community by sharing source code :slight_smile:

1 Like