App is not opening all the time on place holder "ticket_top_navigation"

App Platform
, , , ,
#1

I have added my custom react app in the ticket_top_navigation placholder location. Its not opening the app all the time. Its opening sometimes without any issue and sometimes it not at all working.

Implemented code,

const showApp = () => {
    setLoading(false);
    client?.interface.trigger('showModal', {
      title: 'Customer Details',
      template: 'index.html',
    });
  };

app
        ?.initialized()
        .then(client => {
          client.events.on('app.activated', () => {
            // setLocalClient(client);
            showApp();
          });
          client.instance.context().then(function (data) {
            let location = data.location;
            if (location === 'ticket_top_navigation') {
              setChild(
                <div />
              );
            }
            if (location === 'modal') {
              setChild(<div />);
            }
          });
        })
#3

Hi @Bharath_Prakash ,

Good day!

  1. Are you getting any error on console when clicking on the app icon (while running in local)?
  2. Where are you doing client.events.on(‘app.activated’) trigger? Is it inside of useEffect hook?
  3. Are you setting your modal component in setChild properly?

Could you please help us with more information on this to reproduce on our end.

Thanks

1 Like
#4

Yes @mariappan
Let me add full code

const showApp = () => {
    setLoading(false);
    client?.interface.trigger('showModal', {
      title: 'Customer Details',
      template: 'index.html',
    });
  };

useEffect(() => {
    if (loading)
      app
        ?.initialized()
        .then(client => {
          // setLocalClient(client);
          client.events.on('app.activated', () => {
            setLocalClient(client);
            showApp();
          });
          client.instance.context().then(function (data) {
            let location = data.location;
            if (location === 'ticket_top_navigation') {
              setChild(
                <Content
                   data={customerData}
                />
              );
            }
            if (location === 'modal') {
              setChild(
                <Content
                  data={customerData}
                />
              );
            }
          });
        })
        .catch(err => {
          setError(`App initialize error: ${err}`);
        });
  }, [loading]);

Yes am getting on error, But not all the times.

Error

Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
    at HTMLElement.handleUnpreparedAnnotatable (freshconnect-sidebar-core.js:5156:73)
    at HTMLDocument.i (vendor-15bc7b68eeede9c65c70350556532654d64708b47eef826c55b8f24cfdd9903e.js:16362:52)
handleUnpreparedAnnotatable @ freshconnect-sidebar-core.js:5156
i @ vendor-15bc7b68eeede9c65c70350556532654d64708b47eef826c55b8f24cfdd9903e.js:16362
#5

@mariappan

Sometime am getting this error while click on more menu on ticket screen

1. Uncaught TypeError: Cannot read properties of null (reading 'requesterId')
2. Uncaught TypeError: Cannot read properties of null (reading 'hasMany')

Note: I have 3 custom apps in ticket_top_navigation

#6

Hi @Bharath_Prakash

I was able to replicate the above quoted error. It doesn’t seem to reach the app.activated handler when called inside of useEffect & the behaviour seem to be sporadic. Thus checking with the team, will keep you posted on this.

#7

Thanks @mariappan
Please let me know the update and solution for that issue.

#8

Hello @mariappan
Please let me know if there is any update on this issue?

Thanks