Forge Custom UI - full screen view

Forge Forge UI Kit and Custom UI
, ,
4

Thanks @AndreyLednev - you got me on the right track. I have posted my working code here for any others who may be encountering any issues:

The “open modal” button component. The htmlBody property is sourced from an attachment to the page that contains the Forge macro:

const OpenModalButton = ({htmlBody}) => {

  const [passedHtmlBody, setPassedHtmlBody] = useState(undefined);

  useEffect( () =>{
    setPassedHtmlBody(htmlBody);
  }, [passedHtmlBody, htmlBody]);

  const buttonClickHandler = () => {
    const modal = new Modal({
      resource: 'modal',
       onClose: (payload) => {
       },
       size: 'max',
       context : {
        htmlBody: {passedHtmlBody},
       }
    });
    modal.open(); 
  } // buttonClickHandler

  return (
  <button onClick={buttonClickHandler}>Open Modal</button>
 )
}

Modal App that retrieves the “htmlBody” and renders it in the modal dialog

function App() {
  const [htmlBody, setHtmlBody] = useState(undefined);

  useEffect( () => {
    view
      .getContext()
      .then( (context) => { 
        const payload = context?.extension?.modal?.htmlBody?.passedHtmlBody; 
        setHtmlBody(payload);
      });
  }, []);

  return (
    <>
    <button onClick={ () =>{ 
      view.close({ formValues: [],});
    }} >Close Modal</button>
    <AttachmentIframe htmlBody={htmlBody}/>
     </>
  );
}

Thanks and regards,
Andrew