React Example for Multiple location Apps & Modals

Hey Folks,

Hope you all doing great!

We are building an SDK app in Freshdesk using React. The boilerplate created using FDK will work for a single location app out of the box.

How do we use React with multiple location apps? Also for modal windows.

From my point of view, we should define a custom webpack config that compiles the files to respective directories and we should point the files from that directory in manifest.json.

If my above understanding is wrong, please correct me and help me find the best solution.

2 Likes

Hey @arshath.h,

The FDK React app, by default can work on multiple app locations, you need not create a custom Webpack config for this.

The below thread has the solution you are looking for with a code snippet, kindly take a look at it and let us know if it helps or If we could help you any other way?

Here is also an unofficial documentation for react fdk integration that could help you Introduction | FDK Single Page App Integrations
P.S official documentation is on the way!

Hope this helps!

Stay Safe :slight_smile:

3 Likes

@velmurugan

This works if the app has only one modal. What if the app has multiple modals?

For example, the app is rendered on Full Page & Sidebar locations and each location has 2 modals, in this scenario how do we render the content for the multiple modals?

@arshath.h

that is a good question, you can use the instance method in combination with the interface method to achieve this, here is an example

HelloUser.js

import React, { useState } from 'react'
import PropTypes from 'prop-types'
import reactLogo from '../assets/logo.svg';
import icon from '../assets/icon.svg'

const HelloUser = ({client}) => {
  const [name, setName] = useState('')

  client.data.get('contact').then((data) => {
    setName(data.contact.name)
  })

  const OpenModalOne = () => {
    client.interface.trigger("showModal", {
      title: "Information Form",
      template: "index.html",
      data: {modalID: 'ModalOne'}
    });
  }

  const OpenModalTwo = () => {
    client.interface.trigger("showModal", {
      title: "Information Form",
      template: "index.html",
      data: {modalID: 'ModalTwo'}
    });
  
  }


  return (
    <div>
      <img src={icon} className="App-logo" alt="logo" />
      <img src={reactLogo} className="App-logo" alt="logo" />
      <h3>Hi {name},</h3>
      <button onClick={OpenModalOne}>Open Modal One</button>
      <button onClick={OpenModalTwo}>Open Modal Two</button>
    </div>
  )
}

HelloUser.propTypes = {
  client: PropTypes.object
}
export default HelloUser

App.js

import React, { useState, useEffect } from 'react';
import './App.css';
import HelloUser from './components/HelloUser';
import ModalOne from './components/ModalOne';
import ModalTwo from './components/ModalTwo';


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 = false;
    document.head.appendChild(script);
  }, []);

  useEffect(() => {
    if (!loaded) return
    app.initialized().then((client) => {
      client.instance.context().then(function (data) {
        let location = data.location;
        let InstanceData = data.data
        let ModalID = '';

        if (InstanceData && InstanceData.hasOwnProperty('modalID')){
          ModalID = InstanceData.modalID
        }

        if (location === "ticket_sidebar") {
          setChild(<HelloUser client={client} />);
        }
        if (location === "modal" && ModalID === 'ModalOne') {
          setChild(<ModalOne client={client} />);
        }
        if (location === "modal" && ModalID === 'ModalTwo') {
          setChild(<ModalTwo client={client} />);
        }
      });
    });

  }, [loaded])


  return (
    <div>
      {child}
    </div>
  )
}

export default App;

Output

I’ve also attached the app from the above screenshot as a zip file for your reference,

new-react.zip (179.9 KB)

Hope this helps!

3 Likes

I have tried in freshservice this but not working for me.
I have later noticed the correct location name is overlay passing when try to open a model.

				if (location === "overlay" && ModalID === 'ModalOne') {
          console.log("ModalOne")
          setChild(<ModalOne client={client} />);
        }
        if (location === "overlay" && ModalID === 'ModalTwo') {
          console.log("ModalTwo")
          setChild(<ModalTwo client={client} />);
        }

above code worked for me. not sure is it a bug or a new implementation

2 Likes