Front Sidebar Followup

💬 App Building
1

I want to build a Front(frontapp.com) sidebar in retool. It sounds like you need to use the Front SDK to gain the context of what record the user is currently on.

I don't have a software/webpage stack available to me that I can use the embed method if I'm understanding it correctly. First of all, I just want to confirm that you would need your own website/domain that then you would embed the retool app in. Is that correct?

Second I wanted to ask. Is there is another way to do this now, including a custom component in react?

1 Like
2

Hey @mslade! Thanks for reaching out.

I think custom components could be exactly what you need in order to successfully integrate the Front SDK into Retool! I'm interested in giving it a shot, at least. :+1:

In your vision for this, do you see this sidebar being public or personalized, requiring users to log in to Retool?

3

Hi @Darren . Users would need to log in to retool.

I was able to create a component, but I think retool is still sandboxing the call to the Front hook.

This works on my local machine inside front.
If I do the same thing inside of a retool component it hits the Front.contextUpdates.subscribe, but never gets into the handler. If I debug and step into , it immediately hits a retool script.

import logo from './logo.svg';
import './App.css';
import React, { useEffect } from 'react'
import Front from '@frontapp/plugin-sdk';

function App() {

  let conversationId='none';
  useEffect(() =>{
    Front.contextUpdates.subscribe(context=>{
      conversationId = context.conversation.id;
      console.log(latestContext);
    });
  },[])
  ;


  return (
    <div className="App">
      {conversationId}
    </div>
  );
}

export default App;```
4

Yeah, I'm running into the same issue. :thinking: Even though custom components are sandboxed, they should still have the proper permissions for communicating across windows. I think the plugin SDK is written in such a way that it doesn't expect nested frames:

image
image1272×404 58.8 KB

Executed from within the custom component, the above parent actually references the wrapping Retool app, which might explain why we're unable to establish a handshake with Front.

Outside of modifying the SDK, I think the best workaround is still what you brought up earlier - spinning up a React app as outlined here and then embedding your Retool app within it. Note that this solution would require hosting in order to reference the app from within Front.